一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。
前言
大家好，我是小阵 🔥，一路奔波不停的码字业务员
身为一个前端小菜鸟，总是有一个飞高飞远的梦想，因此，每点小成长，我都想要让它变得更有意义，为了自己，也为了更多值得的人
如果喜欢我的文章，可以关注 ➕ 点赞，与我一同成长吧~😋
加我微信：zzz886885，邀你进群，一起学习交流，摸鱼学习两不误🌟
开开心心学技术大法~~
来了来了，他真的来了~
正文
谷歌主题是一种谷歌的特殊插件，他不需要js也不需要html，只需要若干图片资源（甚至不需要图片也可以）和一个manifest.json
贴一个标准的示例代码
{
"version": "2.6",
"name": "camo theme",
"theme": {
"images" : {
"theme_frame" : "images/theme_frame_camo.png",
"theme_frame_overlay" : "images/theme_frame_stripe.png",
"theme_toolbar" : "images/theme_toolbar_camo.png",
"theme_ntp_background" : "images/theme_ntp_background_norepeat.png",
"theme_ntp_attribution" : "images/attribution.png"
},
"colors" : {
"frame" : [71, 105, 91],
"toolbar" : [207, 221, 192],
"ntp_text" : [20, 40, 0],
"ntp_link" : [36, 70, 0],
"ntp_section" : [207, 221, 192],
"button_background" : [255, 255, 255]
},
"tints" : {
"buttons" : [0.33, 0.5, 0.47]
},
"properties" : {
"ntp_background_alignment" : "bottom"
}
}
}
先上个实验性的主题：完整切图如下
下面是关键属性介绍与贴图示例：
images
- theme_ntp_background
新页面的内容主体，这里建议用大图，否则会跟我下面的情况一样
- theme_frame
浏览器的整体框架
- theme_toolbar
标签页下面的工具栏部分的
- theme_frame_overlay
聚焦的浏览器的window操作区域
- theme_frame_overlay_inactive
丢失焦点的浏览器的window操作区，例如我这里丢失是绿图，聚焦是黄图
- theme_tab_background
tab每个标签的背景，包括标签栏的其他按钮背景，我这里是个渐变的黑色图片。
- theme_tab_background_inactive
tab每个标签的背景丢失焦点的背景图片，我这里丢失焦点是绿图，聚焦是黄图
colors
- frame
浏览器整体框架的颜色，我自己设置了红色。如果设置了theme，那有可能这个颜色会被你设置的图片给遮挡住。如果框架上都被浏览器的其他元素遮盖了，我这里也做了个gif，可以从这里稍微看一下
- toolbar
浏览器的工具栏，当然也包括提示栏，我这里设置了绿色。如果设置了theme这里也有可能被挡住
- bookmark_text
书签字体颜色，我这里是红色
- tab_text
标签字体颜色，包括鼠标聚焦的标签字体，我这里是蓝色
- tab_background_text
标签背景字体颜色，如果没有被聚焦，则展示这个颜色，另外，鼠标移动到链接上浏览器左下角出现的链接字体颜色也是这个颜色，我这里是红色
- frame_inactive
标签失去焦点的时候的框架颜色，我这里丢失焦点的是紫色
- background_tab
浏览器聚焦的tab 背景颜色，我这里是红色。这个图可以跟
background_tab_inactive连起来看
- background_tab_inactive
浏览器不聚焦的 tab 背景颜色，我这里是绿色
- toolbar_button_icon
浏览器工具栏上的默认icon，我这里是蓝色
- omnibox_background
链接栏背景颜色，我这里是红色
- omnibox_text
链接栏字体颜色，只包含url，不包含参数，我这里是绿色
- ntp_background
新标签背景颜色，我这里是rgb的[11,11,11]
- ntp_text
新标签导航字体颜色，我这里是蓝色
properties
- ntp_background_alignment
新页面大图的位置
有四个值，分别是center,left,top,right,bottom
- ntp_background_repeat
新页面大图是否重复
有四个值，分别是no_repeat,repeat_x,repeat_y,repeat
- ntp_logo_alternate
tints
色调
有六个值，分别是background_tab,buttons,frame,frame_inactive,frame_incognito,frame_incognito_inactive
他们的用法都一样，都是
色调在色调饱和度（HSL）格式，使用范围0 - 1.0：
色调是绝对值，在 0 和 1 之间
饱和是相对于当前的图像的。
0.5没有变化，0完全不饱和，1是完全饱和度。
亮度也是相对的，0.5没有变化，0像素黑色，1作为所有像素白色。
您也可以将 -1.0 用于任何 HSL 值，表示不更改，也就是没有变化。
没有弄明白
- ntp_section
- ntp_link
- button_background
- theme_button_background
- ntp_header
- ntp_logo_alternate
知道的兄弟们记得教教在下哈😄
预期
这里有一个简单的谷歌主题： github
到时候感兴趣的朋友们可以去看看⭐️
当然，后续可能也会走一下谷歌插件的发布流程，看下怎样上谷歌的应用商店，想要持续关注的朋友可以点个关注哈~~ღ( ´･ᴗ･` )比心
办理visa卡可以用招商的visa卡，需要申请
结语
往期好文推荐「我不推荐下，大家可能就错过了史上最牛逼vscode插件集合啦！！！(嘎嘎嘎~)😄」
