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#CCA141underline
markup.italic#bb9132
text.html.derivative#AA842E
punctuation.accessor.js#bb9132
punctuation.accessor.jsx#bb9132
punctuation.accessor.ts#C39834
punctuation.accessor.tsx#bb9132
source.js#C39834
source.jsx#bb9132
source.ts#bb9132
source.tsx#B38A30
storage.modifier.js#bb9132
storage.modifier.jsx#CCA141
storage.modifier.ts#bb9132
storage.modifier.tsx#CA9D38
punctuation.separator.key-value.js#bb9132
punctuation.separator.key-value.jsx#A27D2B
punctuation.separator.key-value.ts#C39834
punctuation.separator.key-value.tsx#B38A30
storage.type#bb9132
string.quoted.single.js#CCA141
string.quoted.single.jsx#bb9132
string.quoted.single.ts#AA842E
string.quoted.single.tsx#bb9132
support.function.dom.js#CCA141
support.function.dom.jsx#C39834
support.function.dom.ts#bb9132
support.function.dom.tsx#B38A30
support.variable.property.js#bb9132
support.variable.property.jsx#CCA141
support.variable.property.ts#C39834
support.variable.property.tsx#C39834
variable.language.constructor#B38A30underline
variable.language.this#bb9132
meta.var.expr.js#20366b
meta.var.expr.jsx#243D79
meta.var.expr.ts#20366b
meta.var.expr.tsx#20366b
keyword#20366b
expression.ng#20366b
meta.brace.round.js#20366b
meta.brace.round.jsx#233B75
meta.brace.round.ts#20366b
meta.brace.round.tsx#20366b
constant.language.boolean#243D79
constant.numeric#243D79
constant.language.null.js#213870
constant.language.null.jsx#20366b
constant.language.null.ts#20366b
constant.language.null.tsx#20366b
entity.name.class#20366bunderline
entity.name.function#20366bunderline
entity.name.type#20366bunderline
markup.heading.markdown#20366b
punctuation.separator.comma.js#1F3466
punctuation.separator.comma.jsx#20366b
punctuation.separator.comma.ts#1F3466
punctuation.separator.comma.tsx#1F3466
meta.tag.attributes.js#20366b
meta.tag.attributes.jsx#213870
meta.tag.attributes.ts#20366b
meta.tag.attributes.tsx#20366b
support.variable.property.js#20366b
support.variable.property.jsx#20366b
support.variable.property.ts#213870
support.variable.property.tsx#20366b
support.type.primitive.js#1D3161
support.type.primitive.jsx#1F3466
support.type.primitive.ts#1F3466
support.type.primitive.tsx#213870
variable#1C2F5D
source.go#309EBF
string.quoted.double.html#2c91af
keyword.control.import.js#2c91af
keyword.control.import.jsx#32A5C7
keyword.control.import.ts#2c91af
keyword.control.import.tsx#2c91af
source.json#2c91af
source.css#2c91af
variable.parameter#2c91af
support.function#2c91af
support.type.object.module.js#2A8AA7
support.type.object.module.jsx#2A8AA7
support.type.object.module.ts#2A8AA7
support.type.object.module.tsx#2A8AA7
meta.import.js#2c91af
meta.import.jsx#2c91af
meta.import.ts#2c91af
meta.import.tsx#2c91af
meta.paragraph.markdown#2c91af
entity.other.attribute-name.js#2E98B7
entity.other.attribute-name.jsx#267D97
entity.other.attribute-name.ts#2A8AA7
entity.other.attribute-name.tsx#2c91af
string.quoted.single.js#2A8AA7
string.quoted.single.jsx#2c91af
string.quoted.single.ts#2c91af
string.quoted.single.tsx#2A8AA7
string.quoted.single.json#309EBF
keyword.control.module.js#2c91af
keyword.control.module.jsx#2c91af
keyword.control.module.ts#2c91af
keyword.control.module.tsx#2c91af
support.class.promise.js#309EBF
support.class.promise.jsx#2A8AA7
support.class.promise.ts#2A8AA7
support.class.promise.tsx#2c91af
support.type.object.console.js#28849F
support.type.object.console.jsx#2c91af
support.type.object.console.ts#32A5C7
support.type.object.console.tsx#2c91af
support.function.console.js#2A8AA7
support.function.console.jsx#2c91af
support.function.console.ts#2A8AA7
support.function.console.tsx#2c91af
punctuation.definition.block.js#28849F
punctuation.definition.block.jsx#2c91af
punctuation.definition.block.ts#2A8AA7
punctuation.definition.block.tsx#2c91af
entity.other.ng-binding-name.property.html#861D4F
punctuation.definition.parameters.begin.js#861D4F
punctuation.definition.parameters.begin.jsx#861D4F
punctuation.definition.parameters.begin.ts#801C4B
punctuation.definition.parameters.begin.tsx#861D4F
punctuation.definition.parameters.end.js#922056
punctuation.definition.parameters.end.jsx#861D4F
punctuation.definition.parameters.end.ts#861D4F
punctuation.definition.parameters.end.tsx#861D4F
punctuation.definition.parameters.end.js#801C4B
punctuation.definition.parameters.end.jsx#861D4F
punctuation.definition.parameters.end.ts#861D4F
punctuation.definition.parameters.end.tsx#861D4F
keyword.control.export.js#922056
keyword.control.export.jsx#7A1A48
keyword.control.export.ts#861D4F
keyword.control.export.tsx#861D4F
keyword.control.from.js#861D4F
keyword.control.from.jsx#8C1E53
keyword.control.from.ts#922056
keyword.control.from.tsx#861D4F
markup.quote#801C4B
meta.tag.js#861D4F
meta.tag.jsx#801C4B
meta.tag.ts#801C4B
meta.tag.tsx#861D4F
meta.parameters.js#8C1E53
meta.parameters.jsx#861D4F
meta.parameters.ts#922056
meta.parameters.tsx#861D4F
meta.brace.square.js#801C4B
meta.brace.square.jsx#801C4B
meta.brace.square.ts#741944
meta.brace.square.tsx#7A1A48
variable.other.class.js#861D4F
variable.other.class.jsx#861D4F
variable.other.class.ts#861D4F
variable.other.class.tsx#7A1A48
constant.other.object.key.js#8C1E53
constant.other.object.key.jsx#861D4F
constant.other.object.key.ts#861D4F
constant.other.object.key.tsx#8C1E53
keyword.operator.accessor#861D4F
keyword.control.default.js#801C4B
keyword.control.default.jsx#801C4B
keyword.control.default.ts#861D4F
keyword.control.default.tsx#98215A
entity.name.function.method#741944
string.template#861D4F
support.type.property-name.json#801C4B
variable.other.property.js#741944
variable.other.property.jsx#801C4B
variable.other.property.ts#741944
variable.other.property.tsx#801C4B
entity.other.ng-binding-name.outputReplEvent.html#E9630D
entity.other.inherited-class#E9630D
support.constant#F26E1A
punctuation.separator.parameter.js#DF5F0C
punctuation.separator.parameter.jsx#E9630D
punctuation.separator.parameter.ts#F2680F
punctuation.separator.parameter.tsx#CA560B
constant.character#E9630D
constant.language#E9630D
constant.other#DF5F0C
support.class.builtin.js#CA560B
support.class.builtin.jsx#DF5F0C
support.class.builtin.ts#DF5F0C
support.class.builtin.tsx#E9630D
comment#DF5F0C
markup.italic#D45A0C
meta.object-literal.key.js#DF5F0C
meta.object-literal.key.jsx#E9630D
meta.object-literal.key.ts#E9630D
meta.object-literal.key.tsx#DF5F0C
comment.block.documentation#E9630D
comment.line.double-slash#E9630D
punctuation.accessor.js#CA560B
punctuation.accessor.jsx#E9630D
punctuation.accessor.ts#DF5F0C
punctuation.accessor.tsx#E9630D
invalid#DF5F0Cunderline
variable.language#E9630D
storage.modifier.async.js#E9630D
storage.modifier.async.jsx#E9630D
storage.modifier.async.ts#F26E1A
storage.modifier.async.tsx#E9630D
variable.other.object.js#DF5F0C
variable.other.object.jsx#E9630D
variable.other.object.ts#CA560B
variable.other.object.tsx#D45A0C
variable.other.readwrite#E9630D
variable.other.readwrite.js#E9630D
variable.other.readwrite.jsx#E9630D
variable.other.readwrite.ts#F26E1A
variable.other.readwrite.tsx#E9630D
Niketa Theme Light by selfrefactor - VS Code Theme