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#ede8e1
  • 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#ede8e1
  • 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#A0595E
source.css#A0595E
source.go#A0595E
constant.character#083154
constant.language.boolean#083154
entity.name.tag#083154underline
keyword#08355C
markup.italic#083358
entity.name.function.method#08355C
string.quoted.single.js#08355C
string.quoted.single.jsx#083358
string.quoted.single.ts#083154
string.quoted.single.tsx#083154
support.type.property-name.json#083358
punctuation.accessor.js#083358
punctuation.accessor.jsx#093860
punctuation.accessor.ts#083358
punctuation.accessor.tsx#072C4C
punctuation.separator.key-value.js#083154
punctuation.separator.key-value.jsx#072C4C
punctuation.separator.key-value.ts#083358
punctuation.separator.key-value.tsx#083358
constant.numeric#083358
meta.brace.square.js#072C4C
meta.brace.square.jsx#083358
meta.brace.square.ts#093860
meta.brace.square.tsx#083358
meta.var.expr.js#072C4C
meta.var.expr.jsx#083358
meta.var.expr.ts#083358
meta.var.expr.tsx#072C4C
storage.modifier.js#072E50
storage.modifier.jsx#08355C
storage.modifier.ts#08355C
storage.modifier.tsx#093A64
storage.type#072C4C
string.template#08355C
support.constant#083154
support.function.dom.js#083358
support.function.dom.jsx#083358
support.function.dom.ts#083358
support.function.dom.tsx#083358
support.variable.property.js#083358
support.variable.property.jsx#08355C
support.variable.property.ts#083358
support.variable.property.tsx#083358
variable.language.constructor#083358underline
variable.language.this#083358
meta.tag.js#08355C
meta.tag.jsx#083154
meta.tag.ts#083358
meta.tag.tsx#083358
support.type.object.module.js#083358
support.type.object.module.jsx#083358
support.type.object.module.ts#083358
support.type.object.module.tsx#072C4C
punctuation.definition.parameters.begin.js#08355C
punctuation.definition.parameters.begin.jsx#072E50
punctuation.definition.parameters.begin.ts#08355C
punctuation.definition.parameters.begin.tsx#083358
punctuation.definition.parameters.end.js#093860
punctuation.definition.parameters.end.jsx#083358
punctuation.definition.parameters.end.ts#083154
punctuation.definition.parameters.end.tsx#083358
punctuation.definition.parameters.end.js#083154
punctuation.definition.parameters.end.jsx#083154
punctuation.definition.parameters.end.ts#072E50
punctuation.definition.parameters.end.tsx#083358
markup.quote#093860
entity.other.attribute-name.js#083358
entity.other.attribute-name.jsx#083358
entity.other.attribute-name.ts#072E50
entity.other.attribute-name.tsx#083358
comment#0d8a81
constant.language#0d8a81
constant.other#0d8a81
keyword.control.flow.js#083358
keyword.control.flow.jsx#083358
keyword.control.flow.ts#0B7770
keyword.control.flow.tsx#0d8a81
keyword.control.module.js#0B7770
keyword.control.module.jsx#0d8a81
keyword.control.module.ts#0d8a81
keyword.control.module.tsx#0d8a81
keyword.operator.accessor#0C7E75
markup.italic#0d8a81
meta.import.js#0d8a81
meta.import.jsx#0C847B
meta.import.ts#0d8a81
meta.import.tsx#0d8a81
meta.object-literal.key.js#0d8a81
meta.object-literal.key.jsx#0F9D92
meta.object-literal.key.ts#0d8a81
meta.object-literal.key.tsx#0d8a81
meta.paragraph.markdown#0E9087
punctuation.definition.block.js#0d8a81
punctuation.definition.block.jsx#0E9087
punctuation.definition.block.ts#0E9087
punctuation.definition.block.tsx#0d8a81
punctuation.separator.parameter.js#0d8a81
punctuation.separator.parameter.jsx#0d8a81
punctuation.separator.parameter.ts#0d8a81
punctuation.separator.parameter.tsx#0E9087
string.quoted.single.js#0C7E75
string.quoted.single.jsx#0E9087
string.quoted.single.ts#0E968D
string.quoted.single.tsx#0C847B
string.quoted.single.json#0C847B
support.class.promise.js#0d8a81
support.class.promise.jsx#0d8a81
support.class.promise.ts#0d8a81
support.class.promise.tsx#0E9087
support.function#0d8a81
keyword.control.import.js#0E968D
keyword.control.import.jsx#0d8a81
keyword.control.import.ts#0C7E75
keyword.control.import.tsx#0d8a81
keyword.control.from.js#0C847B
keyword.control.from.jsx#0C847B
keyword.control.from.ts#0d8a81
keyword.control.from.tsx#0E9087
keyword.control.export.js#0d8a81
keyword.control.export.jsx#0d8a81
keyword.control.export.ts#0d8a81
keyword.control.export.tsx#0d8a81
keyword.control.default.js#0d8a81
keyword.control.default.jsx#0B7770
keyword.control.default.ts#0d8a81
keyword.control.default.tsx#0d8a81
entity.name.class#0C847Bunderline
support.function.console.js#0B7770
support.function.console.jsx#0d8a81
support.function.console.ts#0E968D
support.function.console.tsx#0E9087
variable.language#0d8a81
invalid#0C7E75underline
support.type.object.console.js#0d8a81
support.type.object.console.jsx#0d8a81
support.type.object.console.ts#0E9087
support.type.object.console.tsx#0d8a81
variable.parameter#0d8a81
comment.block.documentation#0F9D92
comment.line.double-slash#0C847B
constant.language.null.js#A65E64
constant.language.null.jsx#A0595E
constant.language.null.ts#A0595E
constant.language.null.tsx#99555A
entity.name.type#99555A
meta.parameters.js#99555A
meta.parameters.jsx#A0595E
meta.parameters.ts#A0595E
meta.parameters.tsx#A0595E
variable.other.class.js#A0595E
variable.other.class.jsx#A0595E
variable.other.class.ts#99555A
variable.other.class.tsx#99555A
constant.other.object.key.js#A0595E
constant.other.object.key.jsx#A0595E
constant.other.object.key.ts#99555A
constant.other.object.key.tsx#A65E64
entity.other.inherited-class#A65E64
markup.heading.markdown#AE6D71
meta.brace.round.js#A0595E
meta.brace.round.jsx#A65E64
meta.brace.round.ts#A0595E
meta.brace.round.tsx#925156
entity.name.function#0E9087underline
meta.tag.attributes.js#925156
meta.tag.attributes.jsx#A0595E
meta.tag.attributes.ts#99555A
meta.tag.attributes.tsx#A0595E
punctuation.accessor.js#A0595E
punctuation.accessor.jsx#925156
punctuation.accessor.ts#925156
punctuation.accessor.tsx#8A4D51
punctuation.separator.comma.js#99555A
punctuation.separator.comma.jsx#A0595E
punctuation.separator.comma.ts#A0595E
punctuation.separator.comma.tsx#A0595E
source.js#99555A
source.jsx#A0595E
source.ts#8A4D51
source.tsx#8A4D51
variable.other.property.js#A0595E
variable.other.property.jsx#AE6D71
variable.other.property.ts#A0595E
variable.other.property.tsx#A0595E
storage.modifier.async.js#A0595E
storage.modifier.async.jsx#A0595E
storage.modifier.async.ts#99555A
storage.modifier.async.tsx#99555A
support.class.builtin.js#A0595E
support.class.builtin.jsx#A0595E
support.class.builtin.ts#99555A
support.class.builtin.tsx#A0595E
support.type.primitive.js#A65E64
support.type.primitive.jsx#8A4D51
support.type.primitive.ts#A0595E
support.type.primitive.tsx#925156
support.variable.property.js#A0595E
support.variable.property.jsx#99555A
support.variable.property.ts#A65E64
support.variable.property.tsx#A0595E
variable#925156
variable.other.object.js#925156
variable.other.object.jsx#A0595E
variable.other.object.ts#99555A
variable.other.object.tsx#A0595E
variable.other.readwrite#99555A
variable.other.readwrite.js#925156
variable.other.readwrite.jsx#A0595E
variable.other.readwrite.ts#A0595E
variable.other.readwrite.tsx#A0595E
Niketa Theme Light Old by selfrefactor - VS Code Theme