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#C75D4E
  • activityBar.background#0D0D0D
  • activityBar.border#00000055
  • activityBar.foreground#EADBCF
  • activityBar.inactiveForeground#6B6B7F
  • activityBarBadge.background#C75D4E
  • activityBarBadge.foreground#0D0D0D
  • breadcrumb.activeSelectionForeground#FBC154
  • breadcrumb.focusForeground#EADBCF
  • breadcrumb.foreground#8A8AA1
  • breadcrumbPicker.background#1A1A1ACC
  • button.background#C75D4E
  • button.foreground#0D0D0D
  • button.hoverBackground#E88E5A
  • checkbox.background#1A1A1A
  • checkbox.border#3A3A4A
  • contrastActiveBorder#00000000
  • contrastBorder#00000000
  • debugConsole.errorForeground#FF7A6C
  • debugConsole.infoForeground#A7C484
  • debugConsole.warningForeground#FBC154
  • debugToolBar.background#141414
  • descriptionForeground#8A8AA1
  • diffEditor.insertedLineBackground#A7C48411
  • diffEditor.insertedTextBackground#A7C48422
  • diffEditor.removedLineBackground#C75D4E11
  • diffEditor.removedTextBackground#C75D4E22
  • dropdown.background#1A1A1ACC
  • dropdown.border#3A3A4A
  • editor.background#0D0D0D
  • editor.findMatchBackground#E88E5A44
  • editor.findMatchBorder#E88E5A99
  • editor.findMatchHighlightBackground#E88E5A22
  • editor.findMatchHighlightBorder#E88E5A66
  • editor.foreground#EADBCF
  • editor.hoverHighlightBackground#8A8AA122
  • editor.inactiveSelectionBackground#8A8AA11A
  • editor.lineHighlightBackground#141414
  • editor.lineHighlightBorder#6B6B7F22
  • editor.linkedEditingBackground#A7C4841A
  • editor.rangeHighlightBackground#8A8AA112
  • editor.selectionBackground#8A8AA133
  • editor.selectionForeground#EADBCF
  • editor.selectionHighlightBackground#FBC15429
  • editor.wordHighlightBackground#8A8AA122
  • editor.wordHighlightStrongBackground#A7C48422
  • editorBracketHighlight.foreground1#FBC154
  • editorBracketHighlight.foreground2#A7C484
  • editorBracketHighlight.foreground3#8A8AA1
  • editorBracketHighlight.foreground4#E88E5A
  • editorBracketHighlight.foreground5#79B8FF
  • editorBracketHighlight.foreground6#FF7A6C
  • editorBracketMatch.background#FBC1541A
  • editorBracketMatch.border#FBC15488
  • editorCodeLens.foreground#6B6B7F
  • editorCursor.background#0D0D0D
  • editorCursor.foreground#FBC154
  • editorGutter.addedBackground#4CAF5077
  • editorGutter.background#0D0D0D
  • editorGutter.deletedBackground#E5393577
  • editorGutter.modifiedBackground#2196F377
  • editorHoverWidget.background#1A1A1ACC
  • editorHoverWidget.border#EADBCF22
  • editorIndentGuide.activeBackground1#8A8AA177
  • editorIndentGuide.background1#6B6B7F33
  • editorLineNumber.activeForeground#8A8AA1
  • editorLineNumber.foreground#525263
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#FBC15488
  • editorOverviewRuler.errorForeground#FF7A6C99
  • editorOverviewRuler.infoForeground#79B8FF99
  • editorOverviewRuler.warningForeground#FBC15499
  • editorRuler.foreground#2A2A2A
  • editorStickyScroll.background#111111
  • editorSuggestWidget.background#1A1A1ACC
  • editorSuggestWidget.border#EADBCF22
  • editorSuggestWidget.highlightForeground#FBC154
  • editorUnnecessaryCode.opacity#00000066
  • editorWhitespace.foreground#6B6B7F44
  • editorWidget.background#1A1A1ACC
  • editorWidget.border#EADBCF22
  • errorForeground#FF7A6C
  • focusBorder#C75D4E88
  • foreground#EADBCF
  • gitDecoration.addedResourceForeground#98D69E
  • gitDecoration.conflictingResourceForeground#FBC154
  • gitDecoration.deletedResourceForeground#FF7A6C
  • gitDecoration.ignoredResourceForeground#6B6B7F
  • gitDecoration.modifiedResourceForeground#8A8AA1
  • gitDecoration.untrackedResourceForeground#E88E5A
  • icon.foreground#EADBCF
  • input.background#1A1A1ACC
  • input.border#3A3A4A
  • input.placeholderForeground#6B6B7F
  • list.activeSelectionBackground#8A8AA133
  • list.activeSelectionForeground#FBC154
  • list.errorForeground#FF7A6C
  • list.focusBackground#8A8AA133
  • list.highlightForeground#FBC154
  • list.hoverBackground#8A8AA11A
  • list.inactiveSelectionBackground#8A8AA122
  • list.warningForeground#FBC154
  • minimap.background#0D0D0D
  • minimap.findMatchHighlight#E88E5A55
  • minimap.selectionHighlight#8A8AA155
  • notebook.cellBorderColor#2A2A2A
  • notebook.cellEditorBackground#121212
  • notifications.background#1A1A1ACC
  • notifications.border#EADBCF22
  • panel.background#141414
  • panel.border#00000055
  • panelTitle.activeBorder#C75D4E
  • panelTitle.activeForeground#EADBCF
  • panelTitle.inactiveForeground#8A8AA1
  • peekView.border#C75D4E
  • peekViewEditor.background#0D0D0D99
  • peekViewEditor.matchHighlightBackground#E88E5A33
  • peekViewResult.background#1A1A1ACC
  • scrollbar.shadow#00000088
  • scrollbarSlider.activeBackground#8A8AA199
  • scrollbarSlider.background#8A8AA133
  • scrollbarSlider.hoverBackground#8A8AA166
  • selection.background#8A8AA155
  • sideBar.background#141414
  • sideBar.border#00000055
  • sideBar.foreground#EADBCF
  • sideBarSectionHeader.background#0D0D0D
  • sideBarSectionHeader.foreground#EADBCF
  • sideBarTitle.foreground#FBC154
  • statusBar.background#0D0D0D
  • statusBar.border#00000055
  • statusBar.debuggingBackground#C75D4E
  • statusBar.debuggingForeground#0D0D0D
  • statusBar.foreground#EADBCF
  • statusBar.noFolderBackground#0D0D0D
  • statusBarItem.remoteBackground#FBC154
  • statusBarItem.remoteForeground#0D0D0D
  • terminal.ansiBlack#1A1A1A
  • terminal.ansiBlue#8A8AA1
  • terminal.ansiBrightBlack#6B6B7F
  • terminal.ansiBrightBlue#B39DDB
  • terminal.ansiBrightCyan#80CBC4
  • terminal.ansiBrightGreen#C5E1A5
  • terminal.ansiBrightMagenta#F48FB1
  • terminal.ansiBrightRed#FF7A6C
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFF176
  • terminal.ansiCyan#79B8FF
  • terminal.ansiGreen#A7C484
  • terminal.ansiMagenta#E88E5A
  • terminal.ansiRed#C75D4E
  • terminal.ansiWhite#EADBCF
  • terminal.ansiYellow#FBC154
  • terminal.background#0D0D0D
  • terminal.foreground#EADBCF
  • terminal.selectionBackground#8A8AA133
  • terminalCursor.background#0D0D0D
  • terminalCursor.foreground#FBC154
  • testing.iconFailed#FF7A6C
  • testing.iconPassed#A7C484
  • testing.iconQueued#E88E5A
  • titleBar.activeBackground#0D0D0D
  • titleBar.activeForeground#EADBCF
  • titleBar.inactiveBackground#0D0D0D
  • titleBar.inactiveForeground#6B6B7F
  • widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#EADBCF
invalid, invalid.illegal#FF7A6C
comment, punctuation.definition.comment#6B6B7Fitalic
comment.block.documentation#8A8AA1
string, punctuation.definition.string#C75D4E
string.template, punctuation.definition.template-string#C75D4E
string.regexp, constant.character.escape#79B8FF
constant.numeric, constant.language#E88E5A
constant.character, constant.other#E88E5A
keyword.control, keyword.operator.new#FBC154italic
keyword.operator.logical, keyword.operator.comparison#8A8AA1
keyword.operator#6B6B7F
punctuation, meta.brace, meta.delimiter#6B6B7F
variable, meta.definition.variable#EADBCF
variable.other.readwrite#EADBCF
variable.parameter#EADBCFitalic
variable.other.property, variable.other.object.property#EADBCF
support.type.property-name, meta.object-literal.key, support.type.property-name.json#8A8AA1
entity.name.function, support.function#A7C484
meta.function-call, entity.name.function.call, support.function.console#A7C484
entity.name.class, entity.name.type.class, support.class#8A8AA1bold
entity.other.inherited-class#8A8AA1italic bold
entity.name.type, support.type, entity.name.interface, storage.type#8A8AA1
entity.name.namespace, entity.name.module, entity.name.package#8A8AA1
support.class.component, support.type.component#8A8AA1bold
entity.name.tag#C75D4E
entity.other.attribute-name#E88E5Aitalic
meta.decorator, storage.type.annotation, punctuation.decorator#FBC154italic
keyword.control.directive#6B6B7Fitalic
markup.heading, markup.heading.setext, entity.name.section#FBC154
markup.bold, markup.italic#EADBCF
markup.inline.raw, markup.fenced_code#A7C484
Code Glasses by Aadityaa - VS Code Theme