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#8FBE93
  • activityBar.background#20252A
  • activityBar.foreground#B7C2BE
  • activityBar.inactiveForeground#5C6A66
  • activityBarBadge.background#8FBE93
  • activityBarBadge.foreground#20252A
  • badge.background#6FA79C
  • badge.foreground#1B2320
  • button.background#3F6B63
  • button.foreground#DCE7E3
  • button.hoverBackground#4B7A71
  • debugToolBar.background#343E44
  • dropdown.background#343E44
  • dropdown.border#3D474E
  • dropdown.foreground#B7C2BE
  • editor.background#2D343A
  • editor.findMatchBackground#D3B37835
  • editor.findMatchBorder#D3B37880
  • editor.findMatchHighlightBackground#8FBE9330
  • editor.foreground#B7C2BE
  • editor.inactiveSelectionBackground#4B616740
  • editor.lineHighlightBackground#343C43
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#4B616760
  • editor.selectionHighlightBackground#4B616740
  • editor.wordHighlightBackground#4B616740
  • editor.wordHighlightStrongBackground#4B616760
  • editorBracketHighlight.foreground1#8FBE93
  • editorBracketHighlight.foreground2#86ABC9
  • editorBracketHighlight.foreground3#D3B378
  • editorBracketHighlight.foreground4#6FA79C
  • editorBracketHighlight.foreground5#C99A6E
  • editorBracketHighlight.foreground6#CD8286
  • editorBracketHighlight.unexpectedBracket.foreground#C96569
  • editorBracketMatch.background#38424A
  • editorBracketMatch.border#6FA79C80
  • editorCursor.foreground#5FC79A
  • editorError.foreground#C96569
  • editorGroup.border#3A434A
  • editorGroupHeader.tabsBackground#262B30
  • editorGutter.addedBackground#8FBE9380
  • editorGutter.deletedBackground#C9656980
  • editorGutter.modifiedBackground#86ABC980
  • editorHoverWidget.background#343E44
  • editorHoverWidget.border#3D474E
  • editorIndentGuide.activeBackground1#4F5C60
  • editorIndentGuide.background1#3A434A
  • editorInfo.foreground#86ABC9
  • editorLineNumber.activeForeground#C9D2CE
  • editorLineNumber.foreground#54615E
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#C9656980
  • editorOverviewRuler.findMatchForeground#8FBE9380
  • editorOverviewRuler.infoForeground#86ABC980
  • editorOverviewRuler.warningForeground#D3B37880
  • editorSuggestWidget.background#343E44
  • editorSuggestWidget.border#3D474E
  • editorSuggestWidget.foreground#B7C2BE
  • editorSuggestWidget.highlightForeground#8FBE93
  • editorSuggestWidget.selectedBackground#3F4A51
  • editorWarning.foreground#D3B378
  • editorWhitespace.foreground#465055
  • editorWidget.background#343E44
  • editorWidget.border#3D474E
  • focusBorder#8FBE9370
  • foreground#B7C2BE
  • gitDecoration.addedResourceForeground#8FBE93
  • gitDecoration.conflictingResourceForeground#7C93D1
  • gitDecoration.deletedResourceForeground#C96569
  • gitDecoration.ignoredResourceForeground#5C6A66
  • gitDecoration.modifiedResourceForeground#86ABC9
  • gitDecoration.untrackedResourceForeground#D3B378
  • input.background#343E44
  • input.border#3D474E
  • input.foreground#B7C2BE
  • input.placeholderForeground#5C6A66
  • list.activeSelectionBackground#3F4A51
  • list.activeSelectionForeground#C9D2CE
  • list.focusBackground#3F4A51
  • list.highlightForeground#8FBE93
  • list.hoverBackground#333B41
  • list.hoverForeground#B7C2BE
  • list.inactiveSelectionBackground#2F373D
  • list.inactiveSelectionForeground#9CA8A3
  • menu.background#343E44
  • menu.border#3D474E
  • menu.foreground#B7C2BE
  • menu.selectionBackground#3F4A51
  • menu.selectionForeground#DCE7E3
  • minimap.background#262B30
  • minimapSlider.activeBackground#8FBE9370
  • minimapSlider.background#4B616750
  • minimapSlider.hoverBackground#4B616770
  • notificationCenterHeader.background#343E44
  • notificationCenterHeader.foreground#B7C2BE
  • notifications.background#343E44
  • notifications.foreground#B7C2BE
  • notificationsErrorIcon.foreground#C96569
  • notificationsInfoIcon.foreground#86ABC9
  • notificationsWarningIcon.foreground#D3B378
  • panel.background#262B30
  • panel.border#31393F
  • panelTitle.activeBorder#8FBE93
  • panelTitle.activeForeground#C9D2CE
  • panelTitle.inactiveForeground#5C6A66
  • progressBar.background#6FA79C
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#8FBE9370
  • scrollbarSlider.background#4B616740
  • scrollbarSlider.hoverBackground#4B616770
  • sideBar.background#262B30
  • sideBar.border#31393F
  • sideBar.foreground#9CA8A3
  • sideBarSectionHeader.background#2B3237
  • sideBarSectionHeader.border#31393F
  • sideBarSectionHeader.foreground#9CA8A3
  • sideBarTitle.foreground#C9D2CE
  • statusBar.background#20252A
  • statusBar.border#31393F
  • statusBar.debuggingBackground#86ABC9
  • statusBar.debuggingForeground#20252A
  • statusBar.foreground#94A19B
  • tab.activeBackground#333B41
  • tab.activeBorder#8FBE93
  • tab.activeForeground#C9D2CE
  • tab.border#20252A
  • tab.hoverBackground#333B41
  • tab.hoverForeground#B3BEB9
  • tab.inactiveBackground#20252A
  • tab.inactiveForeground#5C6A66
  • terminal.ansiBlack#20252A
  • terminal.ansiBlue#86ABC9
  • terminal.ansiBrightBlack#5C6A66
  • terminal.ansiBrightBlue#A9C8DE
  • terminal.ansiBrightCyan#94C4B9
  • terminal.ansiBrightGreen#B4D9B7
  • terminal.ansiBrightMagenta#C6B6DA
  • terminal.ansiBrightRed#E0A2A5
  • terminal.ansiBrightWhite#D6DEDA
  • terminal.ansiBrightYellow#E8CE9E
  • terminal.ansiCyan#6FA79C
  • terminal.ansiGreen#8FBE93
  • terminal.ansiMagenta#A996C4
  • terminal.ansiRed#CD8286
  • terminal.ansiWhite#B7C2BE
  • terminal.ansiYellow#D3B378
  • terminal.background#262B30
  • terminal.foreground#B7C2BE
  • terminalCursor.foreground#5FC79A
  • textLink.activeForeground#94D8C6
  • textLink.foreground#6FC2AE
  • titleBar.activeBackground#20252A
  • titleBar.activeForeground#9CA8A3
  • titleBar.border#31393F
  • titleBar.inactiveBackground#20252A
  • titleBar.inactiveForeground#5C6A66
  • tree.indentGuidesStroke#3A434A
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#838F89italic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.delete, storage.type, storage.modifier, storage.type.function, storage.type.class, storage.type.enum, storage.type.interface#B7A4D1—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#9FB0A8—
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, entity.name.tag.localname.xml, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#D6959A—
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.class, entity.other.attribute-name.id#C99A6E—
string, string.quoted, string.quoted.double, string.quoted.single, string.quoted.double.html, string.quoted.single.html, string.quoted.double.js, string.quoted.single.js#8FBE93—
constant.character.escape, constant.other.placeholder, variable.interpolation#6FA79C—
entity.name.function, support.function, variable.function, meta.function, meta.function-call, meta.definition.method, entity.name.method#86ABC9—
variable, variable.other, variable.other.readwrite, variable.parameter, variable.parameter.function#D6959A—
variable.other.property, variable.other.object.property, variable.object.property, meta.object-literal.key#DA9CA0—
constant.numeric, constant.numeric.integer, constant.numeric.float#C99A6E—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant#C99A6E—
storage.type, support.type, entity.name.type, entity.name.class, support.class, entity.other.inherited-class#D3B378—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#6FA79C—
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, meta.selector.css#C99A6E—
support.constant.property-value.css, meta.property-value.css, constant.numeric.css, keyword.other.unit#D3B378—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace, meta.bracket, meta.delimiter#8B9A93—
markup.heading, markup.bold, markup.italic#D6959A—
string.other.link, string.other.link.title.markdown, constant.other.reference.link.markdown#8FBE93underline
string.regexp#9AAAB0—
invalid, invalid.illegal#C96569—
punctuation.decorator, meta.decorator, entity.name.function.decorator#6FA79C—
Adones Theme by Muhammad Ali Samejo - VS Code Theme