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。
对于一般用户：折腾它干嘛，把显示器亮度调低点会更舒服，还简单快捷。