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#091019
  • activityBar.foreground#6D7F93
  • activityBarBadge.background#243B53
  • badge.background#243B53
  • badge.foreground#B0C3D6
  • breadcrumb.background#091019
  • breadcrumb.focusForeground#8EA6BE
  • breadcrumb.foreground#64778C
  • button.background#243B53
  • button.hoverBackground#2E4A67
  • debugIcon.breakpointCurrentStackframeForeground#8195AA
  • debugIcon.breakpointDisabledForeground#5B6D81
  • debugIcon.breakpointForeground#FF5C6C
  • debugIcon.breakpointStackframeForeground#8195AA
  • debugIcon.breakpointUnverifiedForeground#5B6D81
  • debugIcon.continueForeground#8195AA
  • debugIcon.disconnectForeground#FF5C6C
  • debugIcon.pauseForeground#FFAB70
  • debugIcon.restartForeground#8195AA
  • debugIcon.startForeground#8195AA
  • debugIcon.stepBackForeground#8195AA
  • debugIcon.stepIntoForeground#8195AA
  • debugIcon.stepOutForeground#8195AA
  • debugIcon.stepOverForeground#8195AA
  • debugIcon.stopForeground#FF5C6C
  • diffEditor.insertedTextBackground#2D6D493D
  • diffEditor.removedTextBackground#8C314252
  • dropdown.background#111A26
  • dropdown.border#1D2A39
  • dropdown.foreground#B0C3D6
  • editor.background#091019
  • editor.findMatchBackground#FFAB7060
  • editor.findMatchHighlightBackground#FFAB7028
  • editor.foreground#9CB1C6
  • editor.hoverHighlightBackground#16365322
  • editor.inactiveSelectionBackground#183A5640
  • editor.lineHighlightBackground#10192333
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#183A5680
  • editor.selectionHighlightBackground#1B3A5730
  • editor.snippetFinalTabstopHighlightBorder#00000000
  • editor.snippetTabstopHighlightBorder#00000000
  • editor.wordHighlightBackground#16365322
  • editor.wordHighlightStrongBackground#16365333
  • editorBracketMatch.background#00000000
  • editorBracketMatch.border#00000000
  • editorBracketPairGuide.activeBackground1#00000000
  • editorBracketPairGuide.activeBackground2#00000000
  • editorBracketPairGuide.activeBackground3#00000000
  • editorBracketPairGuide.activeBackground4#00000000
  • editorBracketPairGuide.activeBackground5#00000000
  • editorBracketPairGuide.activeBackground6#00000000
  • editorBracketPairGuide.background1#00000000
  • editorBracketPairGuide.background2#00000000
  • editorBracketPairGuide.background3#00000000
  • editorBracketPairGuide.background4#00000000
  • editorBracketPairGuide.background5#00000000
  • editorBracketPairGuide.background6#00000000
  • editorCursor.foreground#79B8FF
  • editorGroupHeader.tabsBackground#091019
  • editorGroupHeader.tabsBorder#091019
  • editorGutter.background#091019
  • editorIndentGuide.activeBackground#60758B
  • editorIndentGuide.activeBackground1#60758B
  • editorIndentGuide.background#344255
  • editorIndentGuide.background1#344255
  • editorLineNumber.activeForeground#8EA6BE
  • editorLineNumber.foreground#56687C
  • editorRuler.foreground#00000000
  • editorSuggestWidget.background#111A26
  • editorWidget.background#111A26
  • editorWidget.border#1D2A39
  • focusBorder#476A8B
  • foreground#8297AC
  • gitDecoration.ignoredResourceForeground#425367
  • input.background#111A26
  • input.border#1D2A39
  • input.foreground#B0C3D6
  • inputOption.activeBackground#24415F
  • list.activeSelectionBackground#17314A
  • list.activeSelectionForeground#B0C3D6
  • list.dropBackground#1C3B5A55
  • list.focusBackground#0F1722
  • list.highlightForeground#8CA0B4
  • list.hoverBackground#132030
  • list.hoverForeground#8D9DB0
  • list.inactiveSelectionBackground#12273B
  • list.inactiveSelectionForeground#9CB1C6
  • panel.background#091019
  • panelTitle.activeBorder#0B121B
  • panelTitle.activeForeground#B0C3D6
  • panelTitle.inactiveForeground#506176
  • peekView.border#476A8B
  • peekViewEditor.background#111A26
  • pickerGroup.border#172638
  • pickerGroup.foreground#9CB1C6
  • progressBar.background#6B86A3
  • quickInput.background#111A26
  • quickInput.foreground#B0C3D6
  • quickInputList.focusBackground#17314A
  • scrollbar.shadow#091019
  • scrollbarSlider.activeBackground#5A7B9A70
  • scrollbarSlider.background#3C566F4D
  • scrollbarSlider.hoverBackground#4B69865F
  • settings.dropdownBackground#111A26
  • settings.dropdownBorder#1D2A39
  • settings.dropdownForeground#B0C3D6
  • settings.headerForeground#B0C3D6
  • settings.modifiedItemIndicator#79B8FF
  • settings.numberInputBackground#111A26
  • settings.numberInputBorder#1D2A39
  • settings.numberInputForeground#B0C3D6
  • settings.textInputBackground#111A26
  • settings.textInputBorder#1D2A39
  • settings.textInputForeground#B0C3D6
  • sideBar.background#091019
  • sideBarSectionHeader.background#07111E
  • statusBar.background#091019
  • statusBar.debuggingBackground#2A2340
  • statusBar.foreground#697B90
  • statusBar.noFolderBackground#091019
  • statusBarItem.prominentBackground#8CA0B41A
  • statusBarItem.remoteBackground#050B1500
  • statusBarItem.remoteForeground#697B90
  • symbolIcon.classForeground#5FA8FF
  • symbolIcon.constructorForeground#FF5C6C
  • symbolIcon.enumeratorForeground#FFAB70
  • symbolIcon.enumeratorMemberForeground#FFAB70
  • symbolIcon.eventForeground#8EA6BE
  • symbolIcon.fieldForeground#8EA6BE
  • symbolIcon.functionForeground#FF5C6C
  • symbolIcon.interfaceForeground#5FA8FF
  • symbolIcon.methodForeground#FF5C6C
  • symbolIcon.variableForeground#9CB1C6
  • tab.activeBorder#08111F
  • tab.activeForeground#B0C3D6
  • tab.border#0B121B
  • tab.inactiveBackground#091019
  • tab.inactiveForeground#56687C
  • terminal.ansiBrightBlack#56687C
  • textLink.activeForeground#A7BDCF
  • textLink.foreground#90A7BC
  • titleBar.activeBackground#091019
  • titleBar.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#9CB1C6
support.function, support.function.console, entity.name.function, entity.name.function.member, meta.function-call entity.name.function, meta.method-call entity.name.function, meta.function-call variable.other.property, meta.method-call variable.other.property, meta.instance.constructor#FF5C6C
keyword, storage.modifier, storage.type, storage.control.clojure, keyword.control, keyword.operator.new, support.function.node, punctuation.separator.key-value, punctuation.definition.template-expression#B07CFF
storage.type.js, storage.type.ts, storage.type.tsx, storage.type.jsx, storage.type.variable.js, storage.type.variable.ts, storage.type.variable.tsx, storage.type.variable.jsx#F97583
entity.name.type, entity.name.class, entity.other.inherited-class, entity.name.namespace, entity.name.module, entity.name.package, support, support.type, support.class, support.constant, support.variable, support.type.object, support.type.object.console, support.class.console, variable.other.object, variable.other.class, variable.other.constant, variable.other.object.console, variable.language.this, variable.language.self, variable.language.super, constant.language, constant.keyword.clojure#5FA8FF
meta.definition.variable.name, meta.definition.variable variable.other, meta.definition.variable variable.other.readwrite, meta.definition.variable variable.other.constant, meta.var.expr variable.other, meta.var.expr variable.other.readwrite, meta.var.expr variable.other.constant, variable.other.readwrite, variable.other.constant#79B8FF
string, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, markup.fenced_code, markup.inline#FFAB70
comment, string.quoted.docstring.multi#64778C
constant.numeric, constant.other.placeholder, constant.character.format.placeholder, meta.property-value, keyword.other.unit#B3C5D8
variable.parameter, variable.parameter.function, meta.property-name, variable.other.property, variable.other.object.property#8EA6BE
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments#7B8FA5
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#FF5C6C
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml#79B8FF
punctuation.definition.tag, punctuation.separator.key-value.html#7B8FA5
entity.name.tag.css, entity.name.tag.scss, entity.name.tag.less, entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss, entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss#B07CFF
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, meta.property-name.css, meta.property-name.scss, meta.property-name.less#79B8FF
support.type.property-name.json, support.type.property-name.json.comments, entity.name.tag.yaml, support.type.property-name.toml#79B8FF
keyword.operator.accessor, punctuation.accessor, punctuation.accessor.js, punctuation.accessor.jsx, punctuation.accessor.ts, punctuation.accessor.tsx, punctuation.separator.period, punctuation.separator.dot, punctuation.separator.property-access, punctuation.separator.method, punctuation.separator.namespace, punctuation.separator.period.python, punctuation.accessor.python, punctuation.accessor.php, punctuation.accessor.java, punctuation.accessor.cs, punctuation.accessor.cpp, punctuation.accessor.ruby, punctuation.accessor.go#FFAB70
meta.link.inline.markdown#5FA8FF
strong, markup.heading.markdown, markup.bold.markdown#B07CFF
token.info-token#5FA8FF
token.warn-token#FFAB70
token.error-token#FF5C6C
token.debug-token#B07CFF
markup.underline.link, beginning.punctuation.definition.list.markdown, punctuation.definition.metadata.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#8EA6BE