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#19181b
  • activityBar.border#222124
  • activityBar.dropBorder#e3975d
  • activityBar.foreground#b1acb7aa
  • activityBar.inactiveForeground#b1acb744
  • activityBarBadge.background#e3975dff
  • activityBarBadge.foreground#19181b
  • background#19181b
  • badge.background#e3975d
  • badge.foreground#101013
  • button.background#e3975d
  • button.border#0000
  • button.foreground#101013
  • button.hoverBackground#eaa875
  • button.secondaryBackground#3a3940
  • button.secondaryForeground#b1acb7
  • checkbox.background#2e2d32
  • checkbox.border#504d5844
  • checkbox.foreground#e3975d
  • checkbox.selectBorder#0000
  • commandCenter.activeBackground#222124cc
  • commandCenter.activeBorder#222124
  • commandCenter.activeForeground#b3acb7aa
  • commandCenter.background#22212488
  • commandCenter.border#222124
  • commandCenter.inactiveBorder#0000
  • diffEditor.border#504d5822
  • diffEditor.diagonalFill#b1acb72a
  • diffEditor.insertedLineBackground#80ff4511
  • diffEditor.insertedTextBackground#80ff451c
  • diffEditor.insertedTextBorder#0000
  • diffEditor.move.border#0000
  • diffEditor.moveActive.border#0000
  • diffEditor.removedLineBackground#dd434322
  • diffEditor.removedTextBackground#dd43432f
  • diffEditor.removedTextBorder#0000
  • diffEditorGutter.insertedLineBackground#504d5833
  • diffEditorGutter.removedLineBackground#19181b77
  • dropdown.background#2e2d32
  • dropdown.border#504d5844
  • dropdown.listBackground#2e2d32
  • editor.background#222124
  • editor.findMatchBackground#FF646111
  • editor.findMatchBorder#FF6461aa
  • editor.findMatchHighlightBackground#FF646111
  • editor.findMatchHighlightBorder#FF6461aa
  • editor.foreground#a09891
  • editor.inactiveSelectionBackground#b1acb711
  • editor.lineHighlightBackground#504d5828
  • editor.lineHighlightBorder#0000
  • editor.selectionBackground#b1acb722
  • editor.selectionForeground#b1acb7aa
  • editor.selectionHighlightBackground#FF646144
  • editor.selectionHighlightBorder#FF646188
  • editor.wordHighlightBackground#b1acb744
  • editor.wordHighlightStrongBackground#b1acb722
  • editor.wordHighlightStrongBorder#b1acb733
  • editorBracketHighlight.foreground1#ebb164
  • editorBracketHighlight.foreground2#df5764
  • editorBracketHighlight.foreground3#56B6C2
  • editorBracketHighlight.foreground4#ebb164
  • editorBracketHighlight.foreground5#df5764
  • editorBracketHighlight.foreground6#56B6C2
  • editorCursor.background#19181b
  • editorCursor.foreground#FF6461
  • editorError.foreground#FF6461
  • editorGhostText.foreground#706d74aa
  • editorGroup.border#504d5888
  • editorGroup.dropBackground#7e798a2b
  • editorGroup.dropIntoPromptBackground#19181b
  • editorGroup.dropIntoPromptBorder#504d58
  • editorGroup.dropIntoPromptForeground#b1acb7
  • editorGroup.focusedEmptyBorder#0000
  • editorGroupHeader.border#0000
  • editorGroupHeader.tabsBackground#19181b
  • editorHoverWidget.border#504d58aa
  • editorIndentGuide.activeBackground#b1acb722
  • editorIndentGuide.background#b1acb711
  • editorInlayHint.background#2e2d32
  • editorInlayHint.foreground#b1acb799
  • editorLineNumber.activeForeground#b1acb7
  • editorLineNumber.dimmedForeground#b1acb733
  • editorLineNumber.foreground#b1acb755
  • editorOverviewRuler.border#222124
  • editorRuler.foreground#b1acb711
  • editorStickyScroll.background#222124
  • editorStickyScrollHover.background#3a3940
  • editorSuggestWidget.background#222124
  • editorSuggestWidget.border#504d5844
  • editorSuggestWidget.focusHighlightForeground#e3975d
  • editorSuggestWidget.foreground#b1acb7aa
  • editorSuggestWidget.highlightForeground#b1acb7
  • editorSuggestWidget.selectedBackground#e3975d44
  • editorSuggestWidget.selectedForeground#b3acb7
  • editorSuggestWidget.selectedIconForeground#e3975d
  • editorWidget.background#2e2d32
  • editorWidget.border#504d58
  • editorWidget.foreground#b1acb7
  • editorWidget.resizeBorder#504d58
  • focusBorder#e3975d
  • foreground#b1acb7
  • gitDecoration.addedResourceForeground#96ab4f
  • gitDecoration.conflictingResourceForeground#FF6461
  • gitDecoration.deletedResourceForeground#FF6461
  • gitDecoration.ignoredResourceForeground#b1acb766
  • gitDecoration.modifiedResourceForeground#a18073
  • gitDecoration.renamedResourceForeground#5d78aa
  • gitDecoration.stageDeletedResourceForeground#ff3b38
  • gitDecoration.stageModifiedResourceForeground#a18073
  • gitDecoration.untrackedResourceForeground#96ab4f
  • icon.foreground#b1acb788
  • input.background#2e2d32
  • input.border#3a3940
  • input.foreground#b1acb7
  • input.placeholderForeground#b1acb788
  • keybindingLabel.background#504d58
  • keybindingLabel.border#504d58
  • keybindingLabel.foreground#b3acb7
  • list.activeSelectionBackground#504d5866
  • list.dropBackground#7e798a2b
  • list.errorForeground#FF6461
  • list.filterMatchBackground#FF646144
  • list.filterMatchBorder#FF6461bb
  • list.focusBackground#504d5844
  • list.focusOutline#0000
  • list.highlightForeground#e3975d
  • list.hoverBackground#3a394088
  • list.inactiveSelectionBackground#2e2d3266
  • list.inactiveSelectionForeground#b1acb7aa
  • list.inactiveSelectionIconForeground#b1acb7
  • list.warningForeground#FFAD6E
  • listFilterWidget.background#2e2d32
  • minimap.errorHighlight#FF6461
  • minimap.findMatchHighlight#FF6461
  • minimap.foregroundOpacity#000000
  • minimap.selectionHighlight#b1acb766
  • minimap.warningHighlight#FFAD6E
  • minimapSlider.background#b1acb71a
  • notificationCenter.border#504d58
  • notificationCenterHeader.background#3a3940
  • notifications.background#2e2d32
  • notifications.border#0000
  • notifications.foreground#b1acb7
  • notificationsErrorIcon.foreground#FF6461
  • notificationsInfoIcon.foreground#b1acb7
  • notificationsWarningIcon.foreground#FFAD6E
  • notificationToast.border#0000
  • panel.background#1c1b1e
  • panel.border#504d5855
  • panel.dropBorder#e3975d
  • panelInput.border#504d5844
  • panelSection.border#504d5844
  • panelSection.dropBackground#7e798a2b
  • panelSectionHeader.background#504d5844
  • panelSectionHeader.border#0000
  • panelTitle.activeBorder#504d5888
  • panelTitle.activeForeground#b1acb7
  • panelTitle.inactiveForeground#b1acb788
  • pickerGroup.border#504d58
  • pickerGroup.foreground#b1acb7
  • quickInput.background#2e2d32
  • quickInput.foreground#b1acb7
  • quickInputList.focusForeground#e3975d
  • scrollbar.shadow#19181b
  • scrollbarSlider.activeBackground#504d58cc
  • scrollbarSlider.background#504d5866
  • scrollbarSlider.hoverBackground#504d5899
  • selection.background#b1acb766
  • sideBar.background#19181b
  • sideBar.border#0000
  • sideBar.dropBackground#7e798a2b
  • sideBar.foreground#b1acb7aa
  • sideBarSectionHeader.background#222124ab
  • sideBarSectionHeader.border#0000
  • sideBarSectionHeader.foreground#b1acb788
  • sideBarTitle.foreground#b1acb788
  • sideBySideEditor.horizontalBorder#0000
  • sideBySideEditor.verticalBorder#0000
  • statusBar.background#19181b
  • statusBar.border#222124
  • statusBar.debuggingBackground#2e2d32
  • statusBar.debuggingBorder#0000
  • statusBar.foreground#b1acb7aa
  • statusBar.noFolderBackground#19181b
  • statusBar.noFolderForeground#b1acb7aa
  • statusBarItem.hoverBackground#504d5866
  • statusBarItem.hoverForeground#b1acb7
  • statusBarItem.remoteBackground#19181b
  • statusBarItem.remoteForeground#b3acb7
  • statusBarItem.remoteHoverBackground#504d5866
  • statusBarItem.remoteHoverForeground#b3acb7
  • symbolIcon.arrayForeground#b1acb7
  • symbolIcon.booleanForeground#b1acb7
  • symbolIcon.classForeground#71a0ff
  • symbolIcon.colorForeground#b1acb7
  • symbolIcon.constantForeground#b1acb7
  • symbolIcon.constructorForeground#b1acb7
  • symbolIcon.enumeratorForeground#b1acb7
  • symbolIcon.enumeratorMemberForeground#b1acb7
  • symbolIcon.eventForeground#b1acb7
  • symbolIcon.fieldForeground#b1acb7
  • symbolIcon.fileForeground#b1acb7
  • symbolIcon.folderForeground#b1acb7
  • symbolIcon.functionForeground#f19355
  • symbolIcon.interfaceForeground#71a0ff
  • symbolIcon.keyForeground#b1acb7
  • symbolIcon.keywordForeground#f19355
  • symbolIcon.methodForeground#f19355
  • symbolIcon.moduleForeground#b1acb7
  • symbolIcon.namespaceForeground#71a0ff
  • symbolIcon.nullForeground#b1acb7
  • symbolIcon.numberForeground#b1acb7
  • symbolIcon.objectForeground#ffd68e
  • symbolIcon.operatorForeground#b1acb7
  • symbolIcon.packageForeground#b1acb7
  • symbolIcon.propertyForeground#b1acb7
  • symbolIcon.referenceForeground#b1acb7
  • symbolIcon.snippetForeground#b1acb7
  • symbolIcon.stringForeground#b1acb7
  • symbolIcon.structForeground#b1acb7
  • symbolIcon.textForeground#b1acb7
  • symbolIcon.typeParameterForeground#b1acb7
  • symbolIcon.unitForeground#b1acb7
  • symbolIcon.variableForeground#b1acb7
  • tab.activeBackground#222124
  • tab.activeBorder#0000
  • tab.activeBorderTop#0000
  • tab.activeForeground#b1acb7
  • tab.activeModifiedBorder#0000
  • tab.border#0000
  • tab.hoverBackground#222124aa
  • tab.hoverBorder#0000
  • tab.inactiveBackground#19181b
  • tab.inactiveForeground#b1acb788
  • tab.inactiveModifiedBorder#0000
  • tab.lastPinnedBorder$0000
  • tab.unfocusedActiveBorder#0000
  • tab.unfocusedActiveBorderTop#0000
  • tab.unfocusedActiveModifiedBorder#0000
  • tab.unfocusedHoverBorder#0000
  • tab.unfocusedInactiveModifiedBorder#0000
  • terminal.ansiBlack#3f3c37
  • terminal.ansiBlue#449af6
  • terminal.ansiBrightBlack#6a665e
  • terminal.ansiBrightBlue#90c6ff
  • terminal.ansiBrightCyan#60e7c1
  • terminal.ansiBrightGreen#a6f170
  • terminal.ansiBrightMagenta#df6cca
  • terminal.ansiBrightRed#ff7f7f
  • terminal.ansiBrightWhite#f1eadd
  • terminal.ansiBrightYellow#ffcb71
  • terminal.ansiCyan#23b68c
  • terminal.ansiGreen#73b941
  • terminal.ansiMagenta#c428a8
  • terminal.ansiRed#d53a2f
  • terminal.ansiWhite#c4bcaf
  • terminal.ansiYellow#dda94f
  • terminal.border#504d5833
  • terminal.dropBackground#7e798a2b
  • terminal.foreground#c4bcaf
  • terminal.tab.activeBorder#e3975ddd
  • textLink.activeForeground#eaa875
  • textLink.foreground#e3975d
  • titleBar.activeBackground#19181b
  • titleBar.activeForeground#b1acb777
  • titleBar.border#222124
  • titleBar.inactiveBackground#19181b
  • titleBar.inactiveForeground#b1acb733
  • tree.inactiveIndentGuidesStroke#504d5833
  • tree.indentGuidesStroke#504d5877
  • tree.tableColumnsBorder#504d5888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#706d74
string, string.quoted.double punctuation, string.quoted.single punctuation, punctuation.definition.string#9ebb4e
meta.template.expression punctuation.definition#f15e6c
constant.character.escape#56B6C2
constant.other.color#56B6C2
string.regexp, string.regexp constant.other.character-class.regexp, string.regexp constant.character.escape.backslash.regexp, string.regexp constant.other.character-class.set.regexp, string.regexp keyword.operator.quantifier.regexp, string.regexp keyword.control.anchor.regexp#56B6C2
punctuation.definition.character-class.regexp, punctuation.definition.group.regexp, string.regexp keyword.operator#56B6C2
keyword.operator.quantifier.regexp#ebb164
keyword.operator#a09891
punctuation#a09891
keyword.operator.expression#da4e94
keyword, keyword.operator.new#da4e94
storage#da4e94
support.function#dc8357
keyword.other.special-method#da4e94
variable, support.variable, entity.name.tag#f15e6c
meta.import#f15e6c
constant, support.constant, variable.other.constant.property#ebb164
variable.parameter#a09891
punctuation.definition.alias, punctuation.definition.anchor#da4e94
support.type.property-name#a09891
entity.name.function#dc8357
entity.name.type, entity.other.inherited-class, support.class#5ba2f4
entity.name.type.module#9ebb4e
support.type#56B6C2
storage.type.primitive#da4e94
entity.other.attribute-name#ebb164
keyword.other.unit#ebb164
keyword.operator.expression.typeof.ts, keyword.operator.expression.typeof.js, keyword.operator.expression.delete.ts, keyword.operator.expression.delete.js, keyword.operator.expression.void.ts, keyword.operator.expression.void.js#56B6C2
variable.other.constant.js, variable.other.constant.ts#ebb164
meta.object-literal.key.js, meta.object-literal.key.ts#f15e6c
variable.other.readwrite.js, variable.other.readwrite.ts#a09891
variable.other.object.js, variable.other.object.ts#a09891
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#f15e6c
support.type.object.module.js, support.type.object.module.ts#f15e6c
string.regexp.js punctuation.definition.string, string.regexp.ts punctuation.definition.string#56B6C2
meta.template.expression.js meta.brace.round, meta.template.expression.ts meta.brace.round, meta.template.expression.js variable.other.object.js, meta.template.expression.ts variable.other.object.ts#dc8357
storage.type.numeric.bigint.ts, storage.type.numeric.bigint.js, constant.numeric.hex.ts, constant.numeric.hex.js, constant.numeric.octal.ts, constant.numeric.octal.js, constant.numeric.binary.ts, constant.numeric.binary.js#56B6C2
punctuation.definition.constant.css#ebb164
punctuation.definition.entity.css#ebb164
support.constant.property-value.css#a09891
punctuation.definition.variable.css#f15e6c
punctuation.definition.entity.css#ebb164
constant.other.color#ebb164
punctuation.definition.variable.less#f15e6c
punctuation.definition.keyword.less#da4e94
variable.other.object.cs, variable.other.object.property.cs#a09891
variable.other.readwrite.cs#a09891
entity.name.variable.field.cs#f15e6c
entity.name.type.namespace.cs#a09891
support.function#dc8357
source.java storage.type#5ba2f4
support.type.property-name.json, support.type.property-name.json punctuation#f15e6c
constant.language.json#56B6C2
entity.name.section.markdown, punctuation.definition.heading.markdown#f15e6c
markup.underline.link.image.markdown, markup.underline.link.markdown, punctuation.definition.metadata.markdown#da4e94
string.other.link.description.markdown, string.other.link.title.markdown#dc8357
markup.bold, punctuation.definition.bold.markdown#ebb164
markup.italic, punctuation.definition.italic.markdown#da4e94
punctuation.definition.variable.php#f15e6c
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#56B6C2
punctuation.definition.decorator.python, entity.name.function.decorator.python, support.type.python#56B6C2
meta.function-call.python, support.function.builtin.python#dc8357
meta.function-call.arguments.python#a09891
keyword.operator.logical.python#da4e94
punctuation.section.embedded.begin.ruby, punctuation.section.embedded.end.ruby, meta.embedded.line.ruby#f15e6c
support.function.kernel.ruby#56B6C2
variable.other.constant.ruby#ebb164
string.regexp.classic.ruby, punctuation.definition.string.ruby, punctuation.section.regexp.ruby#56B6C2
constant.language.symbol.hashkey.ruby#f15e6c
constant.language.symbol.ruby#a09891
entity.name.type.rust#5ba2f4
entity.name.type.primitive.rust#56B6C2
meta.definition.property.tsx variable#a09891
punctuation.definition.alias.yaml, punctuation.definition.anchor.yaml#a09891
entity.name.type.anchor.yaml, variable.other.alias.yaml#dc8357

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Stella One Theme - Coding Theme