Skip to main content
Coding Theme

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#C4BE9D
  • badge.background#aaa
  • badge.foreground#fafafa
  • diffEditor.insertedTextBackground#9c824a55
  • diffEditor.removedTextBackground#64B5F655
  • editor.background#d8d5c9
  • editor.findMatchBackground#95a5a677
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.foldBackground#fafafa
  • editor.lineHighlightBackground#b0b4b425
  • editor.lineHighlightBorderx#9a9b9411
  • editor.selectionBackground#b0b4b455
  • editor.selectionHighlightBackground#b0b4b488
  • editor.wordHighlightBackground#b0b4b4aa
  • editor.wordHighlightStrongBackground#b0b4b4dd
  • editorBracketMatch.background#ecf6ff
  • editorBracketMatch.border#c3c1a9
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#b0b4b4
  • editorLineNumber.foreground#2a3343a9
  • editorLink.activeForeground#034694
  • editorSuggestWidget.background#c3c1a9
  • editorSuggestWidget.border#936776
  • editorSuggestWidget.foreground#344250
  • editorSuggestWidget.highlightForeground#4d0e0b
  • editorSuggestWidget.selectedBackground#fafafa
  • errorForeground#B1365Bf3
  • focusBorder#525e54
  • git.color.modified#a50044
  • gitDecoration.modifiedResourceForeground#eae3cd
  • gitDecoration.untrackedResourceForeground#a50044
  • list.activeSelectionBackground#cacacc
  • list.activeSelectionForeground#445a63
  • list.dropBackground#999a9d
  • list.errorForeground#a50044
  • list.focusBackground#978373d2
  • list.highlightForeground#861d4f
  • list.hoverBackground#b1c1a5
  • list.hoverForeground#30322e
  • list.inactiveSelectionBackground#d1d3d4aa
  • list.inactiveSelectionForeground#95a5a6
  • scrollbarSlider.background#b0b4b4
  • scrollbarSlider.hoverBackground#C4BE9D
  • selection.background#ebe6d9
  • sideBar.background#b0b4b4
  • sideBar.border#445250c1
  • sideBar.foreground#f9f4f4
  • sideBarSectionHeader.background#aebabee9
  • sideBarSectionHeader.foreground#2a3343e9
  • sideBarTitle.foreground#30322ed1
  • statusBar.background#b0b4b4
  • statusBar.foreground#35495f
  • tab.activeBackground#d8d5c9
  • tab.activeBorder#35495f
  • tab.activeForeground#35495f
  • tab.border#b0b4b4
  • tab.inactiveBackground#b0b4b4
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#b0b4b4
  • tab.unfocusedActiveBorder#b0b4b4
  • tab.unfocusedActiveForeground#fff
  • widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.json#2f586f
source.css#2f586f
source.go#2f586f
constant.character#DD4F26
constant.language.boolean#DD4F26
entity.name.tag#DD4F26underline
keyword#E1613C
markup.italic#df5831
entity.name.function.method#E1613C
string.quoted.single.js#E1613C
string.quoted.single.jsx#df5831
string.quoted.single.ts#DD4F26
string.quoted.single.tsx#DD4F26
support.type.property-name.json#df5831
punctuation.accessor.js#df5831
punctuation.accessor.jsx#E26946
punctuation.accessor.ts#df5831
punctuation.accessor.tsx#CC4620
punctuation.separator.key-value.js#DD4F26
punctuation.separator.key-value.jsx#CC4620
punctuation.separator.key-value.ts#df5831
punctuation.separator.key-value.tsx#df5831
constant.numeric#df5831
meta.brace.square.js#CC4620
meta.brace.square.jsx#df5831
meta.brace.square.ts#E26946
meta.brace.square.tsx#df5831
meta.var.expr.js#CC4620
meta.var.expr.jsx#df5831
meta.var.expr.ts#df5831
meta.var.expr.tsx#CC4620
storage.modifier.js#D64A21
storage.modifier.jsx#E1613C
storage.modifier.ts#E1613C
storage.modifier.tsx#E47251
storage.type#CC4620
string.template#E1613C
support.constant#DD4F26
support.function.dom.js#df5831
support.function.dom.jsx#df5831
support.function.dom.ts#df5831
support.function.dom.tsx#df5831
support.variable.property.js#df5831
support.variable.property.jsx#E1613C
support.variable.property.ts#df5831
support.variable.property.tsx#df5831
variable.language.constructor#df5831underline
variable.language.this#df5831
meta.tag.js#E1613C
meta.tag.jsx#DD4F26
meta.tag.ts#df5831
meta.tag.tsx#df5831
support.type.object.module.js#df5831
support.type.object.module.jsx#df5831
support.type.object.module.ts#df5831
support.type.object.module.tsx#CC4620
punctuation.definition.parameters.begin.js#E1613C
punctuation.definition.parameters.begin.jsx#D64A21
punctuation.definition.parameters.begin.ts#E1613C
punctuation.definition.parameters.begin.tsx#df5831
punctuation.definition.parameters.end.js#E26946
punctuation.definition.parameters.end.jsx#df5831
punctuation.definition.parameters.end.ts#DD4F26
punctuation.definition.parameters.end.tsx#df5831
punctuation.definition.parameters.end.js#DD4F26
punctuation.definition.parameters.end.jsx#DD4F26
punctuation.definition.parameters.end.ts#D64A21
punctuation.definition.parameters.end.tsx#df5831
markup.quote#E26946
entity.other.attribute-name.js#df5831
entity.other.attribute-name.jsx#df5831
entity.other.attribute-name.ts#D64A21
entity.other.attribute-name.tsx#df5831
comment#8c7647
constant.language#8c7647
constant.other#8c7647
keyword.control.flow.js#df5831
keyword.control.flow.jsx#df5831
keyword.control.flow.ts#79663D
keyword.control.flow.tsx#8c7647
keyword.control.module.js#79663D
keyword.control.module.jsx#8c7647
keyword.control.module.ts#8c7647
keyword.control.module.tsx#8c7647
keyword.operator.accessor#7F6B41
markup.italic#8c7647
meta.import.js#8c7647
meta.import.jsx#867144
meta.import.ts#8c7647
meta.import.tsx#8c7647
meta.object-literal.key.js#8c7647
meta.object-literal.key.jsx#9F8651
meta.object-literal.key.ts#8c7647
meta.object-literal.key.tsx#8c7647
meta.paragraph.markdown#927B4A
punctuation.definition.block.js#8c7647
punctuation.definition.block.jsx#927B4A
punctuation.definition.block.ts#927B4A
punctuation.definition.block.tsx#8c7647
punctuation.separator.parameter.js#8c7647
punctuation.separator.parameter.jsx#8c7647
punctuation.separator.parameter.ts#8c7647
punctuation.separator.parameter.tsx#927B4A
string.quoted.single.js#7F6B41
string.quoted.single.jsx#927B4A
string.quoted.single.ts#99814D
string.quoted.single.tsx#867144
string.quoted.single.json#867144
support.class.promise.js#8c7647
support.class.promise.jsx#8c7647
support.class.promise.ts#8c7647
support.class.promise.tsx#927B4A
support.function#8c7647
keyword.control.import.js#99814D
keyword.control.import.jsx#8c7647
keyword.control.import.ts#7F6B41
keyword.control.import.tsx#8c7647
keyword.control.from.js#867144
keyword.control.from.jsx#867144
keyword.control.from.ts#8c7647
keyword.control.from.tsx#927B4A
keyword.control.export.js#8c7647
keyword.control.export.jsx#8c7647
keyword.control.export.ts#8c7647
keyword.control.export.tsx#8c7647
keyword.control.default.js#8c7647
keyword.control.default.jsx#79663D
keyword.control.default.ts#8c7647
keyword.control.default.tsx#8c7647
entity.name.class#867144underline
support.function.console.js#79663D
support.function.console.jsx#8c7647
support.function.console.ts#99814D
support.function.console.tsx#927B4A
variable.language#8c7647
invalid#7F6B41underline
support.type.object.console.js#8c7647
support.type.object.console.jsx#8c7647
support.type.object.console.ts#927B4A
support.type.object.console.tsx#8c7647
variable.parameter#8c7647
comment.block.documentation#9F8651
comment.line.double-slash#867144
constant.language.null.js#315C74
constant.language.null.jsx#2f586f
constant.language.null.ts#2f586f
constant.language.null.tsx#2D546A
entity.name.type#2D546A
meta.parameters.js#2D546A
meta.parameters.jsx#2f586f
meta.parameters.ts#2f586f
meta.parameters.tsx#2f586f
variable.other.class.js#2f586f
variable.other.class.jsx#2f586f
variable.other.class.ts#2D546A
variable.other.class.tsx#2D546A
constant.other.object.key.js#2f586f
constant.other.object.key.jsx#2f586f
constant.other.object.key.ts#2D546A
constant.other.object.key.tsx#315C74
entity.other.inherited-class#315C74
markup.heading.markdown#35647E
meta.brace.round.js#2f586f
meta.brace.round.jsx#315C74
meta.brace.round.ts#2f586f
meta.brace.round.tsx#2B5065
entity.name.function#927B4Aunderline
meta.tag.attributes.js#2B5065
meta.tag.attributes.jsx#2f586f
meta.tag.attributes.ts#2D546A
meta.tag.attributes.tsx#2f586f
punctuation.accessor.js#2f586f
punctuation.accessor.jsx#2B5065
punctuation.accessor.ts#2B5065
punctuation.accessor.tsx#294C60
punctuation.separator.comma.js#2D546A
punctuation.separator.comma.jsx#2f586f
punctuation.separator.comma.ts#2f586f
punctuation.separator.comma.tsx#2f586f
source.js#2D546A
source.jsx#2f586f
source.ts#294C60
source.tsx#294C60
variable.other.property.js#2f586f
variable.other.property.jsx#35647E
variable.other.property.ts#2f586f
variable.other.property.tsx#2f586f
storage.modifier.async.js#2f586f
storage.modifier.async.jsx#2f586f
storage.modifier.async.ts#2D546A
storage.modifier.async.tsx#2D546A
support.class.builtin.js#2f586f
support.class.builtin.jsx#2f586f
support.class.builtin.ts#2D546A
support.class.builtin.tsx#2f586f
support.type.primitive.js#315C74
support.type.primitive.jsx#294C60
support.type.primitive.ts#2f586f
support.type.primitive.tsx#2B5065
support.variable.property.js#2f586f
support.variable.property.jsx#2D546A
support.variable.property.ts#315C74
support.variable.property.tsx#2f586f
variable#2B5065
variable.other.object.js#2B5065
variable.other.object.jsx#2f586f
variable.other.object.ts#2D546A
variable.other.object.tsx#2f586f
variable.other.readwrite#2D546A
variable.other.readwrite.js#2B5065
variable.other.readwrite.jsx#2f586f
variable.other.readwrite.ts#2f586f
variable.other.readwrite.tsx#2f586f
Niketa Theme Light Old by selfrefactor - VS Code Theme