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#0c0d10ff
  • activityBar.border#1b1e25ff
  • activityBar.foreground#eeffffff
  • activityBar.inactiveForeground#aab4c8ff
  • button.background#3b414eff
  • button.foreground#eeffffff
  • dropdown.background#0a1114ff
  • dropdown.border#1b1e25ff
  • editor.background#0f1013ff
  • editor.foreground#cdd3deff
  • editor.lineHighlightBackground#2a2f38bf
  • editor.selectionBackground#82aaff66
  • editorCursor.foreground#82aaffff
  • editorGroup.border#1b1e25ff
  • editorGroupHeader.noTabsBackground#0f1013ff
  • editorGroupHeader.tabsBackground#0c0d10ff
  • editorGroupHeader.tabsBorder#1b1e25ff
  • editorGutter.background#0f1013ff
  • editorLineNumber.activeForeground#eeffffff
  • editorLineNumber.foreground#7492a0ff
  • editorWidget.background#0e1518ff
  • editorWidget.border#1b1e25ff
  • focusBorder#26406bff
  • input.background#0a1114ff
  • input.border#1b1e25ff
  • input.foreground#eeffffff
  • list.activeSelectionBackground#3b414eff
  • list.activeSelectionForeground#eeffffff
  • list.focusBackground#232933ff
  • list.hoverBackground#232933ff
  • list.hoverForeground#eeffffff
  • list.inactiveSelectionBackground#232933ff
  • menu.background#0e1518ff
  • menu.border#1b1e25ff
  • menu.foreground#eeffffff
  • menu.separatorBackground#1b1e25ff
  • panel.background#0f1013ff
  • panel.border#1b1e25ff
  • panelTitle.activeForeground#eeffffff
  • panelTitle.inactiveForeground#aab4c8ff
  • quickInput.background#0e1518ff
  • quickInput.border#1b1e25ff
  • quickInput.foreground#eeffffff
  • quickInputList.focusBackground#3b414eff
  • quickInputList.focusForeground#eeffffff
  • quickInputTitle.background#0a1114ff
  • scrollbarSlider.background#7173784c
  • scrollbarSlider.hoverBackground#2b3038ff
  • sideBar.background#0f1013ff
  • sideBar.border#1b1e25ff
  • sideBarSectionHeader.background#0f1013ff
  • sideBarSectionHeader.border#1b1e25ff
  • sideBarSectionHeader.foreground#aab4c8ff
  • sideBarTitle.foreground#eeffffff
  • statusBar.background#0f1013ff
  • statusBar.border#1b1e25ff
  • statusBar.debuggingForeground#aab4c8ff
  • statusBar.foreground#eeffffff
  • tab.activeBackground#0f1013ff
  • tab.activeBorder#26406bff
  • tab.activeForeground#eeffffff
  • tab.border#1b1e25ff
  • tab.inactiveBackground#0f1013ff
  • tab.inactiveForeground#aab4c8ff
  • terminal.ansiBlack#546e7a
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#7492a0
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#89ddff
  • terminal.ansiBrightGreen#c3e88d
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#ff5370
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcb6b
  • terminal.ansiCyan#89ddff
  • terminal.ansiGreen#c3e88d
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#ff5370
  • terminal.ansiWhite#eeffff
  • terminal.ansiYellow#ffcb6b
  • terminal.background#0f1013ff
  • terminal.foreground#eeffffff
  • titleBar.activeBackground#0f1013ff
  • titleBar.activeForeground#eeffffff
  • titleBar.border#1b1e25ff
  • titleBar.inactiveBackground#0c0d10ff
  • titleBar.inactiveForeground#aab4c8ff
  • window.activeBorder#1b1e25ff
  • window.inactiveBorder#1b1e25ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#cdd3deff
comment, punctuation.definition.comment#7492a0ff
comment.block.documentation#8ca4b0ff
keyword, storage.type, storage.modifier, keyword.control#c792eaff
string, punctuation.definition.string#c3e88dff
constant.character.escape#8ca4b0ff
string.regexp#f78c6cff
string.special, constant.other.placeholder#f78c6cff
constant, support.constant, variable.language#ffcb6bff
constant.numeric#f78c6cff
constant.language.boolean#f78c6cff
variable, meta.definition.variable#eeffffff
variable.language.this, variable.language.self, variable.predefined#f78c6cff
entity.name.function, support.function, meta.function-call#82aaffff
entity.name.function.constructor, meta.constructor#82aaffff
entity.name.type, support.type, support.class, storage.type#89ddffff
variable.other.property, meta.object-literal.key, support.type.property-name#ff5370ff
entity.name.tag, meta.tag.sgml#82aaffff
entity.other.attribute-name#ffcb6bff
keyword.operator#89ddffff
punctuation#cdd3deff
meta.brace, punctuation.section, punctuation.separator, punctuation.terminator#b0bfd0ff
meta.preprocessor, keyword.control.directive#eeffffff
Atomic-Dark Theme by thekodeking - VS Code Theme