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#e7e7e7
  • badge.foreground#3f7063
  • diffEditor.insertedTextBackground#9c824a55
  • diffEditor.removedTextBackground#64B5F655
  • editor.background#F1F1F1
  • editor.findMatchBackground#87a192
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.foldBackground#fafafa
  • editor.inactiveSelectionBackground#aaab9c66
  • editor.lineHighlightBackground#F1F1F1
  • editor.lineHighlightBorder#9c824a
  • editor.selectionBackground#cdd0d255
  • editor.selectionHighlightBackground#cdd0d277
  • editor.wordHighlightBackground#aa769b55
  • editor.wordHighlightStrongBackground#410a0b44
  • editorBracketMatch.background#e7e7e7
  • editorBracketMatch.border#fafafa
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#cdd0d2
  • editorHoverWidget.background#d1d3d4
  • editorHoverWidget.border#d78d9f
  • editorLineNumber.foreground#2a3343a9
  • editorLink.activeForeground#034694
  • editorSuggestWidget.background#d1d3d4
  • editorSuggestWidget.border#d78d9f
  • editorSuggestWidget.foreground#2a3343
  • editorSuggestWidget.highlightForeground#820014
  • editorSuggestWidget.selectedBackground#2c3d5244
  • editorWidget.background#cdd0d2
  • editorWidget.border#d78d9f
  • errorForeground#B1365Bf3
  • focusBorder#525e54
  • foreground#24283b
  • git.color.modified#4d0e0b
  • gitDecoration.addedResourceForeground#53245b
  • gitDecoration.modifiedResourceForeground#034694
  • gitDecoration.untrackedResourceForeground#aa769b
  • list.activeSelectionBackground#d1343822
  • list.activeSelectionForeground#2a3343
  • list.dropBackground#db82d6cc
  • list.errorForeground#a50044
  • list.focusBackground#6d50a188
  • list.highlightForeground#4d0e0b
  • list.hoverBackground#ad680066
  • list.hoverForeground#e7e7e7
  • list.inactiveFocusBackground#885f66cc
  • list.inactiveSelectionBackground#eae3cd55
  • list.inactiveSelectionForeground#4d0e0b
  • scrollbar.shadow#cf6f4b
  • scrollbarSlider.background#cdd0d2
  • scrollbarSlider.hoverBackground#C4BE9D
  • selection.background#ebe6d9
  • sideBar.background#cdd0d2
  • sideBar.border#8382ae
  • sideBar.foreground#85483d
  • sideBarSectionHeader.background#aebabe
  • sideBarSectionHeader.foreground#2a3343
  • sideBarTitle.foreground#30322e
  • statusBar.background#cdd0d2
  • statusBar.foreground#35495f
  • tab.activeBackground#F1F1F1
  • tab.activeBorder#35495f
  • tab.activeForeground#35495f
  • tab.border#cdd0d2
  • tab.inactiveBackground#cdd0d2
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#cdd0d2
  • tab.unfocusedActiveBorder#cdd0d2
  • tab.unfocusedActiveForeground#aa769b
  • widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
entity.name.tag#00BFE8underline
markup.italic#00a8cc
text.html.derivative#0099BA
punctuation.accessor.js#00a8cc
punctuation.accessor.jsx#00a8cc
punctuation.accessor.ts#00B0D5
punctuation.accessor.tsx#00a8cc
source.js#00B0D5
source.jsx#00a8cc
source.ts#00a8cc
source.tsx#00A0C3
storage.modifier.js#00a8cc
storage.modifier.jsx#00BFE8
storage.modifier.ts#00a8cc
storage.modifier.tsx#00B7DE
punctuation.separator.key-value.js#00a8cc
punctuation.separator.key-value.jsx#0091B0
punctuation.separator.key-value.ts#00B0D5
punctuation.separator.key-value.tsx#00A0C3
storage.type#00a8cc
string.quoted.single.js#00BFE8
string.quoted.single.jsx#00a8cc
string.quoted.single.ts#0099BA
string.quoted.single.tsx#00a8cc
support.function.dom.js#00BFE8
support.function.dom.jsx#00B0D5
support.function.dom.ts#00a8cc
support.function.dom.tsx#00A0C3
support.variable.property.js#00a8cc
support.variable.property.jsx#00BFE8
support.variable.property.ts#00B0D5
support.variable.property.tsx#00B0D5
variable.language.constructor#00A0C3underline
variable.language.this#00a8cc
meta.var.expr.js#222d60
meta.var.expr.jsx#27336D
meta.var.expr.ts#222d60
meta.var.expr.tsx#222d60
keyword#222d60
expression.ng#222d60
meta.brace.round.js#222d60
meta.brace.round.jsx#253169
meta.brace.round.ts#222d60
meta.brace.round.tsx#222d60
constant.language.boolean#27336D
constant.numeric#27336D
constant.language.null.js#242F64
constant.language.null.jsx#222d60
constant.language.null.ts#222d60
constant.language.null.tsx#222d60
entity.name.class#222d60underline
entity.name.function#222d60underline
entity.name.type#222d60underline
markup.heading.markdown#222d60
punctuation.separator.comma.js#202B5C
punctuation.separator.comma.jsx#222d60
punctuation.separator.comma.ts#202B5C
punctuation.separator.comma.tsx#202B5C
meta.tag.attributes.js#222d60
meta.tag.attributes.jsx#242F64
meta.tag.attributes.ts#222d60
meta.tag.attributes.tsx#222d60
support.variable.property.js#222d60
support.variable.property.jsx#222d60
support.variable.property.ts#242F64
support.variable.property.tsx#222d60
support.type.primitive.js#1F2957
support.type.primitive.jsx#202B5C
support.type.primitive.ts#202B5C
support.type.primitive.tsx#242F64
variable#1D2753
source.go#A24072
string.quoted.double.html#953b69
keyword.control.import.js#953b69
keyword.control.import.jsx#A94377
keyword.control.import.ts#953b69
keyword.control.import.tsx#953b69
source.json#953b69
source.css#953b69
variable.parameter#953b69
support.function#953b69
support.type.object.module.js#8E3864
support.type.object.module.jsx#8E3864
support.type.object.module.ts#8E3864
support.type.object.module.tsx#8E3864
meta.import.js#953b69
meta.import.jsx#953b69
meta.import.ts#953b69
meta.import.tsx#953b69
meta.paragraph.markdown#953b69
entity.other.attribute-name.js#9C3E6E
entity.other.attribute-name.jsx#81335B
entity.other.attribute-name.ts#8E3864
entity.other.attribute-name.tsx#953b69
string.quoted.single.js#8E3864
string.quoted.single.jsx#953b69
string.quoted.single.ts#953b69
string.quoted.single.tsx#8E3864
string.quoted.single.json#A24072
keyword.control.module.js#953b69
keyword.control.module.jsx#953b69
keyword.control.module.ts#953b69
keyword.control.module.tsx#953b69
support.class.promise.js#A24072
support.class.promise.jsx#8E3864
support.class.promise.ts#8E3864
support.class.promise.tsx#953b69
support.type.object.console.js#883660
support.type.object.console.jsx#953b69
support.type.object.console.ts#A94377
support.type.object.console.tsx#953b69
support.function.console.js#8E3864
support.function.console.jsx#953b69
support.function.console.ts#8E3864
support.function.console.tsx#953b69
punctuation.definition.block.js#883660
punctuation.definition.block.jsx#953b69
punctuation.definition.block.ts#8E3864
punctuation.definition.block.tsx#953b69
entity.other.ng-binding-name.property.html#b24826
punctuation.definition.parameters.begin.js#b24826
punctuation.definition.parameters.begin.jsx#b24826
punctuation.definition.parameters.begin.ts#AA4524
punctuation.definition.parameters.begin.tsx#b24826
punctuation.definition.parameters.end.js#C24E29
punctuation.definition.parameters.end.jsx#b24826
punctuation.definition.parameters.end.ts#b24826
punctuation.definition.parameters.end.tsx#b24826
punctuation.definition.parameters.end.js#AA4524
punctuation.definition.parameters.end.jsx#b24826
punctuation.definition.parameters.end.ts#b24826
punctuation.definition.parameters.end.tsx#b24826
keyword.control.export.js#C24E29
keyword.control.export.jsx#A24223
keyword.control.export.ts#b24826
keyword.control.export.tsx#b24826
keyword.control.from.js#b24826
keyword.control.from.jsx#BA4B28
keyword.control.from.ts#C24E29
keyword.control.from.tsx#b24826
markup.quote#AA4524
meta.tag.js#b24826
meta.tag.jsx#AA4524
meta.tag.ts#AA4524
meta.tag.tsx#b24826
meta.parameters.js#BA4B28
meta.parameters.jsx#b24826
meta.parameters.ts#C24E29
meta.parameters.tsx#b24826
meta.brace.square.js#AA4524
meta.brace.square.jsx#AA4524
meta.brace.square.ts#9A3E21
meta.brace.square.tsx#A24223
variable.other.class.js#b24826
variable.other.class.jsx#b24826
variable.other.class.ts#b24826
variable.other.class.tsx#A24223
constant.other.object.key.js#BA4B28
constant.other.object.key.jsx#b24826
constant.other.object.key.ts#b24826
constant.other.object.key.tsx#BA4B28
keyword.operator.accessor#b24826
keyword.control.default.js#AA4524
keyword.control.default.jsx#AA4524
keyword.control.default.ts#b24826
keyword.control.default.tsx#CA522B
entity.name.function.method#9A3E21
string.template#b24826
support.type.property-name.json#AA4524
variable.other.property.js#9A3E21
variable.other.property.jsx#AA4524
variable.other.property.ts#9A3E21
variable.other.property.tsx#AA4524
entity.other.ng-binding-name.outputReplEvent.html#01676b
entity.other.inherited-class#01676b
support.constant#017075
punctuation.separator.parameter.js#016266
punctuation.separator.parameter.jsx#01676b
punctuation.separator.parameter.ts#016C70
punctuation.separator.parameter.tsx#01595D
constant.character#01676b
constant.language#01676b
constant.other#016266
support.class.builtin.js#01595D
support.class.builtin.jsx#016266
support.class.builtin.ts#016266
support.class.builtin.tsx#01676b
comment#016266
markup.italic#015E61
meta.object-literal.key.js#016266
meta.object-literal.key.jsx#01676b
meta.object-literal.key.ts#01676b
meta.object-literal.key.tsx#016266
comment.block.documentation#01676b
comment.line.double-slash#01676b
punctuation.accessor.js#01595D
punctuation.accessor.jsx#01676b
punctuation.accessor.ts#016266
punctuation.accessor.tsx#01676b
invalid#016266underline
variable.language#01676b
storage.modifier.async.js#01676b
storage.modifier.async.jsx#01676b
storage.modifier.async.ts#017075
storage.modifier.async.tsx#01676b
variable.other.object.js#016266
variable.other.object.jsx#01676b
variable.other.object.ts#01595D
variable.other.object.tsx#015E61
variable.other.readwrite#01676b
variable.other.readwrite.js#01676b
variable.other.readwrite.jsx#01676b
variable.other.readwrite.ts#017075
variable.other.readwrite.tsx#01676b
Niketa Theme Light by selfrefactor - VS Code Theme