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#2A3344
  • activityBar.foreground#E6ECF5
  • activityBar.inactiveForeground#D1DAE8
  • activityBarBadge.background#7BB8F0
  • badge.background#7BB8F0
  • badge.foreground#1A202C
  • breadcrumb.activeSelectionForeground#7BB8F0
  • breadcrumb.background#2A3344
  • breadcrumb.focusForeground#7BB8F0
  • breadcrumb.foreground#E6ECF5
  • breadcrumbPicker.background#2A3344
  • descriptionForeground#D1DAE8
  • diffEditor.insertedTextBackground#68D39133
  • diffEditor.removedTextBackground#FF4D4D33
  • dropdown.background#4A5568
  • dropdown.border#4A5568
  • dropdown.foreground#E6ECF5
  • editor.background#252D3E
  • editor.findMatchBackground#4A5568
  • editor.findMatchHighlightBackground#4A556880
  • editor.foreground#E6ECF5
  • editor.lineHighlightBackground#7BB8F033
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#7BB8F066
  • editor.selectionHighlightBackground#4A556899
  • editor.wordHighlightBackground#4A556860
  • editor.wordHighlightStrongBackground#4A556899
  • editorBracketHighlight.foreground1#F687B3
  • editorCodeLens.foreground#A0AEC0
  • editorCursor.background#252D3E
  • editorCursor.foreground#7BB8F0
  • editorError.border#FF4D4D
  • editorError.foreground#FF4D4D
  • editorGroup.border#00000000
  • editorGroup.dropBackground#4A556899
  • editorGroupHeader.noTabsBackground#2A3344
  • editorGroupHeader.tabsBackground#2A3344
  • editorHoverWidget.background#2A3344
  • editorHoverWidget.border#4A5568
  • editorHoverWidget.foreground#E6ECF5
  • editorHoverWidget.highlightForeground#D1DAE8
  • editorLineNumber.activeForeground#D1DAE8
  • editorLineNumber.foreground#A0AEC0
  • editorRuler.foreground#4A5568
  • editorStickyScroll.background#2A3344
  • editorStickyScroll.border#4A5568
  • editorStickyScroll.shadow#00000033
  • editorStickyScrollHover.background#4A5568
  • editorSuggestWidget.background#2A3344
  • editorSuggestWidget.border#4A5568
  • editorSuggestWidget.foreground#E6ECF5
  • editorSuggestWidget.highlightForeground#7BB8F0
  • editorSuggestWidget.selectedBackground#4A5568
  • editorWarning.border#FFCA28
  • editorWarning.foreground#FFCA28
  • editorWidget.background#2A3344
  • editorWidget.border#4A5568
  • editorWidget.foreground#E6ECF5
  • extensionIcon.starForeground#FFCA28
  • focusBorder#7BB8F0
  • gitDecoration.addedResourceForeground#68D391
  • gitDecoration.conflictingResourceForeground#FF4D4D
  • gitDecoration.deletedResourceForeground#FF4D4D
  • gitDecoration.modifiedResourceForeground#FFCA28
  • gitDecoration.submoduleResourceForeground#A0AEC0
  • gitDecoration.untrackedResourceForeground#68D391
  • icon.foreground#E6ECF5
  • input.background#4A5568
  • input.border#4A5568
  • input.foreground#E6ECF5
  • input.placeholderForeground#A0AEC0
  • inputOption.activeBackground#4A5568
  • inputOption.activeBorder#7BB8F0
  • inputValidation.errorBackground#7F1D1D
  • inputValidation.errorBorder#FF4D4D
  • inputValidation.errorForeground#FF4D4D
  • inputValidation.infoBackground#2A3344
  • inputValidation.infoBorder#7BB8F0
  • inputValidation.infoForeground#E6ECF5
  • inputValidation.warningBackground#6C4F1B
  • inputValidation.warningBorder#FFCA28
  • inputValidation.warningForeground#FFCA28
  • list.activeSelectionBackground#4A5568
  • list.focusBackground#3A465A
  • list.focusForeground#E6ECF5
  • list.highlightForeground#7BB8F0
  • list.hoverBackground#4A5568
  • list.inactiveSelectionBackground#3A465A
  • menu.background#2A3344
  • menu.foreground#E6ECF5
  • menu.selectionBackground#4A5568
  • menu.selectionBorder#7BB8F0
  • menu.selectionForeground#E6ECF5
  • menu.separatorBackground#4A5568
  • notificationCenterHeader.background#4A5568
  • notificationCenterHeader.foreground#E6ECF5
  • notifications.background#2A3344
  • notifications.foreground#E6ECF5
  • notificationToast.border#4A5568
  • panel.background#2A3344
  • panel.border#4A5568
  • panelTitle.activeForeground#E6ECF5
  • panelTitle.inactiveForeground#D1DAE8
  • quickInput.background#2A3344
  • quickInput.foreground#E6ECF5
  • quickInputList.focusBackground#4A5568
  • quickInputList.focusForeground#E6ECF5
  • scrollbarSlider.activeBackground#4A556899
  • scrollbarSlider.background#4A556855
  • scrollbarSlider.hoverBackground#4A556877
  • settings.checkboxForeground#D1DAE8
  • settings.dropdownForeground#E6ECF5
  • settings.headerForeground#E6ECF5
  • settings.modifiedItemIndicator#7BB8F0
  • settings.numberInputForeground#E6ECF5
  • settings.textInputForeground#E6ECF5
  • sideBar.background#2A3344
  • sideBar.foreground#E6ECF5
  • sideBarSectionHeader.background#4A5568
  • statusBar.background#2A3344
  • statusBar.debuggingBackground#FF4D4D
  • statusBar.foreground#E6ECF5
  • statusBar.noFolderBackground#2A3344
  • statusBarItem.errorBackground#FF4D4D33
  • statusBarItem.warningBackground#FFCA2833
  • tab.activeBackground#4A5568
  • tab.activeForeground#E6ECF5
  • tab.inactiveBackground#2A3344
  • tab.inactiveForeground#D1DAE8
  • tab.unfocusedActiveForeground#D1DAE8
  • tab.unfocusedInactiveForeground#D1DAE8
  • terminal.ansiBlack#252D3E
  • terminal.ansiBlue#7BB8F0
  • terminal.ansiBrightBlack#4A5568
  • terminal.ansiBrightBlue#63B3ED
  • terminal.ansiBrightCyan#2AA198
  • terminal.ansiBrightGreen#68D391
  • terminal.ansiBrightMagenta#F687B3
  • terminal.ansiBrightRed#FF4D4D
  • terminal.ansiBrightWhite#E6ECF5
  • terminal.ansiBrightYellow#FFCA28
  • terminal.ansiCyan#2AA198
  • terminal.ansiGreen#68D391
  • terminal.ansiMagenta#F687B3
  • terminal.ansiRed#FF4D4D
  • terminal.ansiWhite#D1DAE8
  • terminal.ansiYellow#FFCA28
  • terminal.background#2A3344
  • terminal.foreground#D1DAE8
  • terminalCursor.foreground#7BB8F0
  • textLink.activeForeground#63B3ED
  • textLink.foreground#7BB8F0
  • titleBar.activeBackground#4A5568
  • titleBar.activeForeground#E6ECF5
  • titleBar.inactiveBackground#3A465A
  • titleBar.inactiveForeground#D1DAE8
  • widget.shadow#00000088

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword.control.go, keyword.package.go, keyword.import.go, keyword.func.go, keyword.struct.go, keyword.interface.go#C4A1F8bold
string.quoted.double.go, string.quoted.raw.go#68D391—
string.template, string.interpolated#68D391italic
constant.numeric.go#FFCA28—
entity.name.function.go#7BB8F0—
storage.type.go#C4A1F8—
variable.language#F687B3bold
support.function#7BB8F0—
constant.character.escape#FFCA28—
comment, punctuation.definition.comment, comment.line.double-slash.go, comment.block.go, comment.block.documentation#9CA3AF
constant.other.symbol.ruby, punctuation.section.block.begin.ruby, punctuation.section.block.end.ruby#68D391—
keyword, storage.type, storage.modifier, keyword.control#C4A1F8bold
keyword.operator#7BB8F0—
constant.numeric, constant.language, constant.language.boolean#FFCA28—
string, constant.other.symbol, string.quoted, string.regexp#68D391—
variable, variable.other.readwrite, variable.parameter#E6ECF5—
entity.name.function, support.function#7BB8F0—
entity.name.type, support.class, support.type#C4A1F8—
entity.name.tag, meta.tag.sgml, meta.tag.html#7BB8F0bold
entity.other.attribute-name#FFCA28—
entity.name.tag.css, meta.selector.css, entity.other.attribute-name.class.css#7BB8F0—
support.type.property-name.css, support.type.property-name.scss#C4A1F8—
variable.scss, variable.other.sass#68D391—
entity.name.function.scss, support.function.mixin.scss#FF4D4D—
variable.other.readwrite.js, identifier.js#E6ECF5—
punctuation.section.block.begin, punctuation.section.block.end, punctuation.section.array.begin, punctuation.section.array.end, punctuation.definition.block, punctuation.definition.array, punctuation.section.parens.begin, punctuation.section.parens.end, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, meta.brace.round, meta.brace.square, meta.brace.curly, punctuation.definition.begin, punctuation.definition.end#7BB8F0—
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#FF4D4Dbold
markup.bold.markdown, markup.bold#FFCA28bold
markup.italic.markdown, markup.italic#FFCA28italic
markup.inline.raw.markdown, markup.raw.block.markdown#68D391—
markup.quote.markdown#A0AEC0italic
markup.list.markdown#FFCA28—
markup.link.markdown, string.other.link.title.markdown, string.other.link.description.markdown, constant.other.reference.link.markdown#7BB8F0underline
meta.object-literal.key, support.type.property-name.json, support.type.property-name.yaml#C4A1F8—
constant.language.json, string.quoted.double.json, string.unquoted.plain.out.yaml#68D391—
meta.tag.js, meta.tag.tsx, meta.jsx.children#7BB8F0—
support.class.component.js, support.class.component.tsx#C4A1F8—
variable.language.php, support.function.construct.php, support.class.php#FFCA28—
meta.function-call.python, meta.function-call.arguments.python#7BB8F0—
entity.name.class.python, entity.name.function.python, meta.function.decorator.python#C4A1F8—
meta.embedded.block.js, meta.embedded.expression.js, meta.embedded.line.tsx, meta.embedded.block.tsx, meta.embedded.expression.tsx, meta.jsx.children.tsx, meta.tag.js, meta.tag.tsx, meta.tag.without-attributes.js, meta.tag.without-attributes.tsx#7BB8F0—
entity.other.attribute-name.jsx, entity.other.attribute-name.tsx#FFCA28—
variable.other.readwrite.cpp, variable.other.readwrite.c, variable.other.cpp, variable.parameter.cpp, variable.other.readwrite.java, variable.parameter.java, variable.other.readwrite.cs, variable.parameter.cs, variable.other.property.cs#E6ECF5—
variable.language.this.cs, variable.language.this.java, variable.language.this.cpp#C4A1F8italic