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#171A21
  • activityBar.foreground#00C0E8
  • activityBar.inactiveForeground#8F8F94
  • activityBarBadge.background#FF2D55
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF2D55
  • badge.foreground#FFFFFF
  • button.background#0088FF
  • button.foreground#FFFFFF
  • button.hoverBackground#6155F5
  • button.secondaryBackground#0088FF
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#0088FF
  • descriptionForeground#0088FF
  • diffEditor.insertedTextBackground#66D98A33
  • diffEditor.removedTextBackground#FF7A7D33
  • disabledForeground#8F8F94
  • editor.background#111318
  • editor.findMatchBackground#FFCC0050
  • editor.findMatchHighlightBackground#FFCC0028
  • editor.findRangeHighlightBackground#0088FF36
  • editor.foreground#D9DEE8
  • editor.hoverHighlightBackground#0088FF2D
  • editor.inactiveSelectionBackground#0088FF26
  • editor.selectionBackground#0088FF3A
  • editor.wordHighlightBackground#FFCC002A
  • editor.wordHighlightStrongBackground#FF8D2833
  • editorBracketMatch.background#0088FF44
  • editorBracketMatch.border#0088FF
  • editorCursor.foreground#0088FF
  • editorError.border#FF8D28
  • editorError.foreground#FF8D28
  • editorGutter.addedBackground#66D98A
  • editorGutter.background#111318
  • editorGutter.deletedBackground#FF7A7D
  • editorGutter.modifiedBackground#0088FF
  • editorHint.foreground#33C758
  • editorIndentGuide.activeBackground1#0088FF66
  • editorIndentGuide.background1#8F8F9433
  • editorInfo.foreground#0088FF
  • editorLineNumber.activeForeground#0088FF
  • editorLineNumber.foreground#8F8F94
  • editorLink.activeForeground#0088FF
  • editorMarkerNavigationError.background#FF8D28
  • editorMarkerNavigationInfo.background#0088FF
  • editorMarkerNavigationWarning.background#FF8D28
  • editorOverviewRuler.addedForeground#66D98ACC
  • editorOverviewRuler.bracketMatchForeground#0088FFAA
  • editorOverviewRuler.deletedForeground#FF7A7DCC
  • editorOverviewRuler.errorForeground#FF8D28CC
  • editorOverviewRuler.findMatchForeground#FFCC00AA
  • editorOverviewRuler.infoForeground#0088FFAA
  • editorOverviewRuler.modifiedForeground#0088FF88
  • editorOverviewRuler.warningForeground#FF8D28AA
  • editorRuler.foreground#8F8F9444
  • editorSuggestWidget.background#171A21
  • editorSuggestWidget.border#0088FF
  • editorSuggestWidget.foreground#D9DEE8
  • editorSuggestWidget.highlightForeground#0088FF
  • editorSuggestWidget.selectedBackground#0088FF26
  • editorWarning.border#FF8D28
  • editorWarning.foreground#FF8D28
  • editorWhitespace.foreground#8F8F9440
  • editorWidget.background#171A21
  • editorWidget.border#0088FF
  • errorForeground#FF8D28
  • focusBorder#0088FF
  • foreground#D9DEE8
  • gitDecoration.addedResourceForeground#66D98A
  • gitDecoration.conflictingResourceForeground#FFCC00
  • gitDecoration.deletedResourceForeground#FF7A7D
  • gitDecoration.ignoredResourceForeground#8F8F94
  • gitDecoration.modifiedResourceForeground#0088FF
  • gitDecoration.renamedResourceForeground#0088FF
  • gitDecoration.stageDeletedResourceForeground#FF7A7D
  • gitDecoration.stageModifiedResourceForeground#0088FF
  • gitDecoration.submoduleResourceForeground#AC7F5E
  • gitDecoration.untrackedResourceForeground#66D98A
  • icon.foreground#0088FF
  • input.background#171A21
  • input.border#0088FF77
  • input.foreground#D9DEE8
  • input.placeholderForeground#8F8F94
  • list.activeSelectionBackground#0088FF36
  • list.activeSelectionForeground#D9DEE8
  • list.highlightForeground#FF2D55
  • list.hoverBackground#0088FF22
  • list.inactiveSelectionBackground#0088FF24
  • merge.currentContentBackground#66D98A12
  • merge.currentHeaderBackground#66D98A22
  • merge.incomingContentBackground#0088FF12
  • merge.incomingHeaderBackground#0088FF22
  • minimap.findMatchHighlight#FFCC00AA
  • minimap.selectionHighlight#0088FF55
  • minimapGutter.addedBackground#66D98A
  • minimapGutter.deletedBackground#FF7A7D
  • minimapGutter.modifiedBackground#0088FF
  • notificationCenterHeader.background#171A21
  • notifications.background#111318
  • notifications.border#0088FF33
  • notifications.foreground#D9DEE8
  • panel.background#111318
  • panel.border#0088FF33
  • panelTitle.activeBorder#0088FF
  • panelTitle.activeForeground#0088FF
  • panelTitle.inactiveForeground#8F8F94
  • peekView.border#0088FF
  • peekViewEditor.background#111318
  • peekViewResult.background#111318
  • peekViewResult.selectionBackground#0088FF30
  • peekViewTitle.background#0088FF44
  • problemsErrorIcon.foreground#FF8D28
  • problemsInfoIcon.foreground#0088FF
  • problemsWarningIcon.foreground#FF8D28
  • progressBar.background#0088FF
  • sideBar.background#171A21
  • sideBar.border#0088FF33
  • sideBar.foreground#D9DEE8
  • sideBarSectionHeader.background#0088FF22
  • sideBarSectionHeader.foreground#0088FF
  • sideBarTitle.foreground#0088FF
  • statusBar.background#0088FF
  • statusBar.debuggingBackground#FF8D28
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#D9DEE8
  • statusBar.noFolderBackground#0088FF
  • tab.activeBackground#111318
  • tab.activeBorderTop#0088FF
  • tab.activeForeground#0088FF
  • tab.border#0088FF22
  • tab.hoverBackground#0088FF20
  • tab.inactiveBackground#171A21
  • tab.inactiveForeground#8F8F94
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0088FF
  • terminal.ansiBrightBlack#8F8F94
  • terminal.ansiBrightBlue#6155F5
  • terminal.ansiBrightCyan#0088FF
  • terminal.ansiBrightGreen#33C758
  • terminal.ansiBrightMagenta#FF2D55
  • terminal.ansiBrightRed#FF383C
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFCC00
  • terminal.ansiCyan#0088FF
  • terminal.ansiGreen#33C758
  • terminal.ansiMagenta#CB30E0
  • terminal.ansiRed#FF383C
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFCC00
  • terminal.background#111318
  • terminal.foreground#D9DEE8
  • titleBar.activeBackground#171A21
  • titleBar.activeForeground#D9DEE8
  • titleBar.border#0088FF22
  • titleBar.inactiveBackground#171A21
  • titleBar.inactiveForeground#8F8F94

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#8F8F94italic
keyword, storage, keyword.control, keyword.operator.new#6155F5—
keyword.operator, punctuation.accessor, punctuation.separator#0088FF—
entity.name.type, entity.name.class, support.type, support.class#0088FF—
entity.name.function, meta.function-call, support.function#0088FF—
variable, meta.definition.variable.name, support.variable#D9DEE8—
constant, variable.other.constant, variable.other.enummember, support.constant#AC7F5E—
string, punctuation.definition.string#33C758—
constant.character.escape, constant.other.placeholder#FF8D28—
constant.numeric, constant.language.boolean, constant.language.null#FF8D28—
entity.name.decorator, meta.decorator, storage.type.annotation#0088FF—
entity.name.tag, entity.other.attribute-name, markup.heading#0088FF—
markup.bold, markup.italic#6155F5—
support.type.property-name.json, meta.structure.dictionary.key.json string.quoted.double.json, support.type.property-name.toml, meta.key.toml, meta.table.toml entity.name.section.group-title.toml#0088FF—
markup.underline.link.markdown, string.other.link.title.markdown, markup.inline.raw.markdown, markup.quote.markdown#00C0E8—
support.type.property-name.css, meta.property-name.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css#00C0E8—
meta.preprocessor, keyword.control.directive, punctuation.definition.directive#FF8D28—
entity.name.function.macro.rust, support.function.macro.rust, storage.modifier.lifetime.rust#00C0E8—
support.function.builtin.python, support.type.python, variable.language.special.self.python, variable.language.special.cls.python, support.function.builtin.lua, support.function.library.lua, support.variable.builtin.lua#0088FF—
markup.inserted, markup.deleted#AC7F5E—