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.activeBorder#AD7A68
  • activityBar.background#1E232D
  • activityBar.foreground#ECEFF4
  • activityBar.inactiveForeground#60728A
  • activityBarBadge.background#AD7A68
  • activityBarBadge.foreground#242933
  • badge.background#AD7A68
  • badge.foreground#242933
  • button.background#AD7A68
  • button.foreground#242933
  • button.hoverBackground#C08D76
  • button.secondaryBackground#333B4B
  • button.secondaryForeground#ECEFF4
  • checkbox.background#333B4B
  • checkbox.border#3C4454
  • descriptionForeground#D8DEE9
  • dropdown.background#242933
  • dropdown.border#3C4454
  • editor.background#242933
  • editor.findMatchBackground#AD7A68B3
  • editor.findMatchHighlightBackground#CBB27E66
  • editor.foreground#ECEFF4
  • editor.inactiveSelectionBackground#AD7A6833
  • editor.lineHighlightBackground#F7F7F708
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#AD7A6840
  • editor.wordHighlightBackground#58667F50
  • editor.wordHighlightStrongBackground#58667FF0
  • editorBracketHighlight.foreground1#AD7A68
  • editorBracketHighlight.foreground2#A3BE8C
  • editorBracketHighlight.foreground3#81A1C1
  • editorBracketHighlight.foreground4#B48EAD
  • editorBracketHighlight.foreground5#CBB27E
  • editorBracketHighlight.foreground6#D8DEE9
  • editorBracketMatch.background#333B4B
  • editorBracketMatch.border#D8DEE9
  • editorCursor.foreground#ECEFF4
  • editorError.foreground#F48771
  • editorGroupHeader.border#1A2028
  • editorGroupHeader.noTabsBackground#1A2028
  • editorGroupHeader.tabsBackground#1A2028
  • editorGutter.addedBackground#74C991
  • editorGutter.background#242933
  • editorGutter.deletedBackground#E77B84
  • editorGutter.modifiedBackground#C5AA7D
  • editorHint.foreground#969696
  • editorHoverWidget.background#181D25
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorInfo.foreground#75BEFF
  • editorInlayHint.background#00000000
  • editorInlayHint.foreground#60728A80
  • editorLineNumber.activeForeground#AD7A68
  • editorLineNumber.foreground#60728A
  • editorRuler.foreground#3C4454
  • editorSuggestWidget.background#1E232D
  • editorSuggestWidget.border#3C4454
  • editorSuggestWidget.foreground#ECEFF4
  • editorSuggestWidget.highlightForeground#81A1C1
  • editorSuggestWidget.selectedBackground#333B4B
  • editorSuggestWidget.selectedForeground#ECEFF4
  • editorWarning.foreground#CBB27E
  • editorWidget.background#242933
  • focusBorder#D8DEE9
  • input.background#333B4B
  • input.border#3C4454
  • input.foreground#ECEFF4
  • input.placeholderForeground#8C8C8CF0
  • list.activeSelectionBackground#333B4B
  • list.activeSelectionForeground#ECEFF4
  • list.focusBackground#333B4B
  • list.focusForeground#ECEFF4
  • list.highlightForeground#81A1C1
  • list.hoverBackground#2D3341
  • list.hoverForeground#ECEFF4
  • list.inactiveSelectionBackground#2D3341
  • list.inactiveSelectionForeground#ECEFF4
  • menu.background#242933
  • menu.foreground#ECEFF4
  • menu.selectionBackground#333B4B
  • menu.selectionForeground#ECEFF4
  • panel.background#1E232D
  • panel.border#3C4454
  • peekView.border#3C4454
  • peekViewEditor.background#242933
  • peekViewResult.background#1E232D
  • pickerGroup.border#3C4454
  • pickerGroup.foreground#D8DEE9
  • progressBar.background#AD7A68
  • scrollbarSlider.activeBackground#646464B3
  • scrollbarSlider.background#353D4C
  • scrollbarSlider.hoverBackground#646464B3
  • sideBar.background#151A21
  • sideBar.border#3C4454
  • sideBar.foreground#ECEFF4
  • sideBarSectionHeader.background#1D232D
  • sideBarSectionHeader.foreground#ECEFF4
  • statusBar.background#242933
  • statusBar.debuggingBackground#F48771
  • statusBar.debuggingForeground#242933
  • statusBar.foreground#D8DEE9
  • statusBarItem.hoverBackground#2D3341
  • statusBarItem.remoteBackground#333B4B
  • statusBarItem.remoteForeground#ECEFF4
  • tab.activeBackground#242933
  • tab.activeBorderTop#AD7A68
  • tab.activeForeground#ECEFF4
  • tab.border#1E232D
  • tab.hoverBackground#2D3341
  • tab.inactiveBackground#1E232D
  • tab.unfocusedActiveBackground#242933
  • terminal.ansiBlack#2E3440
  • terminal.ansiBlue#81A1C1
  • terminal.ansiBrightBlack#4C566A
  • terminal.ansiBrightBlue#8FB3D9
  • terminal.ansiBrightCyan#97D5E3
  • terminal.ansiBrightGreen#B1D196
  • terminal.ansiBrightMagenta#C8A9C2
  • terminal.ansiBrightRed#D06F79
  • terminal.ansiBrightWhite#F7F9FC
  • terminal.ansiBrightYellow#D8C18C
  • terminal.ansiCyan#81A1C1
  • terminal.ansiGreen#A3BE8C
  • terminal.ansiMagenta#B48EAD
  • terminal.ansiRed#F48771
  • terminal.ansiWhite#ECEFF4
  • terminal.ansiYellow#CBB27E
  • terminal.background#141920
  • terminal.border#3C4454
  • terminal.foreground#ECEFF4
  • terminal.selectionBackground#58667F50
  • terminalCommandDecoration.defaultBackground#81A1C1
  • terminalCommandDecoration.errorBackground#F48771
  • terminalCommandDecoration.successBackground#A3BE8C
  • terminalCursor.background#141920
  • terminalCursor.foreground#ECEFF4
  • textLink.foreground#81A1C1
  • titleBar.activeBackground#1E232D
  • titleBar.activeForeground#ECEFF4
  • titleBar.inactiveBackground#1E232D
  • titleBar.inactiveForeground#D8DEE9

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.type.property-name.json.comments, support.type.property-name.json#81A1C1
keyword, storage, keyword.control#C08070
meta.use.rust, source.rust#A394A0
entity.name.function.macro.rust#D29B7B
entity.name.type, support.type, storage.type#C8AD7A
entity.name.namespace.rust, entity.name.module.rust#A394A0
support.class.php#C8AD7A
markup.heading, markup.heading.markdown#C08070bold
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.vue, entity.other.attribute-name.blade, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, meta.attribute, meta.attribute.html, meta.attribute.xml, meta.attribute.vue, meta.attribute.blade, meta.attribute.jsx, meta.attribute.tsx#C8AD7A
support.type.property-name.json.comments, support.type.property-name.json#81A1C1
keyword, storage, keyword.control#C08070
meta.use.rust, source.rust#A394A0
entity.name.function.macro.rust#D29B7B
entity.name.type, support.type, storage.type#C8AD7A
entity.name.namespace.rust, entity.name.module.rust#A394A0
support.class.php#C8AD7A
markup.heading, markup.heading.markdown#C08070bold
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.vue, entity.other.attribute-name.blade, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, meta.attribute, meta.attribute.html, meta.attribute.xml, meta.attribute.vue, meta.attribute.blade, meta.attribute.jsx, meta.attribute.tsx#C8AD7A
comment, punctuation.definition.comment#608F7Aitalic
comment.line.documentation.rust#A3A8C0italic
support.type.property-name.json.comments, support.type.property-name.json#81A1C1
keyword, storage, keyword.control#AD7A68
keyword.language.region.gdscript#969696
string, string.quoted, string.regexp#A3BE8C
constant, constant.numeric, constant.language, support.constant, support.constant.core.php, support.constant.php#B48EAD
text.html.vue, text.html.derivative, text.vue#ECEFF4
entity.name.function, support.function, meta.function-call#81A1C1
meta.use.rust, source.rust#A394A0
entity.name.function.macro.rust#D29B7B
meta.interpolation.rust#C0C8D8
entity.name.type, support.type, storage.type#CBB27E
entity.name.namespace.rust, entity.name.module.rust#A394A0
meta.function.call.rust entity.name.namespace.rust#CBB27E
support.class.php#CBB27E
support.other.namespace.php, entity.other.inherited-class.php#81A1C1
variable, variable.parameter#C0C8D8
variable.language.this, variable.language.this.php, variable.language.self#B48EAD
punctuation, punctuation.definition#B48EAD
markup.heading, markup.heading.markdown#AD7A68bold
entity.name.tag, meta.tag, entity.name.tag.html, entity.name.tag.html.vue, entity.name.tag.vue, entity.name.tag.blade, entity.name.tag.jsx, entity.name.tag.tsx, meta.tag.structure, meta.tag.inline, meta.tag.block, entity.name.type.class.vue, entity.name.type.class.jsx, entity.name.type.class.tsx#81A1C1
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.vue, entity.other.attribute-name.blade, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, meta.attribute, meta.attribute.html, meta.attribute.xml, meta.attribute.vue, meta.attribute.blade, meta.attribute.jsx, meta.attribute.tsx#CBB27E
entity.name.function.decorator, meta.decorator, punctuation.decorator, storage.type.annotation, storage.type.annotation.java, entity.name.type.annotation, entity.name.type.annotation.java, meta.annotation, meta.annotation.java#B48EAD
invalid, invalid.illegal#F48771