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#333842
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#528bff
  • activityBarBadge.foreground#d7dae0
  • badge.background#528bff
  • badge.foreground#d7dae0
  • button.background#4d78cc
  • button.foreground#ffffff
  • button.hoverBackground#6087cf
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#353b45
  • dropdown.border#181a1f
  • editor.background#282c34
  • editor.findMatchHighlightBackground#528bff3d
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#99bbff0a
  • editor.selectionBackground#3e4451
  • editorCursor.foreground#528bff
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#21252b
  • editorHoverWidget.background#21252b
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#626772
  • editorIndentGuide.background#abb2bf26
  • editorInlayHint.background#2c313a
  • editorInlayHint.foreground#636e83
  • editorLineNumber.activeForeground#abb2bf
  • editorLineNumber.foreground#636d83
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWhitespace.foreground#abb2bf26
  • editorWidget.background#21252b
  • editorWidget.border#3a3f4b
  • extensionButton.prominentBackground#2ba143
  • extensionButton.prominentHoverBackground#37af4e
  • focusBorder#528bff
  • input.background#1b1d23
  • input.border#181a1f
  • list.activeSelectionBackground#2c313a
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#2c313a
  • list.highlightForeground#d7dae0
  • list.hoverBackground#2c313a66
  • list.inactiveSelectionBackground#2c313a
  • list.inactiveSelectionForeground#d7dae0
  • notebook.cellEditorBackground#2c313a
  • peekView.border#528bff
  • peekViewEditor.background#1b1d23
  • peekViewResult.background#21252b
  • peekViewResult.selectionBackground#2c313a
  • peekViewTitle.background#1b1d23
  • pickerGroup.border#528bff
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566680
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#21252b
  • sideBarSectionHeader.background#333842
  • statusBar.background#21252b
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#21252b
  • statusBarItem.hoverBackground#2c313a
  • tab.activeBackground#282c34
  • tab.activeForeground#d7dae0
  • tab.border#181a1f
  • tab.inactiveBackground#21252b
  • titleBar.activeBackground#21252b
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#21252b
  • titleBar.inactiveForeground#9da5b4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
meta.embedded, source.groovy.embedded#C9C9CC
emphasisitalic
strongbold
header#000080
comment#5C6370
constant.language#CC6666
constant.numeric#BB80BB
constant.regexp#BB80BB
entity.name.tag#CC6666
entity.name.tag.css#CC6666
entity.other.attribute-name#CC9966
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.attribute.scss, entity.other.attribute-name.scss#CC6666
invalid#FF3333
markup.underlineunderline
markup.bold#CC6666bold
markup.heading#CC6666bold
markup.italicitalic
markup.inserted#BB80BB
markup.deleted#BB80BB
markup.changed#CC6666
beginning.punctuation.definition.quote.markdown#5C6370
beginning.punctuation.definition.list.markdown#66CC99
markup.inline.raw#BB80BB
meta.selector#999966
punctuation.definition.tag#C9C9CC
meta.preprocessor#CC6666
meta.preprocessor.string#BB80BB
meta.preprocessor.numeric#BB80BB
meta.structure.dictionary.key.python#CC9966
meta.diff.header#CC6666
storage#CC6666
storage.type#CC6666
storage.modifier#CC6666
string#BB80BB
string.tag#BB80BB
string.value#BB80BB
string.regexp#BB80BB
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#CC6666
meta.template.expression#C9C9CC
support.type.vendored.property-name, support.type.property-name, variable.css, variable.scss, variable.other.less, source.coffee.embedded#CC9966
keyword#CC6666
keyword.control#CC6666
keyword.operator#C9C9CC
keyword.operator.new, keyword.operator.expression, keyword.operator.cast, keyword.operator.sizeof, keyword.operator.instanceof, keyword.operator.logical.python#CC6666
keyword.other.unit#BB80BB
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#CC6666
support.function.git-rebase#CC9966
constant.sha.git-rebase#BB80BB
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#C9C9CC
variable.language#CC6666
entity.name.function, support.function, support.constant.handlebars#6699CC
meta.return-type, support.class, support.type, entity.name.type, 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#33AA99
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#33AA99
keyword.control#CC6666
variable, meta.definition.variable.name, support.variable, entity.name.variable#CC9966
meta.object-literal.key#CC9966
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#BB80BB
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#BB80BB
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#BB80BB
keyword.operator.or.regexp, keyword.control.anchor.regexp#BB80BB
keyword.operator.quantifier.regexp#BB80BB
constant.character#CC6666
constant.character.escape#BB80BB
token.info-token#66CC99
token.warn-token#FF3333
token.error-token#FF3333
token.debug-token#CC66CC
variable#33AA99
entity.name.variable#33AA99
docore/ziba-theme by Docore - VS Code Theme