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#81A1C1
  • activityBar.background#15171C
  • activityBar.border#222530
  • activityBar.foreground#D8DEE9
  • activityBar.inactiveForeground#A0A8B7
  • button.background#81A1C1
  • button.border#88C0D0
  • button.focusBorder#222530
  • button.foreground#000000
  • button.hoverBackground#88C0D0
  • button.prominentBackground#81A1C1
  • button.prominentFocusBackground#81A1C1
  • button.prominentForeground#000000
  • button.prominentHoverBackground#88C0D0
  • button.separator#88C0D0
  • commandCenter.activeBackground#222530
  • commandCenter.activeBorder#81A1C1
  • commandCenter.activeForeground#D8DEE9
  • commandCenter.background#15171C
  • commandCenter.border#222530
  • commandCenter.debuggingBackground#222530
  • commandCenter.foreground#D8DEE9
  • commandCenter.inactiveBorder#222530
  • commandCenter.inactiveForeground#A0A8B7
  • dropdown.background#222530
  • dropdown.border#222530
  • dropdown.foreground#D8DEE9
  • dropdown.listBackground#1B1D23
  • editor.background#15171C
  • editor.findMatchBackground#31446B
  • editor.findMatchForeground#FFFFFF
  • editor.findMatchHighlightBackground#222530
  • editor.findMatchHighlightForeground#81A1C1
  • editor.findRangeHighlightBackground#1B1D23
  • editor.foreground#D8DEE9
  • editor.inactiveSelectionBackground#31446B40
  • editor.lineHighlightBackground#1A1C21
  • editor.selectionBackground#31446B
  • editor.selectionHighlightBackground#31446B30
  • editor.selectionHighlightBorder#31446B50
  • editorBracketHighlight.foreground1#81A1C1
  • editorBracketHighlight.foreground2#81A1C1
  • editorBracketHighlight.foreground3#81A1C1
  • editorBracketHighlight.foreground4#81A1C1
  • editorBracketHighlight.foreground5#81A1C1
  • editorBracketHighlight.foreground6#81A1C1
  • editorBracketHighlight.unexpectedBracket.foreground#BF616A
  • editorBracketMatch.background#31446B40
  • editorBracketMatch.border#81A1C1
  • editorBracketPairGuide.activeBackground1#FFFFFF40
  • editorBracketPairGuide.activeBackground2#FFFFFF40
  • editorBracketPairGuide.activeBackground3#FFFFFF40
  • editorBracketPairGuide.activeBackground4#FFFFFF40
  • editorBracketPairGuide.activeBackground5#FFFFFF40
  • editorBracketPairGuide.activeBackground6#FFFFFF40
  • editorBracketPairGuide.background1#FFFFFF20
  • editorBracketPairGuide.background2#FFFFFF20
  • editorBracketPairGuide.background3#FFFFFF20
  • editorBracketPairGuide.background4#FFFFFF20
  • editorBracketPairGuide.background5#FFFFFF20
  • editorBracketPairGuide.background6#FFFFFF20
  • editorCursor.foreground#81A1C1
  • editorGroupHeader.noTabsBackground#15171C
  • editorGroupHeader.tabsBackground#15171C
  • editorGroupHeader.tabsBorder#222530
  • editorHoverWidget.background#1B1D23
  • editorHoverWidget.border#222530
  • editorHoverWidget.foreground#D8DEE9
  • editorHoverWidget.highlightForeground#81A1C1
  • editorHoverWidget.statusBarBackground#15171C
  • editorIndentGuide.activeBackground#FFFFFF40
  • editorIndentGuide.background#FFFFFF20
  • editorPane.background#15171C
  • editorSuggestWidget.background#1B1D23
  • editorSuggestWidget.border#222530
  • editorSuggestWidget.focusHighlightForeground#81A1C1
  • editorSuggestWidget.foreground#D8DEE9
  • editorSuggestWidget.highlightForeground#81A1C1
  • editorSuggestWidget.selectedBackground#222530
  • editorSuggestWidget.selectedForeground#D8DEE9
  • editorSuggestWidget.selectedIconForeground#D8DEE9
  • editorSuggestWidgetStatus.foreground#A0A8B7
  • editorWidget.background#1B1D23
  • editorWidget.border#222530
  • editorWidget.foreground#D8DEE9
  • editorWidget.resizeBorder#81A1C1
  • focusBorder#00000000
  • input.background#1B1D23
  • input.border#222530
  • input.focusBackground#222530
  • input.focusBorder#81A1C1
  • input.foreground#D8DEE9
  • input.placeholderForeground#A0A8B7
  • inputOption.activeBackground#31446B
  • inputOption.activeBorder#81A1C1
  • inputOption.activeForeground#FFFFFF
  • inputOption.hoverBackground#222530
  • inputValidation.errorBackground#1B1D23
  • inputValidation.errorBorder#BF616A
  • inputValidation.infoBackground#1B1D23
  • inputValidation.infoBorder#81A1C1
  • inputValidation.warningBackground#1B1D23
  • inputValidation.warningBorder#EBCB8B
  • list.activeSelectionBackground#31446B
  • list.activeSelectionForeground#D8DEE9
  • list.focusAndSelectionOutline#222530
  • list.focusBackground#31446B
  • list.focusForeground#D8DEE9
  • list.focusOutline#222530
  • list.highlightForeground#D8DEE9
  • list.hoverBackground#222530
  • list.hoverForeground#D8DEE9
  • list.inactiveFocusForeground#D8DEE980
  • list.inactiveFocusIconForeground#D8DEE980
  • list.inactiveFocusOutline#222530
  • list.inactiveSelectionBackground#222530
  • list.inactiveSelectionForeground#D8DEE980
  • list.inactiveSelectionIconForeground#D8DEE980
  • menu.background#222530
  • menu.border#222530
  • menu.foreground#D8DEE9
  • menu.selectionBackground#31446B
  • menu.selectionForeground#D8DEE9
  • menu.separatorBackground#222530
  • menubar.background#15171C
  • menubar.foreground#D8DEE9
  • menubar.selectionBackground#31446B
  • menubar.selectionForeground#D8DEE9
  • panel.background#15171C
  • panel.border#222530
  • panelTitle.activeBorder#81A1C1
  • panelTitle.activeForeground#D8DEE9
  • panelTitle.inactiveForeground#A0A8B7
  • sash.hoverBorder#81A1C1
  • searchEditor.findMatchBackground#31446B
  • searchEditor.textInputBorder#222530
  • sideBar.background#15171C
  • sideBar.border#222530
  • sideBar.foreground#D8DEE980
  • sideBarSectionHeader.background#15171C
  • sideBarSectionHeader.border#222530
  • sideBarSectionHeader.foreground#D8DEE980
  • sideBarSectionHeader.hoverBackground#222530
  • sideBarSectionHeader.hoverForeground#D8DEE9
  • sideBarStickyScroll.border#222530
  • sideBarStickyScroll.shadow#222530
  • sideBarTitle.background#15171C
  • sideBarTitle.border#222530
  • statusBar.background#15171C
  • statusBar.border#222530
  • statusBar.debuggingBackground#15171C
  • statusBar.debuggingBorder#222530
  • statusBar.debuggingForeground#D8DEE9
  • statusBar.focusBorder#222530
  • statusBar.foreground#D8DEE9
  • statusBar.noFolderBackground#15171C
  • statusBar.noFolderBorder#222530
  • statusBar.noFolderForeground#D8DEE9
  • statusBarItem.remoteBackground#81A1C1
  • statusBarItem.remoteForeground#000000
  • statusBarItem.remoteHoverBackground#88C0D0
  • statusBarItem.remoteHoverForeground#000000
  • tab.activeBackground#1B1D23
  • tab.activeBorder#222530
  • tab.activeBorderTop#81A1C1
  • tab.activeForeground#D8DEE9
  • tab.border#222530
  • tab.hoverBackground#222530
  • tab.hoverForeground#D8DEE9
  • tab.inactiveBackground#15171C
  • tab.inactiveForeground#A0A8B7
  • tab.selectedBorderTop#81A1C1
  • tab.unfocusedActiveBackground#222530
  • tab.unfocusedHoverBackground#222530
  • tab.unfocusedInactiveBackground#15171C
  • terminal.ansiBlack#1B1D23
  • terminal.ansiBlue#81A1C1
  • terminal.ansiBrightBlack#15171C
  • terminal.ansiBrightBlue#81A1C1
  • terminal.ansiBrightCyan#8FBCBB
  • terminal.ansiBrightGreen#A3BE8C
  • terminal.ansiBrightMagenta#B48EAD
  • terminal.ansiBrightRed#BF616A
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#EBCB8B
  • terminal.ansiCyan#8FBCBB
  • terminal.ansiGreen#A3BE8C
  • terminal.ansiMagenta#B48EAD
  • terminal.ansiRed#BF616A
  • terminal.ansiWhite#D8DEE9
  • terminal.ansiYellow#EBCB8B
  • terminal.background#15171C
  • terminal.dropBackground#31446B
  • terminal.foreground#D8DEE9
  • terminal.inactiveSelectionBackground#31446B40
  • terminal.selectionBackground#31446B
  • terminalCursor.background#15171C
  • terminalCursor.foreground#81A1C1
  • textInput.background#1B1D23
  • textInput.border#222530
  • textInput.foreground#D8DEE9
  • textInput.placeholderForeground#A0A8B7
  • titleBar.activeBackground#15171C
  • titleBar.activeForeground#D8DEE9
  • titleBar.border#222530
  • titleBar.inactiveBackground#15171C
  • titleBar.inactiveForeground#A0A8B7
  • tooltip.background#1B1D23
  • tooltip.border#222530
  • tooltip.foreground#D8DEE9
  • tooltip.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5C6370italic
string, string.quoted, string.template, punctuation.definition.string.begin, punctuation.definition.string.end, punctuation.definition.string.template.begin, punctuation.definition.string.template.end#A3BE8C—
constant.numeric#EBCB8B—
constant.language, constant.language.boolean, constant.language.null, constant.language.true, constant.language.false#88C0D0—
keyword, storage.type, storage.modifier, keyword.control#B48EAD—
keyword.control.return, keyword.control.return.ts, keyword.control.return.tsx, keyword.control.return.js, keyword.control.return.jsx#B48EADitalic
entity.name.type, support.type, support.type.primitive, entity.other.inherited-class, entity.name.class, entity.name.class.js, entity.name.class.ts, entity.name.class.tsx, entity.name.class.jsx, entity.name.class.php, entity.name.class.java, entity.name.class.cpp, entity.name.class.c, entity.name.class.cs, entity.name.class.python, entity.name.class.ruby, entity.name.class.go, entity.name.class.rs, entity.name.class.swift, entity.name.class.kotlin, entity.name.interface, entity.name.interface.js, entity.name.interface.ts, entity.name.interface.tsx, entity.name.interface.jsx, entity.name.interface.php, entity.name.interface.java, entity.name.interface.cpp, entity.name.interface.c, entity.name.interface.cs, entity.name.interface.python, entity.name.interface.ruby, entity.name.interface.go, entity.name.interface.rs, entity.name.interface.swift, entity.name.interface.kotlin, entity.name.enum, entity.name.enum.js, entity.name.enum.ts, entity.name.enum.tsx, entity.name.enum.jsx, entity.name.enum.php, entity.name.enum.java, entity.name.enum.cpp, entity.name.enum.c, entity.name.enum.cs, entity.name.enum.python, entity.name.enum.ruby, entity.name.enum.go, entity.name.enum.rs, entity.name.enum.swift, entity.name.enum.kotlin, entity.name.struct, entity.name.struct.js, entity.name.struct.ts, entity.name.struct.tsx, entity.name.struct.jsx, entity.name.struct.php, entity.name.struct.java, entity.name.struct.cpp, entity.name.struct.c, entity.name.struct.cs, entity.name.struct.python, entity.name.struct.ruby, entity.name.struct.go, entity.name.struct.rs, entity.name.struct.swift, entity.name.struct.kotlin, entity.name.union, entity.name.union.js, entity.name.union.ts, entity.name.union.tsx, entity.name.union.jsx, entity.name.union.php, entity.name.union.java, entity.name.union.cpp, entity.name.union.c, entity.name.union.cs, entity.name.union.python, entity.name.union.ruby, entity.name.union.go, entity.name.union.rs, entity.name.union.swift, entity.name.union.kotlin, entity.name.namespace, entity.name.namespace.js, entity.name.namespace.ts, entity.name.namespace.tsx, entity.name.namespace.jsx, entity.name.namespace.php, entity.name.namespace.java, entity.name.namespace.cpp, entity.name.namespace.c, entity.name.namespace.cs, entity.name.namespace.python, entity.name.namespace.ruby, entity.name.namespace.go, entity.name.namespace.rs, entity.name.namespace.swift, entity.name.namespace.kotlin, entity.name.module, entity.name.module.js, entity.name.module.ts, entity.name.module.tsx, entity.name.module.jsx, entity.name.module.php, entity.name.module.java, entity.name.module.cpp, entity.name.module.c, entity.name.module.cs, entity.name.module.python, entity.name.module.ruby, entity.name.module.go, entity.name.module.rs, entity.name.module.swift, entity.name.module.kotlin, entity.name.package, entity.name.package.js, entity.name.package.ts, entity.name.package.tsx, entity.name.package.jsx, entity.name.package.php, entity.name.package.java, entity.name.package.cpp, entity.name.package.c, entity.name.package.cs, entity.name.package.python, entity.name.package.ruby, entity.name.package.go, entity.name.package.rs, entity.name.package.swift, entity.name.package.kotlin, entity.name.trait, entity.name.trait.js, entity.name.trait.ts, entity.name.trait.tsx, entity.name.trait.jsx, entity.name.trait.php, entity.name.trait.java, entity.name.trait.cpp, entity.name.trait.c, entity.name.trait.cs, entity.name.trait.python, entity.name.trait.ruby, entity.name.trait.go, entity.name.trait.rs, entity.name.trait.swift, entity.name.trait.kotlin, entity.name.mixin, entity.name.mixin.js, entity.name.mixin.ts, entity.name.mixin.tsx, entity.name.mixin.jsx, entity.name.mixin.php, entity.name.mixin.java, entity.name.mixin.cpp, entity.name.mixin.c, entity.name.mixin.cs, entity.name.mixin.python, entity.name.mixin.ruby, entity.name.mixin.go, entity.name.mixin.rs, entity.name.mixin.swift, entity.name.mixin.kotlin#8FBCBB—
entity.name.function, support.function, meta.function-call, variable.function, entity.name.function.js, entity.name.function.ts, entity.name.function.tsx, entity.name.function.jsx, entity.name.function.php, entity.name.function.java, entity.name.function.cpp, entity.name.function.c, entity.name.function.cs, entity.name.function.python, entity.name.function.ruby, entity.name.function.go, entity.name.function.rs, entity.name.function.swift, entity.name.function.kotlin, meta.function-call.generic, meta.function-call.js, meta.function-call.ts, meta.function-call.tsx, meta.function-call.jsx, meta.function-call.php, meta.function-call.java, meta.function-call.cpp, meta.function-call.c, meta.function-call.cs, meta.function-call.python, meta.function-call.ruby, meta.function-call.go, meta.function-call.rs, meta.function-call.swift, meta.function-call.kotlin, support.function.js, support.function.ts, support.function.tsx, support.function.jsx, support.function.php, support.function.java, support.function.cpp, support.function.c, support.function.cs, support.function.python, support.function.ruby, support.function.go, support.function.rs, support.function.swift, support.function.kotlin, variable.function.js, variable.function.ts, variable.function.tsx, variable.function.jsx, variable.function.php, variable.function.java, variable.function.cpp, variable.function.c, variable.function.cs, variable.function.python, variable.function.ruby, variable.function.go, variable.function.rs, variable.function.swift, variable.function.kotlin#E5C07B—
variable.other.readwrite, variable.other.property, variable.parameter, variable.other, support.variable#81A1C1—
variable.other.constant, constant.other#D08770—
invalid, invalid.illegal#BF616A—
invalid.deprecated#BF616A—
entity.name.tag, support.type.property-name#81A1C1—
entity.name.tag.html, entity.name.tag.jsx, entity.name.tag.tsx, entity.name.tag.php#81A1C1—
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, meta.tag.php, meta.tag.php.html, meta.tag.php.xml, meta.tag.php.yaml, meta.tag.php.json, meta.tag.php.css, meta.tag.php.scss, meta.tag.php.less, meta.tag.php.stylus, meta.tag.php.sass, meta.tag.php.styl, meta.tag.php.jsx, meta.tag.php.tsx#B48EAD—
entity.other.attribute-name.html, entity.other.attribute-name.jsx, entity.other.attribute-name.tsx, entity.other.attribute-name.php#81A1C1—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#81A1C1—
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#E5C07B—
keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit.less#B48EAD—
constant.numeric.css, constant.numeric.scss, constant.numeric.less#B48EAD—
support.type.property-name.json#81A1C1—
entity.name.tag.yaml#81A1C1—
markup.heading#81A1C1—
markup.bold#E5C07Bbold
markup.italic#B48EADitalic
markup.underline.link#8FBCBB—
markup.inline.raw#A3BE8C—
markup.list#D08770—
markup.inserted#A3BE8C—
markup.deleted#BF616A—
markup.changed#BF616A—
string.regexp#E5C07B—
constant.character.escape#8FBCBB—
keyword.operator#D8DEE9—
punctuation.separator, punctuation.terminator#A0A8B7—
punctuation.section#D8DEE9—
keyword.control.extends, keyword.control.implements, keyword.control.extends.js, keyword.control.extends.ts, keyword.control.extends.tsx, keyword.control.extends.jsx, keyword.control.extends.php, keyword.control.extends.java, keyword.control.extends.cpp, keyword.control.extends.c, keyword.control.extends.cs, keyword.control.extends.python, keyword.control.extends.ruby, keyword.control.extends.go, keyword.control.extends.rs, keyword.control.extends.swift, keyword.control.extends.kotlin, keyword.control.implements.js, keyword.control.implements.ts, keyword.control.implements.tsx, keyword.control.implements.jsx, keyword.control.implements.php, keyword.control.implements.java, keyword.control.implements.cpp, keyword.control.implements.c, keyword.control.implements.cs, keyword.control.implements.python, keyword.control.implements.ruby, keyword.control.implements.go, keyword.control.implements.rs, keyword.control.implements.swift, keyword.control.implements.kotlin#FFB347bold
Darkwaves by Spacelaxy - VS Code Theme