Skip to main content
Coding Theme

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.lineHighlightBackground#b7bcbf25
  • editor.lineHighlightBorderx#9a9b9411
  • editor.selectionBackground#b7bcbf55
  • editor.selectionHighlightBackground#b7bcbf88
  • editor.wordHighlightBackground#b7bcbfaa
  • editor.wordHighlightStrongBackground#b7bcbfdd
  • editorBracketMatch.background#B1365Bf3
  • editorBracketMatch.border#9F7E6Bf3
  • editorCursor.foreground#544
  • editorGroupHeader.tabsBackground#b7bcbf
  • editorLineNumber.foreground#2a3343a9
  • editorLink.activeForeground#034694
  • 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#999a9d
  • list.hoverForeground#f5f4e8
  • list.inactiveSelectionBackground#eae3cd55
  • list.inactiveSelectionForeground#30322e
  • 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
CircusWhisky by selfrefactor - VS Code Theme