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#20232b
  • activityBar.dropBackground#6C6F9366
  • activityBar.foreground#FFFFFF
  • activityBarBadge.background#30AAD7
  • activityBarBadge.foreground#16161C
  • badge.background#30AAD7
  • badge.foreground#FFFFFF
  • breadcrumbPicker.background#232530
  • button.background#2E303E
  • diffEditor.insertedTextBackground#09F7A01A
  • diffEditor.removedTextBackground#F43E5C1A
  • dropdown.background#232530
  • dropdown.listBackground#2E303E
  • editor.background#1C1E26
  • editor.findMatchBackground#1b2947
  • editor.findMatchHighlightBackground#1b2947
  • editor.findRangeHighlightBackground#1b2947
  • editor.foreground#FFFFFF
  • editor.hoverHighlightBackground#1b2947
  • editor.lineHighlightBackground#1b2947
  • editor.rangeHighlightBackground#1b2947
  • editor.selectionBackground#1b2947
  • editor.selectionHighlightBackground#1b2947
  • editor.wordHighlightBackground#1b2947
  • editor.wordHighlightStrongBackground#1b2947
  • editorBracketMatch.background#6C6F9366
  • editorBracketMatch.border#6C6F9300
  • editorCodeLens.foreground#6C6F9399
  • editorCursor.background#1C1E26
  • editorCursor.foreground#56C2EA
  • editorError.foreground#F43E5C
  • editorGroup.border#1A1C23
  • editorGroup.dropBackground#6C6F934D
  • editorGroupHeader.tabsBackground#1C1E26
  • editorGutter.addedBackground#09F7A0A6
  • editorGutter.deletedBackground#F43E5CB3
  • editorGutter.modifiedBackground#21BFC2B3
  • editorIndentGuide.activeBackground#2E303E
  • editorIndentGuide.background#2E303E99
  • editorLineNumber.activeForeground#FFFFFF
  • editorLineNumber.foreground#FFFFFF60
  • editorOverviewRuler.addedForeground#09f7a099
  • editorOverviewRuler.border#2E303EB3
  • editorOverviewRuler.bracketMatchForeground#FFFFFF66
  • editorOverviewRuler.deletedForeground#F43E5C99
  • editorOverviewRuler.errorForeground#F43E5CE6
  • editorOverviewRuler.findMatchForeground#6C6F93
  • editorOverviewRuler.modifiedForeground#21BFC299
  • editorOverviewRuler.warningForeground#27D79773
  • editorRuler.foreground#6C6F9333
  • editorSuggestWidget.highlightForeground#30AAD7
  • editorWarning.foreground#27D797CC
  • editorWidget.background#232530
  • editorWidget.border#232530
  • errorForeground#F43E5C
  • extensionButton.prominentBackground#30AAD7
  • extensionButton.prominentHoverBackground#30AAD7
  • focusBorder#30AAD7
  • foreground#FFFFFF
  • gitDecoration.addedResourceForeground#27D797CC
  • gitDecoration.deletedResourceForeground#F43E5C
  • gitDecoration.ignoredResourceForeground#FFFFFF59
  • gitDecoration.modifiedResourceForeground#FAC39A
  • gitDecoration.untrackedResourceForeground#27D797
  • input.background#2E303E
  • inputOption.activeBorder#30AAD7
  • inputValidation.errorBackground#F43E5C80
  • inputValidation.errorBorder#F43E5C00
  • list.activeSelectionBackground#1C1E26
  • list.activeSelectionForeground#59E1E3
  • list.dropBackground#6C6F9366
  • list.errorForeground#F43E5CE6
  • list.focusBackground#30AAD799
  • list.focusForeground#FFFFFF
  • list.highlightForeground#30AAD7
  • list.hoverBackground#2E303E99
  • list.hoverForeground#FFFFFF
  • list.inactiveFocusBackground#30AAD799
  • list.inactiveSelectionBackground#1C1E26
  • list.inactiveSelectionForeground#59E1E3
  • list.warningForeground#27D797BF
  • panelTitle.activeBorder#30AAD7
  • peekView.border#1A1C23
  • peekViewEditor.background#232530
  • peekViewEditor.matchHighlightBackground#6C6F9399
  • peekViewResult.background#232530
  • peekViewResult.matchHighlightBackground#6C6F9399
  • peekViewResult.selectionBackground#2E303E80
  • peekViewTitle.background#232530
  • scrollbar.shadow#16161C
  • scrollbarSlider.activeBackground#6C6F9373
  • scrollbarSlider.background#6C6F931A
  • scrollbarSlider.hoverBackground#6C6F934D
  • selection.background#6C6F9380
  • sideBar.background#20232b
  • sideBar.dropBackground#6C6F934D
  • sideBar.foreground#FFFFFF
  • sideBarSectionHeader.background#20232b
  • sideBarSectionHeader.foreground#30AAD7
  • statusBar.background#1C1E26
  • statusBar.debuggingBackground#FAB38E
  • statusBar.debuggingForeground#06060C
  • statusBar.foreground#FFFFFF80
  • statusBar.noFolderBackground#1C1E26
  • statusBarItem.hoverBackground#2E303E
  • statusBarItem.prominentBackground#2E303E
  • statusBarItem.prominentHoverBackground#6C6F93
  • tab.activeBackground#1C1E26
  • tab.activeBorder#30AAD7
  • tab.activeForeground#FFFFFF
  • tab.border#30AAD700
  • tab.inactiveBackground#20232b
  • tab.inactiveForeground#FFFFFF
  • terminal.ansiBlue#30AAD7
  • terminal.ansiBrightBlue#56C2EA
  • terminal.ansiBrightCyan#3CE8E6
  • terminal.ansiBrightGreen#0AF29D
  • terminal.ansiBrightMagenta#F360C4
  • terminal.ansiBrightRed#E06783
  • terminal.ansiBrightYellow#FAC39A
  • terminal.ansiCyan#1FDAD9
  • terminal.ansiGreen#14D386
  • terminal.ansiMagenta#E54EAF
  • terminal.ansiRed#E95478
  • terminal.ansiYellow#FAB795
  • terminal.foreground#FFFFFF
  • terminal.selectionBackground#6C6F934D
  • terminalCursor.background#FFFFFF
  • terminalCursor.foreground#56C2EA
  • textLink.activeForeground#30AAD7
  • textLink.foreground#30AAD7
  • titleBar.activeBackground#20232b
  • titleBar.inactiveBackground#20232b
  • walkThrough.embeddedEditorBackground#232530
  • widget.shadow#16161C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
text, source#FFFFFFnormal
punctuation#21BFC2normal
variable, entity.name.variable.local, entity.name.type.anchor.yaml#FFFFFFnormal
keyword.operator#56C2EAnormal
comment, punctuation.definition.comment, string.quoted.docstring, string.quoted.docstring punctuation.definition.string#959595normal
string.quoted, string.template, punctuation.definition.string, string.unquoted.plain.out, string.quoted source.css#f9ca99
entity.name.import.go#f9ca99
variable.language, keyword.other.this, variable.parameter.function.language.special.self#3CE8E6normal
variable.parameter, entity.name.variable.parameter#FFFFFFnormal
storage, storage.type, keyword.other, keyword.operator.new, keyword.package, keyword.struct, keyword.type.go, keyword.var.go, keyword.function, keyword.interface, storage.type punctuation.definition#56C2EAnormal
storage.modifiernormal
keyword#56C2EAnormal
constant, constant.character punctuation, punctuation.definition.constant#F09483normal
constant.numeric
constant.language, support.constant, support.constant punctuationnormal
string.regexp#FAB795
constant.character.escape#E06783
entity, storage.type.cs, support.function.go, support.class.component, support.function.magic#14D386normal
entity.other.attribute-name#30AAD7normal
entity.name.variable.field, entity.name.variable.property, variable.other.object.property, variable.other.property, variable.object.property, support.type.property-name, support.variable.property, punctuation.support.type.property-name, variable.other.member, entity.name.tag.yaml#30AAD7normal
support, support.function.builtin#0AF29Dnormal
support.constant#1FDAD9normal
support.type, keyword.type, storage.type.c, source.go storage.type, storage.type.tag-handle.yaml#1FDAD9normal
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.definition.interpolation, constant.other.placeholder#B877DB
punctuation.definition.entity.css, entity.other.attribute-name.id.css, entity.other.attribute-name.class.css, entity.other.attribute-name.placeholder.css#56C2EAnormal
support.type.property-name.css, support.type.vendored.property-name.css#30AAD7normal
keyword.other.unit#F09483
support.constant.font-name#3CE8E6normal
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-class punctuation.definition.entity.css#0AF29Dnormal
support.function.misc.css#0AF29D
punctuation.definition.keyword.scss, keyword.control.at-rule#0AF29Dnormal
markup.heading, entity.name.section, punctuation.definition.heading, source.yaml entity.other.document#56C2EAbold
markup.quote, punctuation.definition.quote.begin.markdown, markup.quote meta.paragraph#f9ca99normal
punctuation.definition.list#B877DB
markup.underline.link#30AAD7normal
string.other.link.description, string.other.link.title, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#FFFFFFnormal
markup.normal, punctuation.definition.normal.markdown#3CE8E6normal
markup.bold, punctuation.definition.bold.markdown#0AF29Dbold
markup.inline.raw.string, punctuation.definition.raw.markdown, markup.fenced_code, markup.fenced_code punctuation.definition.markdown#14D386
punctuation.definition.directive, entity.other.attribute-name.pragma, keyword.control.directive#56C2EAnormal
entity.name.function.decorator.python, punctuation.definition.decorator.python#09F7A0normal

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Cold Horizon Theme | dewstouh - Coding Theme