VS Code 颜色管理

预计阅读时长 : 8 分钟

不论是在 VS Code 中配置各种语法样式，还是在 MkDocs 中配置前端展示样式，都离不开进行颜色管理。

CSS Color 预设颜色

在优先考虑跨平台通用性的前提下，我们选择使用 CSS Color 预设颜色 ⧉ 作为通用的颜色管理标准。

使用预设颜色最大的好处是可以直接使用颜色名称，而不需要记住颜色的具体数值，同时也可以避免在不同平台上颜色显示不一致的问题。

快捷选择

为了能够从预设颜色中快速选择，我们可以使用 Color Manager ⧉ 扩展提供的侧边栏及相应的功能进行操作。

第一步先在颜色下拉列表中选择 CSS Colors，然后在下方的颜色列表中，通过点击 > 将色值模式调整为名称，最后只需要点击前面的色块，即可自动复制和黏贴颜色名称到编辑框中。

颜色显示

如果能在编辑器中直接看到颜色的效果，那么颜色管理的体验可以得到大幅提升。通过将 colorize ⧉ 和 Color Info ⧉ 这两个扩展配合使用，可以完美实现这个需求。

CSS 文件

由于在 MkDocs 中，很多场景下有直接写入 CSS 样式的需求，因此还需要新建一个 CSS 文件，将 CSS Color 预设颜色全部配置出来方便调用。

下面的 CSS 文件，整理了全部的预设颜色信息，并增加了对应的中文名，更便于理解和使用。

CSS Colors

.Red {
color: #FF0000;
/*纯红*/
}

.LightSalmon {
color: #FFA07A;
/*浅鲑鱼色*/
}

.Salmon {
color: #FA8072;
/*鲑鱼色*/
}

.DarkSalmon {
color: #E9967A;
/*深鲑鱼色*/
}

.LightCoral {
color: #F08080;
/*淡珊瑚色*/
}

.IndianRed {
color: #CD5C5C;
/*印度红*/
}

.Crimson {
color: #DC143C;
/*猩红*/
}

.FireBrick {
color: #B22222;
/*火砖色*/
}

.DarkRed {
color: #8B0000;
/*深红*/
}

.Pink {
color: #FFC0CB;
/*粉红*/
}

.LightPink {
color: #FFB6C1;
/*浅粉*/
}

.HotPink {
color: #FF69B4;
/*热情粉红*/
}

.DeepPink {
color: #FF1493;
/*深粉*/
}

.PaleVioletRed {
color: #DB7093;
/*苍紫罗兰红*/
}

.MediumVioletRed {
color: #C71585;
/*中紫罗兰红*/
}

.Orange {
color: #FFA500;
/*橙色*/
}

.DarkOrange {
color: #FF8C00;
/*深橙*/
}

.Coral {
color: #FF7F50;
/*珊瑚色*/
}

.Tomato {
color: #FF6347;
/*番茄色*/
}

.OrangeRed {
color: #FF4500;
/*橙红*/
}

.Yellow {
color: #FFFF00;
/*纯黄*/
}

.LightYellow {
color: #FFFFE0;
/*浅黄*/
}

.LemonChiffon {
color: #FFFACD;
/*柠檬薄纱*/
}

.LightGoldenrodYellow {
color: #FAFAD2;
/*浅秋麒麟黄*/
}

.PapayaWhip {
color: #FFEFD5;
/*番木瓜色*/
}

.Moccasin {
color: #FFE4B5;
/*鹿皮鞋色*/
}

.PeachPuff {
color: #FFDAB9;
/*桃色*/
}

.PaleGoldenrod {
color: #EEE8AA;
/*灰秋麒麟色*/
}

.Khaki {
color: #F0E68C;
/*卡其布色*/
}

.DarkKhaki {
color: #BDB76B;
/*深卡其布色*/
}

.Gold {
color: #FFD700;
/*金色*/
}

.Purple {
color: #800080;
/*紫色*/
}

.Lavender {
color: #E6E6FA;
/*淡薰衣草紫*/
}

.Thistle {
color: #D8BFD8;
/*蓟色*/
}

.Plum {
color: #DDA0DD;
/*李子色*/
}

.Violet {
color: #EE82EE;
/*紫罗兰色*/
}

.Orchid {
color: #DA70D6;
/*兰花紫*/
}

.Fuchsia {
color: #FF00FF;
/*灯笼海棠色*/
}

.Magenta {
color: #FF00FF;
/*洋红*/
}

.MediumOrchid {
color: #BA55D3;
/*中兰花紫*/
}

.MediumPurple {
color: #9370DB;
/*中紫*/
}

.Amethyst {
color: #9966CC;
/*紫水晶色*/
}

.BlueViolet {
color: #8A2BE2;
/*深紫罗兰蓝*/
}

.DarkViolet {
color: #9400D3;
/*深紫罗兰色*/
}

.DarkOrchid {
color: #9932CC;
/*深兰花紫*/
}

.DarkMagenta {
color: #8B008B;
/*深洋红*/
}

.MediumSlateBlue {
color: #7B68EE;
/*中板岩暗蓝灰*/
}

.SlateBlue {
color: #6A5ACD;
/*板岩暗蓝灰*/
}

.DarkSlateBlue {
color: #483D8B;
/*深岩暗蓝灰*/
}

.Indigo {
color: #4B0082;
/*靛青*/
}

.Green {
color: #008000;
/*纯绿*/
}

.PaleGreen {
color: #98FB98;
/*苍绿*/
}

.LightGreen {
color: #90EE90;
/*淡绿*/
}

.YellowGreen {
color: #9ACD32;
/*黄绿*/
}

.GreenYellow {
color: #ADFF2F;
/*绿黄*/
}

.Chartreuse {
color: #7FFF00;
/*查特酒绿*/
}

.LawnGreen {
color: #7CFC00;
/*草坪绿*/
}

.Lime {
color: #00FF00;
/*青柠色*/
}

.LimeGreen {
color: #32CD32;
/*青柠绿*/
}

.MediumSpringGreen {
color: #00FA9A;
/*中春绿*/
}

.SpringGreen {
color: #00FF7F;
/*春绿*/
}

.MediumAquamarine {
color: #66CDAA;
/*中碧绿*/
}

.Aquamarine {
color: #7FFFD4;
/*碧绿*/
}

.LightSeaGreen {
color: #20B2AA;
/*浅海洋绿*/
}

.MediumSeaGreen {
color: #3CB371;
/*中海洋绿*/
}

.SeaGreen {
color: #2E8B57;
/*海洋绿*/
}

.DarkSeaGreen {
color: #8FBC8F;
/*深海洋绿*/
}

.ForestGreen {
color: #228B22;
/*森林绿*/
}

.DarkGreen {
color: #006400;
/*深绿*/
}

.OliveDrab {
color: #6B8E23;
/*橄榄土褐*/
}

.Olive {
color: #808000;
/*橄榄*/
}

.DarkOliveGreen {
color: #556B2F;
/*深橄榄绿*/
}

.Teal {
color: #008080;
/*深青*/
}

.Blue {
color: #0000FF;
/*纯蓝*/
}

.LightBlue {
color: #ADD8E6;
/*淡蓝*/
}

.PowderBlue {
color: #B0E0E6;
/*粉蓝*/
}

.PaleTurquoise {
color: #AFEEEE;
/*苍绿松石色*/
}

.MediumTurquoise {
color: #48D1CC;
/*中绿松石色*/
}

.Turquoise {
color: #40E0D0;
/*绿松石色*/
}

.DarkTurquoise {
color: #00CED1;
/*深绿松石色*/
}

.LightCyan {
color: #E0FFFF;
/*浅青*/
}

.Cyan {
color: #00FFFF;
/*青色*/
}

.Aqua {
color: #00FFFF;
/*水色*/
}

.DarkCyan {
color: #008B8B;
/*深青*/
}

.CadetBlue {
color: #5F9EA0;
/*学员蓝*/
}

.LightSteelBlue {
color: #B0C4DE;
/*淡钢蓝*/
}

.SteelBlue {
color: #4682B4;
/*钢蓝*/
}

.LightSkyBlue {
color: #87CEFA;
/*淡天蓝*/
}

.SkyBlue {
color: #87CEEB;
/*天蓝*/
}

.DeepSkyBlue {
color: #00BFFF;
/*深天蓝*/
}

.DodgerBlue {
color: #1E90FF;
/*道奇蓝*/
}

.CornflowerBlue {
color: #6495ED;
/*矢车菊蓝*/
}

.RoyalBlue {
color: #4169E1;
/*宝蓝*/
}

.MediumBlue {
color: #0000CD;
/*中蓝*/
}

.DarkBlue {
color: #00008B;
/*深蓝*/
}

.Navy {
color: #000080;
/*海军蓝*/
}

.MidnightBlue {
color: #191970;
/*午夜蓝*/
}

.Brown {
color: #A52A2A;
/*纯褐*/
}

.Cornsilk {
color: #FFF8DC;
/*玉米丝色*/
}

.BlanchedAlmond {
color: #FFEBCD;
/*白杏仁色*/
}

.Bisque {
color: #FFE4C4;
/*浓汤色*/
}

.NavajoWhite {
color: #FFDEAD;
/*纳瓦霍白*/
}

.Wheat {
color: #F5DEB3;
/*小麦色*/
}

.BurlyWood {
color: #DEB887;
/*硬木色*/
}

.Tan {
color: #D2B48C;
/*棕褐*/
}

.RosyBrown {
color: #BC8F8F;
/*玫瑰金*/
}

.SandyBrown {
color: #F4A460;
/*沙褐*/
}

.Goldenrod {
color: #DAA520;
/*金菊色*/
}

.DarkGoldenrod {
color: #B8860B;
/*深金菊色*/
}

.Peru {
color: #CD853F;
/*秘鲁色*/
}

.Chocolate {
color: #D2691E;
/*巧克力色*/
}

.SaddleBrown {
color: #8B4513;
/*鞍褐色*/
}

.Sienna {
color: #A0522D;
/*赭黄*/
}

.Maroon {
color: #800000;
/*栗色*/
}

.White {
color: #FFFFFF;
/*纯白*/
}

.Snow {
color: #FFFAFA;
/*雪白*/
}

.Honeydew {
color: #F0FFF0;
/*哈密瓜色*/
}

.MintCream {
color: #F5FFFA;
/*薄荷奶油色*/
}

.Azure {
color: #F0FFFF;
/*天蓝白*/
}

.AliceBlue {
color: #F0F8FF;
/*爱丽丝蓝*/
}

.GhostWhite {
color: #F8F8FF;
/*幽灵白*/
}

.WhiteSmoke {
color: #F5F5F5;
/*烟熏白*/
}

.Seashell {
color: #FFF5EE;
/*贝壳白*/
}

.Beige {
color: #F5F5DC;
/*米白*/
}

.OldLace {
color: #FDF5E6;
/*旧蕾丝白*/
}

.FloralWhite {
color: #FFFAF0;
/*花白*/
}

.Ivory {
color: #FFFFF0;
/*象牙白*/
}

.AntiqueWhite {
color: #FAEBD7;
/*古董白*/
}

.Linen {
color: #FAF0E6;
/*亚麻白*/
}

.LavenderBlush {
color: #FFF0F5;
/*薰衣草紫红*/
}

.MistyRose {
color: #FFE4E1;
/*雾玫瑰色*/
}

.Gray {
color: #808080;
/*纯灰*/
}

.Gainsboro {
color: #DCDCDC;
/*庚斯博罗灰*/
}

.LightGray {
color: #D3D3D3;
/*淡灰*/
}

.Silver {
color: #C0C0C0;
/*纯银*/
}

.DarkGray {
color: #A9A9A9;
/*深灰*/
}

.DimGray {
color: #696969;
/*昏灰*/
}

.LightSlateGray {
color: #778899;
/*淡岩灰*/
}

.SlateGray {
color: #708090;
/*岩灰*/
}

.DarkSlateGray {
color: #2F4F4F;
/*深岩灰*/
}

.Black {
color: #000000;
/*纯黑*/
}