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#EAF0F6
  • activityBar.foreground#607489
  • activityBarBadge.background#D7E3EF
  • badge.background#DCE7F1
  • badge.foreground#50657A
  • breadcrumb.background#F6F8FB
  • breadcrumb.focusForeground#42566B
  • breadcrumb.foreground#7A8D9E
  • button.background#DCE7F1
  • button.hoverBackground#D0DEEA
  • debugIcon.breakpointCurrentStackframeForeground#6D8CAB
  • debugIcon.breakpointDisabledForeground#A5B2BF
  • debugIcon.breakpointForeground#D95666
  • debugIcon.breakpointStackframeForeground#6D8CAB
  • debugIcon.breakpointUnverifiedForeground#A5B2BF
  • debugIcon.continueForeground#6D8CAB
  • debugIcon.disconnectForeground#D95666
  • debugIcon.pauseForeground#CC7A3B
  • debugIcon.restartForeground#6D8CAB
  • debugIcon.startForeground#6D8CAB
  • debugIcon.stepBackForeground#6D8CAB
  • debugIcon.stepIntoForeground#6D8CAB
  • debugIcon.stepOutForeground#6D8CAB
  • debugIcon.stepOverForeground#6D8CAB
  • debugIcon.stopForeground#D95666
  • diffEditor.insertedTextBackground#5AA46922
  • diffEditor.removedTextBackground#D96A7622
  • dropdown.background#FFFFFF
  • dropdown.border#D5E0EA
  • dropdown.foreground#314255
  • editor.background#F6F8FB
  • editor.findMatchBackground#F2BC8A80
  • editor.findMatchHighlightBackground#F2BC8A40
  • editor.foreground#2F3D4D
  • editor.hoverHighlightBackground#16365322
  • editor.inactiveSelectionBackground#DCE8F340
  • editor.lineHighlightBackground#EAF1F822
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#CFE3F566
  • editor.selectionHighlightBackground#DCE8F333
  • 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#2D7BD7
  • editorGroupHeader.tabsBackground#EEF3F8
  • editorGroupHeader.tabsBorder#EEF3F8
  • editorGutter.background#F6F8FB
  • editorIndentGuide.activeBackground#8799AB
  • editorIndentGuide.activeBackground1#8799AB
  • editorIndentGuide.background#D0D9E2
  • editorIndentGuide.background1#D0D9E2
  • editorLineNumber.activeForeground#61788E
  • editorLineNumber.foreground#8DA0B1
  • editorRuler.foreground#00000000
  • editorSuggestWidget.background#FFFFFF
  • editorWidget.background#FFFFFF
  • editorWidget.border#D5E0EA
  • focusBorder#82A4C6
  • foreground#5F7287
  • gitDecoration.ignoredResourceForeground#9AA8B6
  • input.background#FFFFFF
  • input.border#D5E0EA
  • input.foreground#314255
  • inputOption.activeBackground#D8E5F1
  • list.activeSelectionBackground#E7F0F9
  • list.activeSelectionForeground#314255
  • list.dropBackground#1C3B5A55
  • list.focusBackground#ECF3FA
  • list.highlightForeground#2D7BD7
  • list.hoverBackground#F0F5FA
  • list.hoverForeground#5D7187
  • list.inactiveSelectionBackground#EEF4F9
  • list.inactiveSelectionForeground#42566B
  • panel.background#F1F5FA
  • panelTitle.activeBorder#D9E4EE
  • panelTitle.activeForeground#314255
  • panelTitle.inactiveForeground#7A8D9E
  • peekView.border#A9C3DC
  • peekViewEditor.background#FFFFFF
  • pickerGroup.border#D5E0EA
  • pickerGroup.foreground#42566B
  • progressBar.background#6D8CAB
  • quickInput.background#FFFFFF
  • quickInput.foreground#314255
  • quickInputList.focusBackground#E7F0F9
  • scrollbar.shadow#F1F5FA
  • scrollbarSlider.activeBackground#8EA6BE70
  • scrollbarSlider.background#B7C7D73D
  • scrollbarSlider.hoverBackground#9EB4C95C
  • settings.dropdownBackground#FFFFFF
  • settings.dropdownBorder#D5E0EA
  • settings.dropdownForeground#314255
  • settings.headerForeground#314255
  • settings.modifiedItemIndicator#2D7BD7
  • settings.numberInputBackground#FFFFFF
  • settings.numberInputBorder#D5E0EA
  • settings.numberInputForeground#314255
  • settings.textInputBackground#FFFFFF
  • settings.textInputBorder#D5E0EA
  • settings.textInputForeground#314255
  • sideBar.background#F1F5FA
  • sideBarSectionHeader.background#EDF2F7
  • statusBar.background#EAF0F6
  • statusBar.debuggingBackground#EDE6F8
  • statusBar.foreground#5F7287
  • statusBar.noFolderBackground#EAF0F6
  • statusBarItem.prominentBackground#DCE7F166
  • statusBarItem.remoteBackground#00000000
  • statusBarItem.remoteForeground#5F7287
  • symbolIcon.classForeground#4E88C7
  • symbolIcon.constructorForeground#D95666
  • symbolIcon.enumeratorForeground#C97A3E
  • symbolIcon.enumeratorMemberForeground#C97A3E
  • symbolIcon.eventForeground#6F8193
  • symbolIcon.fieldForeground#6F8193
  • symbolIcon.functionForeground#D95666
  • symbolIcon.interfaceForeground#4E88C7
  • symbolIcon.methodForeground#D95666
  • symbolIcon.variableForeground#2D7BD7
  • tab.activeBorder#D9E4EE
  • tab.activeForeground#314255
  • tab.border#EEF3F8
  • tab.inactiveBackground#EEF3F8
  • tab.inactiveForeground#77899B
  • terminal.ansiBrightBlack#56687C
  • textLink.activeForeground#2D7BD7
  • textLink.foreground#4D80B4
  • titleBar.activeBackground#EAF0F6
  • titleBar.border#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#314255—
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#D95666—
keyword, storage.modifier, storage.type, storage.control.clojure, keyword.control, keyword.operator.new, support.function.node, punctuation.separator.key-value, punctuation.definition.template-expression#8E63D8—
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#E05A69—
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#4E88C7—
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#2D7BD7—
string, string.quoted, string.regexp, string.interpolated, string.template, string.unquoted.plain.out.yaml, markup.fenced_code, markup.inline#C97A3E—
comment, string.quoted.docstring.multi#7F91A2—
constant.numeric, constant.other.placeholder, constant.character.format.placeholder, meta.property-value, keyword.other.unit#61788E—
variable.parameter, variable.parameter.function, meta.property-name, variable.other.property, variable.other.object.property#6F8193—
punctuation.definition.arguments, punctuation.definition.dict, punctuation.separator, meta.function-call.arguments#8092A4—
entity.name.tag, entity.name.tag.html, entity.name.tag.xml#CF5463—
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml#6B84A0—
punctuation.definition.tag, punctuation.separator.key-value.html#8092A4—
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#8E63D8—
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#6B84A0—
support.type.property-name.json, support.type.property-name.json.comments, entity.name.tag.yaml, support.type.property-name.toml#6B84A0—
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#D9894F—
meta.link.inline.markdown#4E88C7—
strong, markup.heading.markdown, markup.bold.markdown#8E63D8—
token.info-token#4E88C7—
token.warn-token#C97A3E—
token.error-token#D95666—
token.debug-token#8E63D8—
markup.underline.link, beginning.punctuation.definition.list.markdown, punctuation.definition.metadata.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#6B84A0—