Skip to main content
CodingTheme

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.activeBackground#ffffff
  • activityBar.background#ffffff
  • activityBar.foreground#ffffff
  • activityBar.inactiveForeground#ffffff
  • activityBarBadge.background#ffffff
  • activityBarBadge.foreground#ffffff
  • banner.background#ffffff
  • button.background#ffffff
  • contrastActiveBorder#ffffff
  • contrastBorder#ffffff
  • dropdown.background#ffffff
  • dropdown.border#ffffff
  • dropdown.foreground#ffffff
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.findMatchBackground#ffffff
  • editor.findMatchHighlightBackground#ffffff
  • editor.foreground#ffffff
  • editor.inactiveSelectionBackground#ffffff
  • editor.lineHighlightBackground#ffffff
  • editor.lineHighlightBorder#ffffff
  • editor.selectionBackground#ffffff
  • editorBracketHighlight.foreground1#ffffff
  • editorBracketHighlight.foreground2#ffffff
  • editorBracketHighlight.foreground3#ffffff
  • editorBracketHighlight.foreground4#ffffff
  • editorBracketMatch.background#ffffff
  • editorBracketPairGuide.activeBackground1#ffffff
  • editorBracketPairGuide.activeBackground2#ffffff
  • editorBracketPairGuide.activeBackground3#ffffff
  • editorBracketPairGuide.activeBackground4#ffffff
  • editorBracketPairGuide.background1#ffffff
  • editorBracketPairGuide.background2#ffffff
  • editorBracketPairGuide.background3#ffffff
  • editorBracketPairGuide.background4#ffffff
  • editorGroupHeader.tabsBackground#ffffff
  • editorGutter.addedBackground#ffffff
  • editorGutter.background#ffffff
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.statusBarBackground#ffffff
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#ffffff
  • editorLink.activeForeground#ffffff
  • editorSuggestWidget.focusHighlightForeground#ffffff
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedIconForeground#ffffff
  • editorWidget.background#ffffff
  • editorWidget.foreground#ffffff
  • errorForeground#ffffff
  • extensionIcon.starForeground#ffffff
  • focusBorder#ffffff
  • foreground#ffffff
  • gitDecoration.deletedResourceForeground#ffffff
  • gitDecoration.ignoredResourceForeground#ffffff
  • gitDecoration.modifiedResourceForeground#ffffff
  • gitDecoration.renamedResourceForeground#ffffff
  • gitDecoration.stageModifiedResourceForeground#ffffff
  • gitDecoration.untrackedResourceForeground#ffffff
  • icon.foreground#ffffff
  • input.background#ffffff
  • keybindingLabel.background#ffffff
  • keybindingLabel.border#ffffff
  • keybindingLabel.bottomBorder#ffffff
  • keybindingLabel.foreground#ffffff
  • keybindingTable.headerBackground#ffffff
  • keybindingTable.rowsBackground#ffffff
  • list.activeSelectionBackground#ffffff
  • list.activeSelectionForeground#ffffff
  • list.hoverBackground#ffffff
  • list.inactiveSelectionBackground#ffffff
  • menu.background#ffffff
  • minimap.background#ffffff
  • minimapSlider.activeBackground#ffffff
  • minimapSlider.background#ffffff
  • minimapSlider.hoverBackground#ffffff
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#ffffff
  • sash.hoverBorder#ffffff
  • scrollbar.shadow#ffffff
  • scrollbarSlider.activeBackground#ffffff
  • scrollbarSlider.background#ffffff
  • scrollbarSlider.hoverBackground#ffffff
  • settings.checkboxBackground#ffffff
  • settings.checkboxForeground#ffffff
  • settings.dropdownBackground#ffffff
  • settings.dropdownForeground#ffffff
  • settings.headerForeground#ffffff
  • settings.numberInputBackground#ffffff
  • settings.numberInputForeground#ffffff
  • settings.rowHoverBackground#ffffff
  • settings.textInputBackground#ffffff
  • settings.textInputForeground#ffffff
  • sideBar.background#ffffff
  • sideBar.foreground#ffffff
  • statusBar.background#ffffff
  • statusBar.debuggingBackground#ffffff
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#ffffff
  • statusBarItem.hoverBackground#ffffff
  • symbolIcon.moduleForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.inactiveBackground#ffffff
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#ffffff
  • terminal.ansiBrightBlack#ffffff
  • terminal.ansiBrightBlue#ffffff
  • terminal.ansiBrightCyan#ffffff
  • terminal.ansiBrightGreen#ffffff
  • terminal.ansiBrightMagenta#ffffff
  • terminal.ansiBrightRed#ffffff
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffffff
  • terminal.ansiCyan#ffffff
  • terminal.ansiGreen#ffffff
  • terminal.ansiMagenta#ffffff
  • terminal.ansiRed#ffffff
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffffff
  • terminal.background#ffffff
  • terminal.foreground#ffffff
  • textLink.activeForeground#ffffff
  • textLink.foreground#ffffff
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#ffffff
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#ffffff
  • toolbar.activeBackground#ffffff
  • toolbar.hoverBackground#ffffff
  • widget.shadow#ffffff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#ffffffitalic
punctuation.support.type.property-name.end.json, support.type.property-name.json, string.json, meta.structure.dictionary.json, meta.structure.dictionary.value.json, meta.structure.dictionary.json, meta.structure.array.json, meta.structure.dictionary.value.json, meta.structure.dictionary.json, source.json#ffffff
entity.name.function, support.function, support.constant.handlebars, source.powershell variable.other.member, entity.name.operator.custom-literal#ffffff
keyword.operator#ffffff
constant.numeric#ffffff
entity.name.namespace#ffffffbold
support.function, meta.function-call#ffffff
support.type, meta.return-type, support.class, entity.name.type, 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#ffffff
meta.type.cast.expr, meta.type.new.expr, support.constant.math, support.constant.dom, support.constant.json, entity.other.inherited-class#ffffff
keyword.control, source.cpp keyword.operator.new, keyword.operator.delete, keyword.other.using, keyword.other.operator, entity.name.operator, keyword.control.conditional#ffffff
meta.diff.header#ffffff
storage#ffffff
storage.type#ffffff
variable.other.constant, variable.other.enummember#ffffff
meta.object-literal.key#ffffff
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#ffffff
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#ffffff
constant.character.character-class.regexp, constant.other.character-class.set.regexp, constant.other.character-class.regexp, constant.character.set.regexp#ffffff
keyword.operator.or.regexp, keyword.control.anchor.regexp#ffffff
keyword.operator.quantifier.regexp#ffffff
constant.character#ffffff
constant.character.escape#ffffff
entity.name.label#ffffff
markup.inline.raw#ffffff
meta.preprocessor.string#ffffff
string, meta.embedded.assembly#ffffff
string.tag#ffffff
string.value#ffffff
storage.modifier, keyword.operator.noexcept, entity.name.tag, constant.character, markup.changed, meta.preprocessor, entity.name.function.preprocessor, meta.diff.header, storage.modifier, keyword.operator.noexcept, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded, keyword, punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php, variable.language, 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#ffffff
variable.language#ffffff
keyword.other.new#ffffff
punctuation.separator.array#ffffff
constant.language#ffffffitalic
variable.other.object, meta.function-call.js#ffffffbold
meta.definition.variable.name, meta.block, source.js, variable.other#ffffff

Shiki preview

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

Loading...

Cleo by Cleo - VS Code Theme