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#9CAB84
  • activityBar.activeFocusBorder#9CAB84
  • activityBar.background#171C12
  • activityBar.border#2A3122
  • activityBar.foreground#A8BE84
  • activityBar.inactiveForeground#6E7A56
  • activityBarBadge.background#89986D
  • activityBarBadge.foreground#21271A
  • badge.background#89986D
  • badge.foreground#21271A
  • breadcrumb.activeSelectionForeground#E6E2CC
  • breadcrumb.background#21271A
  • breadcrumb.focusForeground#E6E2CC
  • breadcrumb.foreground#8A9372
  • button.background#9CAB84
  • button.foreground#21271A
  • button.hoverBackground#89986D
  • button.secondaryBackground#3A4630
  • button.secondaryForeground#E6E2CC
  • button.secondaryHoverBackground#4A5638
  • contrastBorder#00000000
  • debugExceptionWidget.background#2E201C
  • debugExceptionWidget.border#E08A7A
  • debugToolBar.background#2A3122
  • dropdown.background#2A3122
  • dropdown.border#4A5638
  • dropdown.foreground#E6E2CC
  • editor.background#21271A
  • editor.foreground#E6E2CC
  • editor.inactiveSelectionBackground#9CAB8433
  • editor.lineHighlightBackground#2A3122
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#9CAB8433
  • editor.selectionBackground#9CAB8466
  • editor.selectionHighlightBackground#9CAB8444
  • editor.selectionHighlightBorder#00000000
  • editor.symbolHighlightBackground#9CAB8444
  • editor.wordHighlightBackground#9CAB8444
  • editor.wordHighlightStrongBackground#9CAB8466
  • editorBracketHighlight.foreground1#A8BE84
  • editorBracketHighlight.foreground2#9CC47E
  • editorBracketHighlight.foreground3#D8C9A0
  • editorBracketHighlight.unexpectedBracket.foreground#E08A7A
  • editorBracketMatch.background#9CAB8433
  • editorBracketMatch.border#9CAB84
  • editorCodeLens.foreground#7E8A6A
  • editorCursor.foreground#A8BE84
  • editorError.foreground#E08A7A
  • editorGroup.border#2A3122
  • editorGroupHeader.tabsBackground#1B2015
  • editorGroupHeader.tabsBorder#2A3122
  • editorGutter.background#21271A
  • editorHint.foreground#9CAB84
  • editorHoverWidget.background#2A3122
  • editorHoverWidget.border#9CAB84
  • editorIndentGuide.activeBackground#9CAB84
  • editorIndentGuide.background#3A4630
  • editorInfo.foreground#9CC47E
  • editorLineNumber.activeForeground#9CAB84
  • editorLineNumber.foreground#5E6A4A
  • editorLink.activeForeground#9CC47E
  • editorMarkerNavigation.background#2A3122
  • editorOverviewRuler.border#3A4630
  • editorOverviewRuler.commentForeground#9CAB84
  • editorOverviewRuler.currentContentForeground#9CAB84
  • editorOverviewRuler.findMatchForeground#E0B85E66
  • editorOverviewRuler.incomingContentForeground#9CAB84
  • editorOverviewRuler.rangeHighlightForeground#9CAB8466
  • editorRuler.foreground#3A4630
  • editorSuggestWidget.background#2A3122
  • editorSuggestWidget.border#9CAB84
  • editorSuggestWidget.foreground#E6E2CC
  • editorSuggestWidget.highlightForeground#9CC47E
  • editorSuggestWidget.selectedBackground#3A4630
  • editorWarning.foreground#E0B85E
  • editorWhitespace.foreground#3A4630
  • editorWidget.background#2A3122
  • editorWidget.border#9CAB84
  • editorWidget.foreground#E6E2CC
  • editorWidget.resizeBorder#9CAB84
  • focusBorder#9CAB84
  • gitDecoration.addedResourceForeground#9CC47E
  • gitDecoration.conflictingResourceForeground#C2A0C4
  • gitDecoration.deletedResourceForeground#E08A7A
  • gitDecoration.ignoredResourceForeground#7E8A6A
  • gitDecoration.modifiedResourceForeground#E0B85E
  • gitDecoration.untrackedResourceForeground#9CAB84
  • input.background#2A3122
  • input.border#4A5638
  • input.foreground#E6E2CC
  • input.placeholderForeground#7E8A6A
  • inputOption.activeBorder#9CAB84
  • inputValidation.errorBackground#2E201C
  • inputValidation.errorBorder#E08A7A
  • inputValidation.infoBackground#2A3122
  • inputValidation.infoBorder#9CAB84
  • inputValidation.warningBackground#2E2A1C
  • inputValidation.warningBorder#E0B85E
  • list.activeSelectionBackground#3A4630
  • list.activeSelectionForeground#F1EEDD
  • list.dropBackground#9CAB8466
  • list.errorForeground#E08A7A
  • list.focusBackground#2A3122
  • list.focusForeground#F1EEDD
  • list.highlightForeground#9CC47E
  • list.hoverBackground#2A3122
  • list.inactiveSelectionBackground#2A3122
  • list.inactiveSelectionForeground#E6E2CC
  • list.warningForeground#E0B85E
  • listFilterWidget.background#2A3122
  • listFilterWidget.border#9CAB84
  • listFilterWidget.noMatchesOutline#E08A7A
  • merge.commonHeaderBackground#7E8A6A66
  • merge.currentHeaderBackground#9CAB8466
  • merge.incomingHeaderBackground#9CAB8466
  • minimap.findMatchHighlight#9CAB84
  • minimap.selectionHighlight#9CAB8499
  • minimapGutter.addedBackground#9CC47E
  • minimapGutter.deletedBackground#E08A7A
  • minimapGutter.modifiedBackground#E0B85E
  • notebook.cellEditorBackground#252B1D
  • panel.background#1F2518
  • panel.border#2A3122
  • panelInput.border#4A5638
  • panelTitle.activeForeground#E6E2CC
  • panelTitle.inactiveForeground#8A9372
  • peekView.border#9CAB84
  • peekViewEditor.background#252B1D
  • peekViewEditorGutter.background#252B1D
  • peekViewResult.background#2A3122
  • peekViewResult.fileForeground#E6E2CC
  • peekViewResult.lineForeground#B9C0A4
  • peekViewResult.selectionBackground#3A4630
  • peekViewResult.selectionForeground#F1EEDD
  • peekViewTitle.background#1B2015
  • peekViewTitleDescription.foreground#8A9372
  • peekViewTitleLabel.foreground#E6E2CC
  • problemsError.foreground#E08A7A
  • problemsInfo.foreground#9CC47E
  • problemsWarning.foreground#E0B85E
  • progressBar.background#9CAB84
  • scrollbarSlider.activeBackground#AEBE8F
  • scrollbarSlider.background#9CAB8455
  • scrollbarSlider.hoverBackground#9CAB8499
  • settings.checkboxBackground#2A3122
  • settings.checkboxBorder#4A5638
  • settings.dropdownBackground#2A3122
  • settings.focusedRowBackground#2A3122
  • settings.headerForeground#E6E2CC
  • settings.modifiedItemIndicator#9CAB84
  • settings.numberInputBackground#2A3122
  • settings.rowHoverBackground#2A3122
  • settings.textInputBackground#2A3122
  • sideBar.background#1B2015
  • sideBar.border#2A3122
  • sideBar.foreground#B9C0A4
  • sideBarSectionHeader.background#1B2015
  • sideBarSectionHeader.border#2A3122
  • sideBarSectionHeader.foreground#B9C0A4
  • sideBarTitle.foreground#E6E2CC
  • statusBar.background#5E6E45
  • statusBar.border#4A5638
  • statusBar.debuggingBackground#3A4630
  • statusBar.foreground#F1EEDD
  • statusBar.noFolderBackground#5E6E45
  • statusBarItem.hoverBackground#6E7E52
  • statusBarItem.remoteBackground#3A4630
  • statusBarItem.remoteForeground#F1EEDD
  • tab.activeBackground#21271A
  • tab.activeBorder#9CAB84
  • tab.activeForeground#E6E2CC
  • tab.border#2A3122
  • tab.hoverBackground#2A3122
  • tab.inactiveBackground#1B2015
  • tab.inactiveForeground#8A9372
  • tab.unfocusedActiveBackground#21271A
  • tab.unfocusedActiveForeground#E6E2CC
  • tab.unfocusedInactiveBackground#1B2015
  • tab.unfocusedInactiveForeground#8A9372
  • terminal.ansiBlack#171C12
  • terminal.ansiBlue#8FB0C4
  • terminal.ansiBrightBlack#4A5638
  • terminal.ansiBrightBlue#A8C6D8
  • terminal.ansiBrightCyan#A8D6D2
  • terminal.ansiBrightGreen#B3D89A
  • terminal.ansiBrightMagenta#D4B6D6
  • terminal.ansiBrightRed#EFA097
  • terminal.ansiBrightWhite#F1EEDD
  • terminal.ansiBrightYellow#ECCB82
  • terminal.ansiCyan#8FC4C0
  • terminal.ansiGreen#9CC47E
  • terminal.ansiMagenta#C2A0C4
  • terminal.ansiRed#E08A7A
  • terminal.ansiWhite#E6E2CC
  • terminal.ansiYellow#E0B85E
  • terminal.background#21271A
  • terminal.foreground#E6E2CC
  • terminal.selectionBackground#9CAB8466
  • terminalCursor.foreground#A8BE84
  • textBlockQuote.background#2A3122
  • textBlockQuote.border#9CAB84
  • textLink.activeForeground#A8BE84
  • textLink.foreground#9CC47E
  • textPreformat.foreground#D8C9A0
  • textSeparator.foreground#4A5638
  • titleBar.activeBackground#1B2015
  • titleBar.activeForeground#E6E2CC
  • titleBar.border#2A3122
  • titleBar.inactiveBackground#171C12
  • titleBar.inactiveForeground#8A9372
  • walkThrough.embeddedEditorBackground#252B1D
  • widget.shadow#00000055

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#7E8A6Aitalic
string, string.quoted, string.template, punctuation.definition.string#D8C9A0—
constant.numeric, constant.language, constant.character, constant.other#E0B85E—
constant.language.boolean, constant.language.null#E0B85E—
keyword, keyword.control, keyword.other, keyword.operator.new, keyword.operator.expression#A8BE84—
keyword.operator, keyword.operator.relational, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.logical#A8BE84—
storage, storage.type, storage.modifier#A8BE84—
entity.name.function, support.function, variable.function, meta.function-call.method, meta.function-call.generic#9CC47E—
entity.name.type, entity.name.class, entity.other.inherited-class, support.type, support.class, support.type.primitive#B8CE92—
variable, variable.other, variable.other.readwrite, variable.other.object.property#E6E2CC—
variable.parameter, variable.other.constant, meta.definition.variable.name#E6E2CC—
variable.language, variable.language.self, variable.language.special, variable.language.this#A8BE84—
constant.language.import, entity.name.import, variable.import, support.type.module, support.module#9CC47E—
meta.decorator, punctuation.decorator, storage.type.annotation, meta.annotation#E0B85E—
punctuation, punctuation.definition, meta.brace, punctuation.separator, punctuation.terminator#8A9372—
string.regexp, constant.other.character-class, string.regexp constant.character.escape#D8C9A0—
markup.heading, markup.heading.setext#A8BE84bold
markup.bold#E6E2CCbold
markup.italic—italic
markup.underline.link, string.other.link#9CC47E—
markup.inline.raw, markup.raw, fenced_code.block#D8C9A0—
entity.name.tag, meta.tag entity.name.tag, punctuation.definition.tag#9CC47E—
entity.other.attribute-name, entity.other.attribute-name.class, entity.other.attribute-name.id#B8CE92—
support.type.property-name, support.type.property-name.css, meta.attribute-selector.css entity.other.attribute-name.class, meta.attribute-selector.css entity.other.attribute-name.id#A8BE84—
support.type.property-name.json, meta.structure.dictionary.key.json#A8BE84—
invalid, invalid.illegal#E08A7A—
Olive Dream Theme by lilin - VS Code Theme