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#18181C
  • activityBar.foreground#F0E6D6
  • activityBar.inactiveForeground#948C7E
  • activityBarBadge.background#C9A24B
  • activityBarBadge.foreground#14141A
  • badge.background#C9A24B
  • badge.foreground#14141A
  • button.background#C9A24B
  • button.foreground#14141A
  • button.hoverBackground#E8C468
  • button.secondaryBackground#201F24
  • button.secondaryForeground#F0E6D6
  • dropdown.background#201F24
  • dropdown.border#38383E
  • dropdown.foreground#F0E6D6
  • editor.background#14141A
  • editor.foreground#F0E6D6
  • editor.inactiveSelectionBackground#C9A24B1A
  • editor.lineHighlightBackground#201F24
  • editor.selectionBackground#C9A24B33
  • editor.selectionHighlightBackground#C9A24B22
  • editorBracketHighlight.foreground1#B27EE8
  • editorBracketHighlight.foreground2#6FB3E0
  • editorBracketHighlight.foreground3#3EE0A0
  • editorBracketHighlight.foreground4#E8C468
  • editorBracketHighlight.foreground5#B27EE8
  • editorBracketHighlight.foreground6#6FB3E0
  • editorBracketHighlight.unexpectedBracket.foreground#E45D75
  • editorBracketMatch.border#C9A24B
  • editorCursor.foreground#E8C468
  • editorGroup.border#18181C
  • editorGroupHeader.tabsBackground#18181C
  • editorGutter.addedBackground#3EE0A0
  • editorGutter.background#14141A
  • editorGutter.deletedBackground#E45D75
  • editorGutter.modifiedBackground#C9A24B
  • editorHoverWidget.background#18181C
  • editorHoverWidget.border#38383E
  • editorIndentGuide.activeBackground1#57505F
  • editorIndentGuide.background1#2A2930
  • editorLineNumber.activeForeground#F0E6D6
  • editorLineNumber.foreground#57505F
  • editorSuggestWidget.background#18181C
  • editorSuggestWidget.highlightForeground#E8C468
  • editorSuggestWidget.selectedBackground#201F24
  • editorWhitespace.foreground#38383E
  • editorWidget.background#18181C
  • editorWidget.border#38383E
  • focusBorder#C9A24B
  • foreground#F0E6D6
  • gitDecoration.addedResourceForeground#3EE0A0
  • gitDecoration.conflictingResourceForeground#5C1A2E
  • gitDecoration.deletedResourceForeground#E45D75
  • gitDecoration.ignoredResourceForeground#948C7E
  • gitDecoration.modifiedResourceForeground#C9A24B
  • gitDecoration.untrackedResourceForeground#3EE0A0
  • input.background#201F24
  • input.border#38383E
  • input.foreground#F0E6D6
  • input.placeholderForeground#57505F
  • list.activeSelectionBackground#201F24
  • list.activeSelectionForeground#FFF8EC
  • list.focusBackground#201F24
  • list.highlightForeground#E8C468
  • list.hoverBackground#201F24
  • list.inactiveSelectionBackground#1C1B20
  • notifications.background#18181C
  • notifications.foreground#F0E6D6
  • panel.background#18181C
  • panel.border#18181C
  • panelTitle.activeBorder#C9A24B
  • panelTitle.activeForeground#FFF8EC
  • panelTitle.inactiveForeground#948C7E
  • peekView.border#C9A24B
  • peekViewEditor.background#14141A
  • peekViewResult.background#18181C
  • scrollbarSlider.activeBackground#C9A24B88
  • scrollbarSlider.background#57505F55
  • scrollbarSlider.hoverBackground#57505F88
  • sideBar.background#18181C
  • sideBar.foreground#F0E6D6
  • sideBarSectionHeader.background#18181C
  • sideBarSectionHeader.foreground#F0E6D6
  • sideBarTitle.foreground#FFF8EC
  • statusBar.background#18181C
  • statusBar.border#18181C
  • statusBar.debuggingBackground#5C1A2E
  • statusBar.debuggingForeground#FFF8EC
  • statusBar.foreground#F0E6D6
  • statusBar.noFolderBackground#18181C
  • statusBarItem.hoverBackground#201F24
  • statusBarItem.remoteBackground#C9A24B
  • statusBarItem.remoteForeground#14141A
  • tab.activeBackground#14141A
  • tab.activeBorderTop#C9A24B
  • tab.activeForeground#FFF8EC
  • tab.border#18181C
  • tab.inactiveBackground#18181C
  • tab.inactiveForeground#948C7E
  • tab.unfocusedActiveBorderTop#57505F
  • terminal.ansiBlack#14141A
  • terminal.ansiBlue#1B3A66
  • terminal.ansiBrightBlack#38383E
  • terminal.ansiBrightBlue#6FB3E0
  • terminal.ansiBrightCyan#7FE0D6
  • terminal.ansiBrightGreen#3EE0A0
  • terminal.ansiBrightMagenta#B27EE8
  • terminal.ansiBrightRed#E45D75
  • terminal.ansiBrightWhite#FFF8EC
  • terminal.ansiBrightYellow#E8C468
  • terminal.ansiCyan#1C5C56
  • terminal.ansiGreen#164D34
  • terminal.ansiMagenta#3D1E5C
  • terminal.ansiRed#5C1A2E
  • terminal.ansiWhite#F0E6D6
  • terminal.ansiYellow#6B4A12
  • terminal.background#14141A
  • terminal.foreground#F0E6D6
  • terminalCursor.foreground#E8C468
  • titleBar.activeBackground#18181C
  • titleBar.activeForeground#F0E6D6
  • titleBar.inactiveBackground#18181C
  • titleBar.inactiveForeground#948C7E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#948A9Citalic
keyword, keyword.control, storage, storage.type, storage.modifier, keyword.operator.new, keyword.other#B27EE8
entity.name.function, support.function, meta.function-call#6FB3E0
string, string.quoted, string.template#3EE0A0
constant.numeric, constant.language, constant.character, constant.other#E8C468
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#7FE0D6
variable, variable.parameter, variable.other#F0E6D6
punctuation, keyword.operator, meta.brace#57505F
entity.name.tag#E45D75
entity.other.attribute-name, meta.object-literal.key, support.type.property-name, variable.parameter.key, entity.name.tag.yaml#E8C468
invalid, invalid.illegal#E45D75underline
markup.heading#E8C468bold
markup.bold#FFF8ECbold
markup.italicitalic
markup.underline.link#6FB3E0
markup.quote#948A9Citalic
markup.inline.raw, markup.fenced_code.block#3EE0A0