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.

  • actionBar.toggledBackground#152035
  • activityBar.activeBorder#f1c40f
  • activityBar.background#0a1525
  • activityBar.foreground#d8dfe8
  • activityBarBadge.background#f1c40f
  • activityBarBadge.foreground#0a1525
  • breadcrumbs.activeSelectionForeground#d8dfe8
  • breadcrumbs.background#0a1525
  • breadcrumbs.focusForeground#d8dfe8
  • breadcrumbs.foreground#6b7c8f
  • button.background#f1c40f30
  • button.foreground#d8dfe8
  • button.hoverBackground#f1c40f50
  • debugConsole.fontFamilyMenlo, Monaco, 'Courier New', monospace
  • debugConsole.fontSize14
  • debugExceptionWidget.background#e74c3c20
  • debugExceptionWidget.border#e74c3c20
  • dropdown.background#050b15
  • dropdown.border#152035
  • dropdown.foreground#d8dfe8
  • editor.background#0a1525
  • editor.findMatchHighlightBackground#ffffff15
  • editor.foreground#d8dfe8
  • editor.hoverHighlightBackground#00d4ff30
  • editor.lineHighlightBackground#121e32
  • editor.selectionBackground#1a2a40
  • editor.stackFrameHighlightBackground#f1c40f20
  • editorBracketMatch.background#f1c40f20
  • editorBracketMatch.border#f1c40f
  • editorCursor.foreground#f1c40f
  • editorError.foreground#e74c3c
  • editorGroup.emptyBackground#0a1525
  • editorGroupHeader.border#152035
  • editorGroupHeader.noTabsBackground#0a1525
  • editorGroupHeader.tabsBackground#050b15
  • editorGutter.addedBackground#d8dfe8
  • editorGutter.background#0a1525
  • editorGutter.deletedBackground#e74c3c
  • editorGutter.modifiedBackground#f1c40f
  • editorHoverWidget.background#0a1525
  • editorHoverWidget.border#152035
  • editorHoverWidget.foreground#d8dfe8
  • editorIndentGuide.activeBackground#3d4a5c
  • editorIndentGuide.background#152035
  • editorInfo.foreground#00d4ff
  • editorLineNumber.activeForeground#8899aa
  • editorLineNumber.foreground#3d4a5c
  • editorOverviewRuler.errorForeground#e74c3c
  • editorOverviewRuler.infoForeground#00d4ff
  • editorOverviewRuler.warningForeground#f1c40f
  • editorPane.background#0a1525
  • editorSuggestWidget.background#0a1525
  • editorSuggestWidget.border#152035
  • editorSuggestWidget.highlightForeground#f1c40f
  • editorSuggestWidget.selectedBackground#152035
  • editorWarning.foreground#f1c40f
  • editorWidget.background#0a1525
  • editorWidget.border#152035
  • editorWordHighlightBackground#f1c40f15
  • editorWordHighlightStrongBackground#f1c40f30
  • extensionBadge.previewForeground#f1c40f
  • extensionBadge.remoteForeground#e74c3c
  • gitDecoration.addedResourceForeground#d8dfe8
  • gitDecoration.ignoredResourceForeground#3d4a5c
  • gitDecoration.modifiedResourceForeground#f1c40f
  • icon.foreground#6b7c8f
  • icon.hoverForeground#d8dfe8
  • input.background#050b15
  • input.border#152035
  • input.foreground#d8dfe8
  • input.placeholderForeground#4d5a6c
  • list.activeSelectionBackground#152035
  • list.errorForeground#e74c3c
  • list.hoverBackground#0d1828
  • menu.background#0a1525
  • menu.foreground#d8dfe8
  • menubar.selectionBackground#152035
  • menubar.selectionForeground#d8dfe8
  • minimap.background#050b15
  • minimapSlider.activeBackground#4d5a6c80
  • minimapSlider.background#15203580
  • minimapSlider.hoverBackground#3d4a5c80
  • panel.background#050b15
  • panelSectionHeader.background#0a1525
  • panelTitle.activeBorder#e74c3c
  • peekView.border#e74c3c
  • peekViewEditor.background#0a1525
  • peekViewEditorGutter.background#e74c3c
  • peekViewResult.background#050b15
  • peekViewResult.selectionBackground#152035
  • quickInput.background#050b15
  • quickInput.foreground#d8dfe8
  • quickInputList.focusBackground#152035
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#4d5a6c80
  • scrollbarSlider.background#15203580
  • scrollbarSlider.hoverBackground#3d4a5c80
  • sideBar.background#050b15
  • sidebars.background#050b15
  • sideBarSectionHeader.background#0a1525
  • sideBarTitle.foreground#6b7c8f
  • statusBar.background#0a1525
  • statusBar.debuggingBackground#f1c40f
  • statusBar.debuggingForeground#0a1525
  • statusBar.foreground#d8dfe8
  • statusBar.noFolderBackground#050b15
  • statusBar.noFolderForeground#d8dfe8
  • tab.actionBarBackground#0a1525
  • tab.activeBackground#0a1525
  • tab.activeBorder#f1c40f
  • tab.activeHorizontalBorder#152035
  • tab.hoverBackground#0d1828
  • tab.hoverForeground#d8dfe8
  • tab.inactiveBackground#050b15
  • tab.lastPinnedBorder#152035
  • tab.pinnedBackground#0a1525
  • tab.pinnedBorder#152035
  • tab.pinnedForeground#6b7c8f
  • tab.unfocusedActiveBorder#152035
  • tab.unfocusedHoverBackground#0a1525
  • tab.unfocusedHoverForeground#6b7c8f
  • tab.verticalDividerBorder#152035
  • terminal.ansiBlack#050b15
  • terminal.ansiBlue#00d4ff
  • terminal.ansiBrightBlack#152035
  • terminal.ansiBrightBlue#3498db
  • terminal.ansiBrightCyan#58d68d
  • terminal.ansiBrightGreen#58d68d
  • terminal.ansiBrightMagenta#3498db
  • terminal.ansiBrightRed#ff6b6b
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#f7dc6f
  • terminal.ansiCyan#d8dfe8
  • terminal.ansiGreen#d8dfe8
  • terminal.ansiMagenta#3498db
  • terminal.ansiRed#e74c3c
  • terminal.ansiWhite#d8dfe8
  • terminal.ansiYellow#f1c40f
  • terminal.foreground#d8dfe8
  • titleBar.activeBackground#0a1525
  • titleBar.activeForeground#d8dfe8
  • toolbar.activeBackground#152035
  • toolbar.hoverBackground#0d1828
  • workbench.background#0a1525

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#d8dfe8
emphasisitalic
strongbold
header#00d4ff
comment#4d5a6c
constant.language#00d4ff
constant.numeric, variable.other.enummember, keyword.operator.plus.exponent, keyword.operator.minus.exponent#f1c40f
constant.regexp#d8dfe8
entity.name.tag#00d4ff
entity.name.tag.css#d8dfe8
entity.other.attribute-name#3498db
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css, entity.other.attribute-name.id.css, entity.other.attribute-name.parent-selector.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css, source.css.less entity.other.attribute-name.id, entity.other.attribute-name.scss#d8dfe8
invalid#e74c3c
markup.underlineunderline
markup.bold#00d4ffbold
markup.heading#00d4ffbold
markup.italicitalic
markup.inserted#d8dfe8
markup.deleted#ff6b6b
markup.changed#00d4ff
punctuation.definition.quote.begin.markdown#4d5a6c
punctuation.definition.list.begin.markdown#d8dfe8
markup.inline.raw#ff6b6b
punctuation.definition.tag#4d5a6c
meta.preprocessor, entity.name.function.preprocessor#00d4ff
meta.preprocessor.string#ff6b6b
meta.preprocessor.numeric#f1c40f
meta.structure.dictionary.key.python#3498db
meta.diff.header#00d4ff
storage#00d4ff
storage.type#00d4ff
storage.modifier, keyword.operator.noexcept#00d4ff
string, meta.embedded.assembly#f1c40f
string.tag#f1c40f
string.value#f1c40f
string.regexp#d8dfe8
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#d8dfe8
meta.template.expression#3498db
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#3498db
punctuation#d8dfe8
punctuation.definition.begin, punctuation.definition.end, punctuation.definition.separator, punctuation.definition.delimiter, punctuation.definition.bracket, punctuation.definition.parenthesis, punctuation.definition braces, punctuation.section.braces, punctuation.section.parenthesis, punctuation.section.bracket, punctuation.definition.group, punctuation.definition.arguments, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.dictionary, punctuation.definition.object, punctuation.section.array, punctuation.section.dictionary, punctuation.section.function, punctuation.section.block, punctuation.definition.method, punctuation.section.method, punctuation.definition.call, punctuation.definition.invoke, meta.brackets, meta.group, meta.block, meta.method-call, meta.function-call#d8dfe8
keyword#e74c3c
keyword.control#e74c3c
keyword.operator#f1c40f
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.alignof, keyword.operator.typeid, keyword.operator.alignas, keyword.operator.instanceof, keyword.operator.logical.python, keyword.operator.wordlike#00d4ff
keyword.other.unit#f1c40f
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#d8dfe8
support.function.git-rebase#3498db
constant.sha.git-rebase#f1c40f
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#e74c3c
variable.language#00d4ff
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#d8dfe8
meta.return-type, support.class, support.type, entity.name.type, entity.name.namespace, entity.other.attribute, entity.name.scope-resolution, entity.name.class, storage.type.numeric.go, storage.type.byte.go, storage.type.boolean.go, storage.type.string.go, storage.type.uintptr.go, storage.type.error.go, storage.type.rune.go, storage.type.cs, storage.type.generic.cs, storage.type.modifier.cs, storage.type.variable.cs, storage.type.annotation.java, storage.type.generic.java, storage.type.java, storage.type.object.array.java, storage.type.primitive.array.java, storage.type.primitive.java, storage.type.token.java, storage.type.groovy, storage.type.annotation.groovy, storage.type.parameters.groovy, storage.type.generic.groovy, storage.type.object.array.groovy, storage.type.primitive.array.groovy, storage.type.primitive.groovy#00d4ff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#00d4ff
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator#e74c3c
variable, meta.definition.variable.name, support.variable, entity.name.variable#3498db
variable.other.constant, variable.other.enummember#3498db
meta.object-literal.key#3498db
support.constant.property-value, support.constant.font-name, support.constant.media-type, support.constant.media, constant.other.color.rgb-value, constant.other.rgb-value, support.constant.color#f1c40f
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, keyword.operator.negation.regexp, support.other.parenthesis.regexp#d8dfe8
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#d8dfe8
keyword.operator.or.regexp, keyword.control.anchor.regexp#d8dfe8
keyword.operator.quantifier.regexp#f1c40f
constant.character#00d4ff
constant.character.escape#f1c40f
entity.name.label#d8dfe8
token.info-token#00d4ff
token.warn-token#f1c40f
token.error-token#e74c3c
token.debug-token#00d4ff
StkngEsk Dark Theme By christianEsk by Christian Mena - VS Code Theme