Firefox浏览器修改背景颜色为豆沙绿


问题:

Firefox自带修改颜色的功能(选项-内容-颜色-背景),但效果并不太理想,一是修改后感觉网站们的排版都怪怪的,二是提供的默认的颜色都并不太适合作为背景色。

 

解决方案:

Firefox的优势就在于众多的插件,这个问题也通过插件来解决。

 

安装Stylish插件。在Stylish官网上有各种针对一些特定网站(比如Facebook、YouTube等)的主题,对于改背景色这个问题用不上,需要手工编写新样式。

以下是新样式的内容:

 

body  {background-color:#C7EDCC !important;}
table {background-color:#C7EDCC !important;}
td    {background-color:#C7EDCC !important;}

#container    {background-color:#C7EDCC !important;}
#wrapper      {background-color:#C7EDCC !important;}
#mainwrapper  {background-color:#C7EDCC !important;}
#main-wrapper {background-color:#C7EDCC !important;}
#content      {background-color:#C7EDCC !important;}
#maincontent  {background-color:#C7EDCC !important;}
#main-content {background-color:#C7EDCC !important;}
#main         {background-color:#C7EDCC !important;}
.container    {background-color:#C7EDCC !important;}
.wrapper      {background-color:#C7EDCC !important;}
.mainwrapper  {background-color:#C7EDCC !important;}
.main-wrapper {background-color:#C7EDCC !important;}
.content      {background-color:#C7EDCC !important;}
.maincontent  {background-color:#C7EDCC !important;}
.main-content {background-color:#C7EDCC !important;}
.main         {background-color:#C7EDCC !important;}
.gb-page-inner{background-color:#C7EDCC !important;}
.panel-body   {background-color:#C7EDCC !important;}

 

 

 

 

 

 

 

最上边的body、table、td等的设置是通用的,下边的则是需要根据不同网站命名的不同而不断添加的,列表需要不断维护。

 

为了便于快速找到需要修改背景颜色的div的位置,可以安装Tilt插件,安装后按Ctrl + Shift + M键,以实现原来Firefox自带但最新版本已经去掉的3D视图功能。通过3D视图,双击需要需改背景颜色的div,然后右边会显示出相关代码,找出该div的id或者class,然后将其添加进列表中保存,即可。

 

不需要将所有div的背景颜色都设为绿色,只需要关注所阅读的部分就好。同时对于某些网站,可以使用Firefox提供的阅读模式。

 

【2018.12.28更新】

对于强需求的:Stylish早就不更新了,在最新版的Firefox好像用不了,可以使用Stylish的分支版本Stylus。
对于一般用户:折腾它干嘛,把显示器亮度调低点会更舒服,还简单快捷。