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#121A2C
  • activityBar.border#121A2C
  • activityBar.foreground#7DCFFF
  • activityBar.inactiveForeground#2A3A55
  • activityBarBadge.background#7DCFFF
  • activityBarBadge.foreground#0B1220
  • breadcrumb.activeSelectionForeground#A0E9FF
  • breadcrumb.background#0B1220
  • breadcrumb.foreground#2A3A55
  • button.background#7DCFFF
  • button.foreground#0B1220
  • button.hoverBackground#A0E9FF
  • dropdown.background#121A2C
  • dropdown.border#7DCFFF30
  • editor.background#0B1220
  • editor.foreground#C8D8F0
  • editor.inactiveSelectionBackground#7DCFFF14
  • editor.lineHighlightBackground#1C274080
  • editor.lineHighlightBorder#7DCFFF25
  • editor.selectionBackground#7DCFFF28
  • editor.wordHighlightBackground#7DCFFF1A
  • editor.wordHighlightStrongBackground#7DCFFF30
  • editorBracketMatch.background#7DCFFF22
  • editorBracketMatch.border#7DCFFF60
  • editorCursor.foreground#7DCFFF
  • editorGutter.background#0B1220
  • editorHoverWidget.background#0E1624
  • editorHoverWidget.border#7DCFFF30
  • editorIndentGuide.activeBackground1#7DCFFF35
  • editorIndentGuide.background1#1C2740
  • editorLineNumber.activeForeground#A0E9FF
  • editorLineNumber.foreground#2A3A55
  • editorOverviewRuler.border#121A2C
  • editorSuggestWidget.background#0E1624
  • editorSuggestWidget.border#7DCFFF30
  • editorSuggestWidget.highlightForeground#A0E9FF
  • editorSuggestWidget.selectedBackground#7DCFFF18
  • editorWidget.background#121A2C
  • focusBorder#7DCFFF50
  • inputBox.background#121A2C
  • inputBox.border#7DCFFF30
  • inputBox.foreground#C8D8F0
  • list.activeSelectionBackground#7DCFFF1A
  • list.activeSelectionForeground#A0E9FF
  • list.focusBackground#7DCFFF1A
  • list.highlightForeground#7DCFFF
  • list.hoverBackground#7DCFFF0E
  • panel.background#0B1220
  • panel.border#121A2C
  • panelTitle.activeBorder#7DCFFF
  • panelTitle.activeForeground#A0E9FF
  • scrollbarSlider.activeBackground#7DCFFF38
  • scrollbarSlider.background#7DCFFF12
  • scrollbarSlider.hoverBackground#7DCFFF22
  • selection.background#7DCFFF30
  • sideBar.background#121A2C
  • sideBar.foreground#6898CC
  • sideBarSectionHeader.background#0B1220
  • sideBarSectionHeader.border#7DCFFF20
  • sideBarSectionHeader.foreground#A0E9FF
  • statusBar.background#121A2C
  • statusBar.debuggingBackground#7DCFFF
  • statusBar.debuggingForeground#0B1220
  • statusBar.foreground#7DCFFF
  • statusBarItem.hoverBackground#7DCFFF22
  • tab.activeBackground#121A2C
  • tab.activeBorder#7DCFFF
  • tab.activeBorderTop#7DCFFF
  • tab.activeForeground#A0E9FF
  • tab.border#121A2C
  • tab.inactiveBackground#0B1220
  • tab.inactiveForeground#2A3A55
  • terminal.ansiBlue#5599CC
  • terminal.ansiBrightBlue#7AAAE8
  • terminal.ansiBrightCyan#A0E9FF
  • terminal.ansiCyan#7DCFFF
  • terminal.background#0B1220
  • terminal.foreground#C8D8F0
  • titleBar.activeBackground#0B1220
  • titleBar.activeForeground#C8D8F0
  • titleBar.inactiveBackground#080D18

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A9955italic
string, string.quoted, string.template#CE9178—
keyword, keyword.control, keyword.operator.new, keyword.other.important#569CD6—
keyword.operator, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.logical#D4D4D4—
storage.type, storage.modifier#569CD6—
entity.name.function, meta.function-call, support.function#DCDCAA—
entity.name.type, entity.name.class, entity.name.namespace, support.class#4EC9B0—
entity.name.tag, meta.tag#569CD6—
entity.other.attribute-name#9CDCFE—
variable, variable.other.readwrite, meta.object-literal.key#9CDCFE—
variable.other.constant, variable.other.enummember#4FC1FF—
variable.parameter#9CDCFE—
constant.numeric, constant.language, constant.character#B5CEA8—
constant.language.boolean#569CD6—
support.type.property-name.css, support.type.vendored.property-name.css#9CDCFE—
support.constant.property-value.css, constant.numeric.css, keyword.other.unit.css#CE9178—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#D7BA7D—
punctuation.definition.tag, punctuation.section.embedded#569CD6—
markup.heading#569CD6bold
markup.bold—bold
markup.italic—italic
markup.underline.link#4EC9B0—
markup.inserted#B5CEA8—
markup.deleted#CE9178—
invalid#F44747—
invalid.deprecated#D7BA7D—
CodeAura – Animated Theme Engine by CodeFX - VS Code Theme