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#8FC79B
  • activityBar.background#252D33
  • activityBar.foreground#D0D6CF
  • activityBar.inactiveForeground#718079
  • activityBarBadge.background#8FC79B
  • activityBarBadge.foreground#252D33
  • badge.background#8FC79B
  • badge.foreground#202B32
  • button.background#4E7268
  • button.foreground#D8DED9
  • button.hoverBackground#5C8175
  • debugToolBar.background#3B4850
  • dropdown.background#3B4850
  • dropdown.border#43545D
  • dropdown.foreground#D0D6CF
  • editor.background#333C43
  • editor.findMatchBackground#DEBA6E35
  • editor.findMatchBorder#DEBA6E80
  • editor.findMatchHighlightBackground#8FC79B30
  • editor.foreground#D0D6CF
  • editor.inactiveSelectionBackground#617B8440
  • editor.lineHighlightBackground#38474F
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#617B8460
  • editor.selectionHighlightBackground#617B8440
  • editor.wordHighlightBackground#617B8440
  • editor.wordHighlightStrongBackground#617B8460
  • editorBracketHighlight.foreground1#8FC79B
  • editorBracketHighlight.foreground2#6E9FCB
  • editorBracketHighlight.foreground3#DEBA6E
  • editorBracketHighlight.foreground4#72AFA4
  • editorBracketHighlight.foreground5#B28F6F
  • editorBracketHighlight.foreground6#D58E6F
  • editorBracketHighlight.unexpectedBracket.foreground#D47778
  • editorBracketMatch.background#3E4E56
  • editorBracketMatch.border#72AFA480
  • editorCursor.foreground#8FC79B
  • editorError.foreground#D47778
  • editorGroup.border#435159
  • editorGroupHeader.tabsBackground#2C363D
  • editorGutter.addedBackground#8FC79B80
  • editorGutter.deletedBackground#D4777880
  • editorGutter.modifiedBackground#6E9FCB80
  • editorHoverWidget.background#3B4A52
  • editorHoverWidget.border#43545D
  • editorIndentGuide.activeBackground#5A6D75
  • editorIndentGuide.background#425159
  • editorInfo.foreground#72AFA4
  • editorLineNumber.activeForeground#B4C0B9
  • editorLineNumber.foreground#607078
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.errorForeground#D4777880
  • editorOverviewRuler.findMatchForeground#8FC79B80
  • editorOverviewRuler.infoForeground#72AFA480
  • editorOverviewRuler.warningForeground#DEBA6E80
  • editorSuggestWidget.background#3B4A52
  • editorSuggestWidget.border#43545D
  • editorSuggestWidget.foreground#D0D6CF
  • editorSuggestWidget.highlightForeground#8FC79B
  • editorSuggestWidget.selectedBackground#465862
  • editorWarning.foreground#DEBA6E
  • editorWhitespace.foreground#526169
  • editorWidget.background#3B4A52
  • editorWidget.border#43545D
  • focusBorder#8FC79B70
  • foreground#D0D6CF
  • gitDecoration.addedResourceForeground#8FC79B
  • gitDecoration.conflictingResourceForeground#D58E6F
  • gitDecoration.deletedResourceForeground#D47778
  • gitDecoration.ignoredResourceForeground#607078
  • gitDecoration.modifiedResourceForeground#6E9FCB
  • gitDecoration.untrackedResourceForeground#DEBA6E
  • input.background#3B4850
  • input.border#43545D
  • input.foreground#D0D6CF
  • input.placeholderForeground#718079
  • list.activeSelectionBackground#465762
  • list.activeSelectionForeground#D0D6CF
  • list.focusBackground#465762
  • list.highlightForeground#8FC79B
  • list.hoverBackground#3B4850
  • list.hoverForeground#D0D6CF
  • list.inactiveSelectionBackground#37454D
  • list.inactiveSelectionForeground#A8B3AD
  • menu.background#3B4850
  • menu.border#43545D
  • menu.foreground#D0D6CF
  • menu.selectionBackground#465762
  • menu.selectionForeground#D8DED9
  • minimap.background#2C363D
  • minimapSlider.activeBackground#8FC79B70
  • minimapSlider.background#56717A50
  • minimapSlider.hoverBackground#56717A70
  • notificationCenterHeader.background#3B4850
  • notificationCenterHeader.foreground#D0D6CF
  • notifications.background#3B4850
  • notifications.foreground#D0D6CF
  • notificationsErrorIcon.foreground#D47778
  • notificationsInfoIcon.foreground#72AFA4
  • notificationsWarningIcon.foreground#DEBA6E
  • panel.background#2C363D
  • panel.border#34434B
  • panelTitle.activeBorder#8FC79B
  • panelTitle.activeForeground#D0D6CF
  • panelTitle.inactiveForeground#718079
  • progressBar.background#8FC79B
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#8FC79B70
  • scrollbarSlider.background#56717A40
  • scrollbarSlider.hoverBackground#56717A70
  • sideBar.background#2B343B
  • sideBar.border#34434B
  • sideBar.foreground#A8B3AD
  • sideBarSectionHeader.background#333D44
  • sideBarSectionHeader.border#34434B
  • sideBarSectionHeader.foreground#A8B3AD
  • sideBarTitle.foreground#D0D6CF
  • statusBar.background#292F35
  • statusBar.border#34434B
  • statusBar.debuggingBackground#6E9FCB
  • statusBar.debuggingForeground#252D33
  • statusBar.foreground#9AA8A0
  • tab.activeBackground#38464E
  • tab.activeBorder#8FC79B
  • tab.activeForeground#D0D6CF
  • tab.border#252D33
  • tab.hoverBackground#3B4850
  • tab.hoverForeground#C2CBC5
  • tab.inactiveBackground#252D33
  • tab.inactiveForeground#718079
  • terminal.ansiBlack#29373F
  • terminal.ansiBlue#6E9FCB
  • terminal.ansiBrightBlack#607078
  • terminal.ansiBrightBlue#9AC0E0
  • terminal.ansiBrightCyan#8CC5BB
  • terminal.ansiBrightGreen#A3D3AC
  • terminal.ansiBrightMagenta#BAAEE0
  • terminal.ansiBrightRed#E08A8B
  • terminal.ansiBrightWhite#DEE3DF
  • terminal.ansiBrightYellow#E8C990
  • terminal.ansiCyan#72AFA4
  • terminal.ansiGreen#8FC79B
  • terminal.ansiMagenta#9C8FD1
  • terminal.ansiRed#D47778
  • terminal.ansiWhite#D0D6CF
  • terminal.ansiYellow#DEBA6E
  • terminal.background#2C363D
  • terminal.foreground#D0D6CF
  • terminalCursor.foreground#8FC79B
  • textLink.activeForeground#AECFB6
  • textLink.foreground#8FC79B
  • titleBar.activeBackground#292F35
  • titleBar.activeForeground#A8B3AD
  • titleBar.border#34434B
  • titleBar.inactiveBackground#292F35
  • titleBar.inactiveForeground#68766F
  • tree.indentGuidesStroke#425159
  • widget.shadow#00000040

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6B7A73—
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#6E9FCB—
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical#C2AD8E—
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#72AFA4—
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.class, entity.other.attribute-name.id#DEBA6E—
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#8FC79B—
constant.character.escape, constant.other.placeholder, variable.interpolation#DEBA6E—
entity.name.function, support.function, variable.function, meta.function, meta.function-call, meta.definition.method, entity.name.method#DEBA6E—
variable, variable.other, variable.other.readwrite, variable.parameter, variable.parameter.function#D0D6CF—
variable.other.property, variable.other.object.property, variable.object.property, meta.object-literal.key#C7D0C9—
constant.numeric, constant.numeric.integer, constant.numeric.float#D99E6C—
constant.language, constant.language.boolean, constant.language.null, constant.language.undefined, support.constant#D99E6C—
storage.type, support.type, entity.name.type, entity.name.class, support.class, entity.other.inherited-class#9C8FD1—
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less#72AFA4—
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#6E9FCB—
support.constant.property-value.css, meta.property-value.css, constant.numeric.css, keyword.other.unit#DEBA6E—
punctuation, punctuation.separator, punctuation.terminator, punctuation.accessor, meta.brace, meta.bracket, meta.delimiter#8FA098—
markup.heading, markup.bold, markup.italic#DEBA6E—
string.other.link, string.other.link.title.markdown, constant.other.reference.link.markdown#8FC79Bunderline
string.regexp#8FC79B—
invalid, invalid.illegal#D47778—
punctuation.decorator, meta.decorator, entity.name.function.decorator#72AFA4—
Adones Theme by Muhammad Ali Samejo - VS Code Theme