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.

  • actionBar.toggledBackground#383a49
  • activityBar.background#272a35
  • activityBar.border#404040
  • activityBarBadge.background#526cfe
  • button.background#526cfe
  • button.hoverBackground#6190e8
  • checkbox.border#6B6B6B
  • debugToolBar.background#1e2129
  • dropdown.background#1e2129
  • editor.background#272a35
  • editor.foreground#b6b8c2
  • editorBracketHighlight.foreground1#90929a
  • editorBracketHighlight.foreground2#90929a
  • editorBracketHighlight.foreground3#90929a
  • editorBracketHighlight.foreground4#90929a
  • editorBracketHighlight.foreground5#90929a
  • editorBracketHighlight.foreground6#90929a
  • editorGroupHeader.tabsBackground#1e2129
  • editorHoverWidget.background#1e2129
  • editorHoverWidget.highlightForeground#00bda4
  • editorIndentGuide.activeBackground1#707070
  • editorIndentGuide.background1#404040
  • editorSuggestWidget.background#1e2129
  • editorSuggestWidget.focusHighlightForeground#526cfe
  • editorSuggestWidget.highlightForeground#00bda4
  • editorWidget.background#1e2129
  • focusBorder#526cfe
  • input.background#1e2129
  • input.placeholderForeground#A6A6A6
  • list.activeSelectionBackground#00000000
  • list.activeSelectionForeground#526cfe
  • list.activeSelectionIconForeground#526cfe
  • list.dropBackground#383B3D
  • list.hoverBackground#00000000
  • list.hoverForeground#00bda4
  • list.inactiveSelectionBackground#00000000
  • list.inactiveSelectionForeground#526cfe
  • list.inactiveSelectionIconForeground#526cfe
  • menu.background#1e2129
  • menu.border#454545
  • menu.foreground#CCCCCC
  • menu.selectionBackground#00000000
  • menu.selectionForeground#00bda4
  • menu.separatorBackground#454545
  • ports.iconRunningProcessForeground#369432
  • sideBar.background#1e2129
  • sideBar.border#404040
  • sideBarSectionHeader.background#0000
  • sideBarSectionHeader.border#ccc3
  • sideBarTitle.foreground#BBBBBB
  • statusBar.background#272a35
  • statusBar.border#404040
  • statusBar.debuggingBackground#272a35
  • statusBar.debuggingBorder#7c4dff
  • statusBar.noFolderBackground#272a35
  • statusBar.noFolderBorder#404040
  • statusBarItem.remoteBackground#16825D
  • statusBarItem.remoteForeground#FFF
  • tab.activeBackground#272a35
  • tab.activeBorderTop#526cfe
  • tab.activeForeground#526cfe
  • tab.border#404040
  • tab.hoverForeground#00bda4
  • tab.inactiveBackground#1e2129
  • tab.inactiveForeground#9d9d9d
  • tab.lastPinnedBorder#ccc3
  • tab.selectedBackground#222222
  • tab.selectedForeground#ffffffa0
  • terminal.inactiveSelectionBackground#3A3D41
  • textLink.activeForeground#00bda4
  • textLink.foreground#526cfe
  • titleBar.activeBackground#272a35
  • titleBar.border#404040
  • widget.border#303031

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.increment, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition.begin.bracket, punctuation.definition.end.bracket, entity.name.operator, storage.modifier.reference, storage.modifier.pointer, punctuation.definition.capture.begin.lambda, punctuation.definition.capture.end.lambda, punctuation.definition.parameters.begin.lambda, punctuation.definition.parameters.end.lambda, punctuation.definition.function.pointer.dereference, punctuation.definition.lambda.return-type#90929a
constant.language, meta.embedded.math.markdown#9383e2
constant.language.nullptr#6791e0
constant.numeric, constant.character, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent, keyword.other.unit.hexadecimal, keyword.other.unit.exponent, keyword.other.unit.suffix#e6695b
entity.name.scope-resolution.cpp, entity.name.type.parameter, meta.body.class, meta.body.function, meta.body.struct, meta.template.call, meta.qualified_type, entity.name.function.definition.special.constructor, entity.name.function.definition.special.member.destructor, entity.name.function.call, variable#b6b8c2
entity.name.function.definition, entity.name.type.struct, entity.name.type.template, meta.using-namespace, meta.head.namespace, meta.block.class, entity.name.scope-resolution.function.definition, punctuation.separator.scope-resolution.function.definition, function#c973d9
invalid#f44747
storage, storage.type, storage.modifier#6791e0
string, markup.inline.raw.string.markdown, punctuation.definition.math.begin.markdown, punctuation.definition.math.end.markdown#2fb170
support.type.vendored.property-name, support.type.property-name, source.css variable, source.coffee.embedded#6791e0
keyword.control, keyword.operator.new, keyword.operator.sizeof, keyword.operator.typeid, keyword.operator.wordlike, keyword.other.operator.overload, keyword.other.using, variable.language.this#6791e0
keyword.control.directive.include, keyword.control.directive.define, keyword.control.directive.pragma, meta.preprocessor, meta.preprocessor.macro, meta.preprocessor.pragma, entity.other.attribute-name, variable.parameter.preprocessor#f06090
string.other.link.title.markdown, constant.character.math.tex#6791e0
entity.name.section.markdown, punctuation.definition.heading.markdownbold underline
markup.bold.markdownbold
markup.italic.markdownitalic
markup.strikethrough.markdownstrikethrough
OI-Wiki Theme by xtttai2 - VS Code Theme