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#f9f6f1
  • editor.findMatchBackground#95a5a677
  • editor.findMatchHighlightBackground#71aac355
  • editor.findRangeHighlightBackground#3f706366
  • editor.foldBackground#fafafa
  • editor.lineHighlightBackground#b7bcbf25
  • editor.lineHighlightBorderx#9a9b9411
  • editor.selectionBackground#b7bcbf55
  • editor.selectionHighlightBackground#b7bcbf88
  • editor.wordHighlightBackground#b7bcbfaa
  • editor.wordHighlightStrongBackground#b7bcbfdd
  • editorBracketMatch.background#ecf6ff
  • editorBracketMatch.border#c3c1a9
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#b7bcbf
  • 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#eae3cd
  • list.activeSelectionForeground#677d7f
  • list.dropBackground#999a9d
  • list.errorForeground#a50044
  • list.focusBackground#885f66aa
  • list.highlightForeground#89345d
  • list.hoverBackground#b1c1a5
  • list.hoverForeground#30322e
  • list.inactiveSelectionBackground#eae3cd55
  • list.inactiveSelectionForeground#95a5a6
  • scrollbarSlider.background#b7bcbf
  • scrollbarSlider.hoverBackground#C4BE9D
  • selection.background#ebe6d9
  • sideBar.background#b7bcbf
  • sideBar.border#445250c1
  • sideBar.foreground#f9f4f4
  • sideBarSectionHeader.background#aebabee9
  • sideBarSectionHeader.foreground#2a3343e9
  • sideBarTitle.foreground#30322ed1
  • statusBar.background#b7bcbf
  • statusBar.foreground#35495f
  • tab.activeBackground#f9f6f1
  • tab.activeBorder#35495f
  • tab.activeForeground#35495f
  • tab.border#b7bcbf
  • tab.inactiveBackground#b7bcbf
  • tab.inactiveForeground#fff
  • tab.unfocusedActiveBackground#b7bcbf
  • tab.unfocusedActiveBorder#b7bcbf
  • tab.unfocusedActiveForeground#fff
  • widget.shadow#8382aebb

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source.json#356a6d
source.css#356a6d
source.go#356a6d
constant.character#83305B
constant.language.boolean#83305B
entity.name.tag#83305Bunderline
keyword#8F3463
markup.italic#89325f
entity.name.function.method#8F3463
string.quoted.single.js#8F3463
string.quoted.single.jsx#89325f
string.quoted.single.ts#83305B
string.quoted.single.tsx#83305B
support.type.property-name.json#89325f
punctuation.accessor.js#89325f
punctuation.accessor.jsx#953668
punctuation.accessor.ts#89325f
punctuation.accessor.tsx#772B52
punctuation.separator.key-value.js#83305B
punctuation.separator.key-value.jsx#772B52
punctuation.separator.key-value.ts#89325f
punctuation.separator.key-value.tsx#89325f
constant.numeric#89325f
meta.brace.square.js#772B52
meta.brace.square.jsx#89325f
meta.brace.square.ts#953668
meta.brace.square.tsx#89325f
meta.var.expr.js#772B52
meta.var.expr.jsx#89325f
meta.var.expr.ts#89325f
meta.var.expr.tsx#772B52
storage.modifier.js#7D2D56
storage.modifier.jsx#8F3463
storage.modifier.ts#8F3463
storage.modifier.tsx#9B396C
storage.type#772B52
string.template#8F3463
support.constant#83305B
support.function.dom.js#89325f
support.function.dom.jsx#89325f
support.function.dom.ts#89325f
support.function.dom.tsx#89325f
support.variable.property.js#89325f
support.variable.property.jsx#8F3463
support.variable.property.ts#89325f
support.variable.property.tsx#89325f
variable.language.constructor#89325funderline
variable.language.this#89325f
meta.tag.js#8F3463
meta.tag.jsx#83305B
meta.tag.ts#89325f
meta.tag.tsx#89325f
support.type.object.module.js#89325f
support.type.object.module.jsx#89325f
support.type.object.module.ts#89325f
support.type.object.module.tsx#772B52
punctuation.definition.parameters.begin.js#8F3463
punctuation.definition.parameters.begin.jsx#7D2D56
punctuation.definition.parameters.begin.ts#8F3463
punctuation.definition.parameters.begin.tsx#89325f
punctuation.definition.parameters.end.js#953668
punctuation.definition.parameters.end.jsx#89325f
punctuation.definition.parameters.end.ts#83305B
punctuation.definition.parameters.end.tsx#89325f
punctuation.definition.parameters.end.js#83305B
punctuation.definition.parameters.end.jsx#83305B
punctuation.definition.parameters.end.ts#7D2D56
punctuation.definition.parameters.end.tsx#89325f
markup.quote#953668
entity.other.attribute-name.js#89325f
entity.other.attribute-name.jsx#89325f
entity.other.attribute-name.ts#7D2D56
entity.other.attribute-name.tsx#89325f
comment#b56e30
constant.language#b56e30
constant.other#b56e30
keyword.control.flow.js#89325f
keyword.control.flow.jsx#89325f
keyword.control.flow.ts#9D5F2A
keyword.control.flow.tsx#b56e30
keyword.control.module.js#9D5F2A
keyword.control.module.jsx#b56e30
keyword.control.module.ts#b56e30
keyword.control.module.tsx#b56e30
keyword.operator.accessor#A5642C
markup.italic#b56e30
meta.import.js#b56e30
meta.import.jsx#AD692E
meta.import.ts#b56e30
meta.import.tsx#b56e30
meta.object-literal.key.js#b56e30
meta.object-literal.key.jsx#CB7D39
meta.object-literal.key.ts#b56e30
meta.object-literal.key.tsx#b56e30
meta.paragraph.markdown#BD7332
punctuation.definition.block.js#b56e30
punctuation.definition.block.jsx#BD7332
punctuation.definition.block.ts#BD7332
punctuation.definition.block.tsx#b56e30
punctuation.separator.parameter.js#b56e30
punctuation.separator.parameter.jsx#b56e30
punctuation.separator.parameter.ts#b56e30
punctuation.separator.parameter.tsx#BD7332
string.quoted.single.js#A5642C
string.quoted.single.jsx#BD7332
string.quoted.single.ts#C57834
string.quoted.single.tsx#AD692E
string.quoted.single.json#AD692E
support.class.promise.js#b56e30
support.class.promise.jsx#b56e30
support.class.promise.ts#b56e30
support.class.promise.tsx#BD7332
support.function#b56e30
keyword.control.import.js#C57834
keyword.control.import.jsx#b56e30
keyword.control.import.ts#A5642C
keyword.control.import.tsx#b56e30
keyword.control.from.js#AD692E
keyword.control.from.jsx#AD692E
keyword.control.from.ts#b56e30
keyword.control.from.tsx#BD7332
keyword.control.export.js#b56e30
keyword.control.export.jsx#b56e30
keyword.control.export.ts#b56e30
keyword.control.export.tsx#b56e30
keyword.control.default.js#b56e30
keyword.control.default.jsx#9D5F2A
keyword.control.default.ts#b56e30
keyword.control.default.tsx#b56e30
entity.name.class#AD692Eunderline
support.function.console.js#9D5F2A
support.function.console.jsx#b56e30
support.function.console.ts#C57834
support.function.console.tsx#BD7332
variable.language#b56e30
invalid#A5642Cunderline
support.type.object.console.js#b56e30
support.type.object.console.jsx#b56e30
support.type.object.console.ts#BD7332
support.type.object.console.tsx#b56e30
variable.parameter#b56e30
comment.block.documentation#CB7D39
comment.line.double-slash#AD692E
constant.language.null.js#376F72
constant.language.null.jsx#356a6d
constant.language.null.ts#356a6d
constant.language.null.tsx#336568
entity.name.type#336568
meta.parameters.js#336568
meta.parameters.jsx#356a6d
meta.parameters.ts#356a6d
meta.parameters.tsx#356a6d
variable.other.class.js#356a6d
variable.other.class.jsx#356a6d
variable.other.class.ts#336568
variable.other.class.tsx#336568
constant.other.object.key.js#356a6d
constant.other.object.key.jsx#356a6d
constant.other.object.key.ts#336568
constant.other.object.key.tsx#376F72
entity.other.inherited-class#376F72
markup.heading.markdown#3C787C
meta.brace.round.js#356a6d
meta.brace.round.jsx#376F72
meta.brace.round.ts#356a6d
meta.brace.round.tsx#306063
entity.name.function#BD7332underline
meta.tag.attributes.js#306063
meta.tag.attributes.jsx#356a6d
meta.tag.attributes.ts#336568
meta.tag.attributes.tsx#356a6d
punctuation.accessor.js#356a6d
punctuation.accessor.jsx#306063
punctuation.accessor.ts#306063
punctuation.accessor.tsx#2E5C5E
punctuation.separator.comma.js#336568
punctuation.separator.comma.jsx#356a6d
punctuation.separator.comma.ts#356a6d
punctuation.separator.comma.tsx#356a6d
source.js#336568
source.jsx#356a6d
source.ts#2E5C5E
source.tsx#2E5C5E
variable.other.property.js#356a6d
variable.other.property.jsx#3C787C
variable.other.property.ts#356a6d
variable.other.property.tsx#356a6d
storage.modifier.async.js#356a6d
storage.modifier.async.jsx#356a6d
storage.modifier.async.ts#336568
storage.modifier.async.tsx#336568
support.class.builtin.js#356a6d
support.class.builtin.jsx#356a6d
support.class.builtin.ts#336568
support.class.builtin.tsx#356a6d
support.type.primitive.js#376F72
support.type.primitive.jsx#2E5C5E
support.type.primitive.ts#356a6d
support.type.primitive.tsx#306063
support.variable.property.js#356a6d
support.variable.property.jsx#336568
support.variable.property.ts#376F72
support.variable.property.tsx#356a6d
variable#306063
variable.other.object.js#306063
variable.other.object.jsx#356a6d
variable.other.object.ts#336568
variable.other.object.tsx#356a6d
variable.other.readwrite#336568
variable.other.readwrite.js#306063
variable.other.readwrite.jsx#356a6d
variable.other.readwrite.ts#356a6d
variable.other.readwrite.tsx#356a6d
Niketa Theme Light Old by selfrefactor - VS Code Theme