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#d99b6c
  • activityBar.background#0c0b0a
  • activityBar.border#262220
  • activityBar.foreground#ebe8e2
  • activityBar.inactiveForeground#5a5651
  • activityBarBadge.background#d99b6c
  • activityBarBadge.foreground#100e0d
  • badge.background#d99b6c
  • badge.foreground#100e0d
  • breadcrumb.activeSelectionForeground#ebe8e2
  • breadcrumb.background#100e0d
  • breadcrumb.focusForeground#d0cec8
  • breadcrumb.foreground#7a7670
  • button.background#d99b6c
  • button.foreground#100e0d
  • button.hoverBackground#e6a373
  • button.secondaryBackground#1c1916
  • button.secondaryForeground#d0cec8
  • button.secondaryHoverBackground#262220
  • checkbox.background#16130f
  • checkbox.border#262220
  • checkbox.foreground#ebe8e2
  • debugExceptionWidget.background#16130f
  • debugExceptionWidget.border#262220
  • debugToolBar.background#16130f
  • diffEditor.border#262220
  • diffEditor.insertedLineBackground#a4c9a415
  • diffEditor.insertedTextBackground#a4c9a420
  • diffEditor.removedLineBackground#e08a8a15
  • diffEditor.removedTextBackground#e08a8a20
  • dropdown.background#16130f
  • dropdown.border#262220
  • dropdown.foreground#d0cec8
  • editor.background#100e0d
  • editor.findMatchBackground#d99b6c60
  • editor.findMatchBorder#d99b6c
  • editor.findMatchHighlightBackground#d99b6c30
  • editor.findMatchHighlightBorder#d99b6c60
  • editor.findRangeHighlightBackground#26222030
  • editor.foreground#d0cec8
  • editor.hoverHighlightBackground#26222050
  • editor.inactiveSelectionBackground#3a343030
  • editor.lineHighlightBackground#16130f
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#26222030
  • editor.selectionBackground#3a3430
  • editor.selectionHighlightBackground#3a343040
  • editor.selectionHighlightBorder#b0a89c40
  • editor.wordHighlightBackground#b0a89c30
  • editor.wordHighlightStrongBackground#b0a89c50
  • editorBracketMatch.background#d99b6c30
  • editorBracketMatch.border#d99b6c
  • editorCodeLens.foreground#7a7670
  • editorCursor.background#100e0d
  • editorCursor.foreground#d99b6c
  • editorError.background#e08a8a15
  • editorError.border#00000000
  • editorError.foreground#e08a8a
  • editorGroup.border#262220
  • editorGroup.emptyBackground#100e0d
  • editorGroupHeader.border#262220
  • editorGroupHeader.tabsBackground#0c0b0a
  • editorGroupHeader.tabsBorder#262220
  • editorGutter.addedBackground#a4c9a4
  • editorGutter.background#100e0d
  • editorGutter.deletedBackground#e08a8a
  • editorGutter.modifiedBackground#e8c78a
  • editorHint.foreground#a4c9a4
  • editorHoverWidget.background#16130f
  • editorHoverWidget.border#262220
  • editorHoverWidget.foreground#d0cec8
  • editorIndentGuide.activeBackground1#38322c
  • editorIndentGuide.background1#1e1b18
  • editorInfo.background#a4c9a415
  • editorInfo.border#00000000
  • editorInfo.foreground#a4c9a4
  • editorLineNumber.activeForeground#a5a29c
  • editorLineNumber.foreground#4d4a45
  • editorLink.activeForeground#d99b6c
  • editorRuler.foreground#1a1815
  • editorSuggestWidget.background#16130f
  • editorSuggestWidget.border#262220
  • editorSuggestWidget.foreground#d0cec8
  • editorSuggestWidget.highlightForeground#d99b6c
  • editorSuggestWidget.selectedBackground#262220
  • editorSuggestWidget.selectedForeground#ebe8e2
  • editorWarning.background#e8c78a15
  • editorWarning.border#00000000
  • editorWarning.foreground#e8c78a
  • editorWhitespace.foreground#262220
  • editorWidget.background#16130f
  • editorWidget.border#262220
  • editorWidget.foreground#d0cec8
  • editorWidget.resizeBorder#d99b6c
  • focusBorder#d99b6c
  • foreground#d0cec8
  • gitDecoration.addedResourceForeground#a4c9a4
  • gitDecoration.conflictingResourceForeground#d4a5e0
  • gitDecoration.deletedResourceForeground#e08a8a
  • gitDecoration.ignoredResourceForeground#5a5651
  • gitDecoration.modifiedResourceForeground#e8c78a
  • gitDecoration.renamedResourceForeground#d99b6c
  • gitDecoration.submoduleResourceForeground#a5a29c
  • gitDecoration.untrackedResourceForeground#a4c9a4
  • icon.foreground#7a7670
  • input.background#16130f
  • input.border#262220
  • input.foreground#ebe8e2
  • input.placeholderForeground#7a7670
  • inputOption.activeBackground#262220
  • inputOption.activeBorder#d99b6c
  • inputOption.activeForeground#ebe8e2
  • list.activeSelectionBackground#262220
  • list.activeSelectionForeground#ebe8e2
  • list.dropBackground#d99b6c30
  • list.errorForeground#e08a8a
  • list.focusBackground#262220
  • list.focusForeground#ebe8e2
  • list.highlightForeground#d99b6c
  • list.hoverBackground#16130f
  • list.hoverForeground#ebe8e2
  • list.inactiveSelectionBackground#1c1916
  • list.inactiveSelectionForeground#d0cec8
  • list.warningForeground#e8c78a
  • menu.background#16130f
  • menu.border#262220
  • menu.foreground#d0cec8
  • menu.selectionBackground#262220
  • menu.selectionForeground#ebe8e2
  • menu.separatorBackground#262220
  • menubar.selectionBackground#1c1916
  • menubar.selectionForeground#ebe8e2
  • merge.commonContentBackground#5a565120
  • merge.commonHeaderBackground#5a565140
  • merge.currentContentBackground#a4c9a420
  • merge.currentHeaderBackground#a4c9a440
  • merge.incomingContentBackground#d4a5e020
  • merge.incomingHeaderBackground#d4a5e040
  • minimap.background#100e0d
  • minimap.errorHighlight#e08a8a
  • minimap.findMatchHighlight#d99b6c60
  • minimap.selectionHighlight#3a3430
  • minimap.warningHighlight#e8c78a
  • minimapGutter.addedBackground#a4c9a4
  • minimapGutter.deletedBackground#e08a8a
  • minimapGutter.modifiedBackground#e8c78a
  • notificationCenter.border#262220
  • notificationCenterHeader.background#16130f
  • notificationCenterHeader.foreground#ebe8e2
  • notifications.background#16130f
  • notifications.border#262220
  • notifications.foreground#d0cec8
  • notificationToast.border#262220
  • panel.background#100e0d
  • panel.border#262220
  • panelTitle.activeBorder#d99b6c
  • panelTitle.activeForeground#ebe8e2
  • panelTitle.inactiveForeground#7a7670
  • peekView.border#d99b6c
  • peekViewEditor.background#100e0d
  • peekViewEditor.matchHighlightBackground#d99b6c40
  • peekViewEditorGutter.background#100e0d
  • peekViewResult.background#16130f
  • peekViewResult.fileForeground#ebe8e2
  • peekViewResult.lineForeground#7a7670
  • peekViewResult.matchHighlightBackground#d99b6c40
  • peekViewResult.selectionBackground#262220
  • peekViewResult.selectionForeground#ebe8e2
  • peekViewTitle.background#16130f
  • peekViewTitleDescription.foreground#7a7670
  • peekViewTitleLabel.foreground#ebe8e2
  • pickerGroup.border#262220
  • pickerGroup.foreground#d99b6c
  • problemsErrorIcon.foreground#e08a8a
  • problemsInfoIcon.foreground#a4c9a4
  • problemsWarningIcon.foreground#e8c78a
  • progressBar.background#d99b6c
  • radio.activeBackground#262220
  • radio.activeBorder#d99b6c
  • radio.activeForeground#ebe8e2
  • radio.inactiveBorder#38322c
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#4a443ea0
  • scrollbarSlider.background#26222050
  • scrollbarSlider.hoverBackground#38322c80
  • selection.background#3a3430
  • sideBar.background#100e0d
  • sideBar.border#262220
  • sideBar.dropBackground#d99b6c30
  • sideBar.foreground#d0cec8
  • sideBarSectionHeader.background#16130f
  • sideBarSectionHeader.border#262220
  • sideBarSectionHeader.foreground#ebe8e2
  • sideBarTitle.foreground#d0cec8
  • statusBar.background#0c0b0a
  • statusBar.border#262220
  • statusBar.debuggingBackground#d99b6c
  • statusBar.debuggingForeground#100e0d
  • statusBar.foreground#d0cec8
  • statusBar.noFolderBackground#0c0b0a
  • statusBar.noFolderForeground#d0cec8
  • statusBarItem.activeBackground#262220
  • statusBarItem.errorBackground#e08a8a
  • statusBarItem.errorForeground#100e0d
  • statusBarItem.hoverBackground#1c1916
  • statusBarItem.remoteBackground#d99b6c
  • statusBarItem.remoteForeground#100e0d
  • statusBarItem.warningBackground#e8c78a
  • statusBarItem.warningForeground#100e0d
  • tab.activeBackground#100e0d
  • tab.activeBorder#d99b6c
  • tab.activeBorderTop#00000000
  • tab.activeForeground#ebe8e2
  • tab.border#262220
  • tab.hoverBackground#16130f
  • tab.hoverForeground#ebe8e2
  • tab.inactiveBackground#0c0b0a
  • tab.inactiveForeground#7a7670
  • tab.unfocusedActiveBackground#100e0d
  • tab.unfocusedActiveForeground#a5a29c
  • tab.unfocusedInactiveForeground#5a5651
  • terminal.ansiBlack#262220
  • terminal.ansiBlue#b8a0e0
  • terminal.ansiBrightBlack#5a5651
  • terminal.ansiBrightBlue#d0b8e8
  • terminal.ansiBrightCyan#e0d4b8
  • terminal.ansiBrightGreen#b8d9b8
  • terminal.ansiBrightMagenta#e0c0e8
  • terminal.ansiBrightRed#f0a0a0
  • terminal.ansiBrightWhite#ebe8e2
  • terminal.ansiBrightYellow#f0d9a4
  • terminal.ansiCyan#c8b89c
  • terminal.ansiGreen#a4c9a4
  • terminal.ansiMagenta#d4a5e0
  • terminal.ansiRed#e08a8a
  • terminal.ansiWhite#d0cec8
  • terminal.ansiYellow#e8c78a
  • terminal.background#100e0d
  • terminal.foreground#d0cec8
  • terminal.selectionBackground#3a3430
  • terminalCursor.background#100e0d
  • terminalCursor.foreground#d99b6c
  • textBlockQuote.background#16130f
  • textBlockQuote.border#d99b6c
  • textCodeBlock.background#16130f
  • textLink.activeForeground#e6a373
  • textLink.foreground#d99b6c
  • textPreformat.foreground#e8c78a
  • titleBar.activeBackground#0c0b0a
  • titleBar.activeForeground#d0cec8
  • titleBar.border#262220
  • titleBar.inactiveBackground#0c0b0a
  • titleBar.inactiveForeground#7a7670
  • tree.inactiveIndentGuidesStroke#1a1815
  • tree.indentGuidesStroke#262220
  • widget.shadow#00000060

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#6e6a63italic
comment markup.link, comment markup.underline.link#d99b6c—
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.expression.delete, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.typeof, keyword.operator.expression.void, keyword.operator.expression.instanceof, keyword.operator.expression.keyof, keyword.operator.ternary, keyword.operator.optional#e6a373—
storage, storage.type, storage.modifier#d99263—
keyword.control.import, keyword.control.from, keyword.control.export, keyword.control.module, keyword.operator.module, import.storage.java, token.package.keyword#e6a373—
entity.name.function, support.function, meta.require, support.function.any-method, variable.function, meta.function-call.generic.python, support.function.console#e08a8a—
keyword.other.special-method, meta.method#e08a8a—
entity.name.type, entity.name.class, support.class, support.type, entity.name.type.class, entity.name.type.namespace, entity.other.inherited-class, support.type.primitive, support.type.primitive.ts, support.type.builtin.ts, entity.name.type.module#b8a0e0italic
entity.name.namespace, support.type.object.module, support.module.node, support.type.object.console, support.type.object.dom, support.type.prelude.elm#b8a0e0—
variable, variable.other.readwrite, variable.other.constant, variable.language, variable.other.property, meta.object-literal.key, support.variable.property, support.variable.object.process, support.variable.object.node#d0cec8—
variable.parameter, meta.parameter, variable.parameter.function, variable.parameter.function.language.python, variable.parameter.function.language.special.self.python#a5a29c—
variable.language.this, variable.language.super, variable.language.special.self, variable.language.special#e6a373italic
string, string.quoted, string.unquoted#a4c9a4—
constant.character.escape, constant.other.character-class.regexp, constant.character.format.placeholder.other.python#e8c78a—
string.regexp, string.regexp.js, string.regexp.ts#e08a8a—
constant.numeric, constant.numeric.json#e8c78a—
constant, constant.language, constant.other.symbol, support.constant, support.constant.math, support.constant.property.math, support.constant.json, support.constant.property-value#e8c78a—
keyword.operator, keyword.operator.arithmetic, keyword.operator.assignment, keyword.operator.bitwise, keyword.operator.comparison, keyword.operator.logical, keyword.operator.relational, keyword.operator.assignment.compound, keyword.operator.sizeof, keyword.operator.sigil.rust, keyword.operator.misc.rust, keyword.operator.channel, keyword.operator.quantifier.regexp, keyword.operator.type.php, keyword.operator.logical.python#b0a89c—
punctuation, punctuation.separator, punctuation.terminator, punctuation.section, punctuation.definition, meta.brace, punctuation.section.embedded.begin, punctuation.section.embedded.end#a5a29c—
entity.name.tag, entity.name.tag.html, entity.name.tag.xml, meta.tag, punctuation.definition.tag#e6a373—
entity.other.attribute-name, entity.other.attribute-name.html, entity.other.attribute-name.xml, entity.other.attribute-name.class.css, entity.other.attribute-name.id, entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#a5a29c—
support.type.property-name.css, support.type.vendored.property-name.css#d99263—
entity.name.selector.css, selector.sass, meta.selector#e08a8a—
keyword.other.unit, support.constant.color.w3c-standard-color-name.css, support.constant.color.w3c-standard-color-name.scss, support.constant.font-name#e8c78a—
support.type.property-name.json, support.type.property-name.jsonc, entity.name.tag.yaml, source.json meta.structure.dictionary.json > string.quoted.json, source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#e08a8a—
entity.name.function.decorator, meta.decorator, meta.function.decorator.python, punctuation.definition.decorator, storage.type.annotation.java#d4a5e0italic
markup.heading, markup.heading.markdown, punctuation.definition.heading.markdown, markup.heading.setext, entity.name.section#e6a373bold
markup.bold, punctuation.definition.bold#ebe8e2bold
markup.italic, punctuation.definition.italic, emphasis#ebe8e2italic
markup.underline.link, markup.underline.link.image.markdown, punctuation.definition.metadata.markdown#d99b6c—
markup.inline.raw, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown#a4c9a4—
markup.quote.markdown#7a7670italic
markup.list, punctuation.definition.list#e6a373—
markup.inserted, markup.inserted.diff, punctuation.definition.inserted.diff#a4c9a4—
markup.deleted, markup.deleted.diff, punctuation.definition.deleted.diff#e08a8a—
markup.changed, meta.diff.header, punctuation.definition.from-file.diff, punctuation.definition.to-file.diff#7a7670—
invalid, invalid.illegal#e08a8aitalic
invalid.deprecated, invalid.broken, invalid.unimplemented#e8c78a—
unnecessary, editorUnnecessaryCode#5a5651—
storage.modifier.lifetime.rust, entity.name.lifetime.rust#a5a29c—
variable.other.php, variable.other.global.php#d0cec8—
meta.function-call.generic.python, meta.function.decorator.identifier.python, support.token.decorator.python#e08a8a—
entity.name.package.go#b8a0e0italic
Sirius Themes by VLMADev - VS Code Theme