Skip to main content
CodingTheme

Color themes

VS Code preview

Full workbench mockup using this variant's colors and tokenColors.

Loading...

colors

Workbench UI color keys from the theme JSON colors map.

  • activityBar.background#e6ddc3
  • editor.background#f9f6f1
  • editor.lineHighlightBackground#e6ddc359
  • editor.selectionBackground#ffcae0
  • editorBracketMatch.background#3DAAA5
  • editorBracketMatch.border#5E2D53
  • editorGroupHeader.tabsBackground#F2EBE0
  • editorGutter.background#f9f6f1
  • editorLineNumber.foreground#DACCA5
  • scrollbarSlider.background#e6ddc3
  • scrollbarSlider.hoverBackground#DACCA5
  • sideBar.background#E0D4B4
  • statusBar.background#E0D4B4
  • tab.activeBackground#f9f6f1
  • tab.activeForeground#C67990
  • tab.border#f9f6f1
  • tab.inactiveBackground#c2aa4d
  • tab.inactiveForeground#5E2D53

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
constant.language, support.constant, variable.language#68325cbold
storage.type#6a3951
entity.name.function.method#3b6160
entity.name.function,support.function.dom.js#C67990underline
constant.numeric#4EBFBB
constant.language#3b6160bold
variable.parameter#65364Dbold
support.function#68325c
variable#3b6160
keyword#c16e87bold
constant.character, constant.other#3b6160
invalid#45bcb7
variable.other.readwrite,variable.other.readwrite.js,variable.other.readwrite.ts,variable.other.readwrite.tsx,variable.other.object.js,punctuation.accessor.js#d7884f
variable.other.property.js#D27837
keyword.control.at-rule.import.scss,keyword.control.module.js,keyword.operator.accessor#45bcb7
keyword.control.import.js,keyword.control.from.js,keyword.control.export.js,keyword.control.default.js,support.type.object.module.ts#45bcb7
string.template#416B6A
string.quoted.single.js,string.quoted.single.scss,string.quoted.single.attribute-value.scss,string.quoted.single.json,string.quoted.single.ts#416B6A
string.quoted.double.js,string.quoted.double.scss,string.quoted.double.attribute-value.scss,string.quoted.double.json,string.quoted.double.ts#416B6A
constant.other.object.key.js,meta.object-literal.key.js,support.type.property-name.json,meta.object-literal.key.ts,variable.other.property.ts#5E2D53
support.class.builtin.js#385C5B
comment#3DAAA5
comment.block.documentation#4EBFBB
comment.line.double-slash,punctuation.definition.comment.scss,comment.line.scss#3DAAA5
punctuation.definition.comment.html#d7884f
comment.block.html#DACCA5
variable.language.this,storage.type.function.js,keyword.control.flow.js,support.variable.dom.js,support.variable.property.dom.js,support.function.promise.ts,keyword.control.flow.ts#3b6160
constant.language.null.js#385C5Bbold
constant.language.boolean,constant.language.boolean.false.ts,constant.language.boolean.true.ts#5F3349bold
support.type.object.console.js#d33682
support.function.console.js#d33682
variable.other.class.js#385C5B
entity.other.attribute-name,entity.other.attribute-name.class.css#268bd2
support.type.property-name.scss,support.type.property-name.css#3b6160italic
support.constant.property-value.scss,support.constant.property-value.css#3C8F93
entity.name.tag.scss,support.constant.tag.cssunderline
support.function.misc.scss#2c91af
variable.scss#00AFD6
variable.language.constructor#355756
#6688cc
storage#D27837
storage.type.let#d33682
entity.name.class, entity.name.type#633057undereline
entity.other.inherited-class#723765underline
entity.name.tag#D27837
meta.diff, meta.diff.header#E0EDDDitalic
markup.deleted#dc322f
markup.changed#cb4b16
markup.inserted#219186
markup.quote#22aa44
markup.italic#22aa44
markup.inline.raw#9966b8
markup.heading.setext#ddbb88

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Niketa Theme Light Legacy by selfrefactor - VS Code Theme