语法高亮

Dark Modern（新版默认暗色）- 语法高亮

主背景：#1e1e1e，主文本：#d4d4d4，所有色值为十六进制（HEX），可直接复制使用。

代码元素	色值	适用场景
注释（单行/多行）	#6a9955	// 注释、/* 注释 */
字符串	#ce9178	'字符串'、"字符串"
数字/布尔值	#b5cea8	123、true、false
关键字	#569cd6	if/else、const/let、function
函数名/方法名	#dcdcaa	fn()、console.log()
变量/标识符	#9cdcfe	let name = ''
类/构造函数	#4ec9b0	class Test {}、new Object()
类的属性/方法	#9cdcfe	test.foo、test.bar()
装饰器/注解	#c586c0	@decorator、@Component
运算符	#d4d4d4	+、=、&&、`
括号/分隔符	#d4d4d4	()、[]、{}、,
HTML 标签名	#569cd6	<div>、<span>
HTML 属性名	#9cdcfe	class、src、onClick
HTML 属性值	#ce9178	class="box"
CSS 选择器	#d7ba7d	.box、#app、body
CSS 属性名	#9cdcfe	color、font-size
CSS 属性值	#ce9178	red、16px、#fff
正则表达式	#d16969	/^1\d{10}$/
模板字符串插值	#9cdcfe	`Hello ${name}`
错误提示	#f44747	语法错误、未定义变量

Light Modern（新版默认亮色）- 语法高亮

主背景：#ffffff，主文本：#1e1e1e，色值适配亮色背景，对比度适中，不刺眼。

代码元素	色值	适用场景
注释（单行/多行）	#6a9955	// 注释、/* 注释 */
字符串	#a31515	'字符串'、"字符串"
数字/布尔值	#098658	123、true、false
关键字	#0000ff	if/else、const/let、function
函数名/方法名	#795e26	fn()、console.log()
变量/标识符	#000000	let name = ''
类/构造函数	#267f99	class Test {}、new Object()
类的属性/方法	#000000	test.foo、test.bar()
装饰器/注解	#af00db	@decorator、@Component
运算符	#000000	+、=、&&、`
括号/分隔符	#000000	()、[]、{}、,
HTML 标签名	#800000	<div>、<span>
HTML 属性名	#ff0000	class、src、onClick
HTML 属性值	#a31515	class="box"
CSS 选择器	#795e26	.box、#app、body
CSS 属性名	#ff0000	color、font-size
CSS 属性值	#a31515	red、16px、#fff
正则表达式	#d16969	/^1\d{10}$/
模板字符串插值	#0000ff	`Hello ${name}`
错误提示	#f44747	语法错误、未定义变量