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.

  • actionBar.toggledBackground#dddddd
  • activityBar.activeBorder#005fb8
  • activityBar.background#f8f8f8
  • activityBar.border#e5e5e5
  • activityBar.foreground#1f1f1f
  • activityBar.inactiveForeground#616161
  • activityBarBadge.background#005fb8
  • activityBarBadge.foreground#ffffff
  • badge.background#cccccc
  • badge.foreground#3b3b3b
  • button.background#005fb8
  • button.border#0000001a
  • button.foreground#ffffff
  • button.hoverBackground#0258a8
  • button.secondaryBackground#e5e5e5
  • button.secondaryForeground#3b3b3b
  • button.secondaryHoverBackground#cccccc
  • chat.editedFileForeground#895503
  • chat.slashCommandBackground#d2ecff
  • chat.slashCommandForeground#306ca2
  • checkbox.background#f8f8f8
  • checkbox.border#cecece
  • descriptionForeground#3b3b3b
  • diffEditor.unchangedRegionBackground#f8f8f8
  • dropdown.background#ffffff
  • dropdown.border#cecece
  • dropdown.foreground#3b3b3b
  • dropdown.listBackground#ffffff
  • editor.background#ffffff
  • editor.foreground#3b3b3b
  • editor.inactiveSelectionBackground#e5ebf1
  • editor.selectionHighlightBackground#add6ff80
  • editorGroup.border#e5e5e5
  • editorGroupHeader.tabsBackground#f8f8f8
  • editorGroupHeader.tabsBorder#e5e5e5
  • editorGutter.addedBackground#2ea043
  • editorGutter.deletedBackground#f85149
  • editorGutter.modifiedBackground#005fb8
  • editorIndentGuide.activeBackground1#939393
  • editorIndentGuide.background1#d3d3d3
  • editorLineNumber.activeForeground#171184
  • editorLineNumber.foreground#6e7681
  • editorOverviewRuler.border#e5e5e5
  • editorSuggestWidget.background#f8f8f8
  • editorWidget.background#f8f8f8
  • errorForeground#f85149
  • focusBorder#005fb8
  • foreground#3b3b3b
  • icon.foreground#3b3b3b
  • input.background#ffffff
  • input.border#cecece
  • input.foreground#3b3b3b
  • input.placeholderForeground#767676
  • inputOption.activeBackground#bed6ed
  • inputOption.activeBorder#005fb8
  • inputOption.activeForeground#000000
  • keybindingLabel.foreground#3b3b3b
  • list.activeSelectionBackground#e8e8e8
  • list.activeSelectionForeground#000000
  • list.activeSelectionIconForeground#000000
  • list.focusAndSelectionOutline#005fb8
  • list.hoverBackground#f2f2f2
  • menu.border#cecece
  • menu.selectionBackground#005fb8
  • menu.selectionForeground#ffffff
  • notebook.cellBorderColor#e5e5e5
  • notebook.selectedCellBackground#c8ddf150
  • notificationCenterHeader.background#ffffff
  • notificationCenterHeader.foreground#3b3b3b
  • notifications.background#ffffff
  • notifications.border#e5e5e5
  • notifications.foreground#3b3b3b
  • panel.background#f8f8f8
  • panel.border#e5e5e5
  • panelInput.border#e5e5e5
  • panelTitle.activeBorder#005fb8
  • panelTitle.activeForeground#3b3b3b
  • panelTitle.inactiveForeground#3b3b3b
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#ffffff
  • peekViewResult.matchHighlightBackground#bb800966
  • pickerGroup.border#e5e5e5
  • pickerGroup.foreground#8b949e
  • ports.iconRunningProcessForeground#369432
  • progressBar.background#005fb8
  • quickInput.background#f8f8f8
  • quickInput.foreground#3b3b3b
  • searchEditor.textInputBorder#cecece
  • settings.dropdownBackground#ffffff
  • settings.dropdownBorder#cecece
  • settings.headerForeground#1f1f1f
  • settings.modifiedItemIndicator#bb800966
  • settings.numberInputBorder#cecece
  • settings.textInputBorder#cecece
  • sideBar.background#f8f8f8
  • sideBar.border#e5e5e5
  • sideBar.foreground#3b3b3b
  • sideBarSectionHeader.background#f8f8f8
  • sideBarSectionHeader.border#e5e5e5
  • sideBarSectionHeader.foreground#3b3b3b
  • sideBarTitle.foreground#3b3b3b
  • statusBar.background#f8f8f8
  • statusBar.border#e5e5e5
  • statusBar.debuggingBackground#fd716c
  • statusBar.debuggingForeground#000000
  • statusBar.focusBorder#005fb8
  • statusBar.foreground#3b3b3b
  • statusBar.noFolderBackground#f8f8f8
  • statusBarItem.compactHoverBackground#cccccc
  • statusBarItem.errorBackground#c72e0f
  • statusBarItem.focusBorder#005fb8
  • statusBarItem.hoverBackground#b8b8b850
  • statusBarItem.prominentBackground#6e768166
  • statusBarItem.remoteBackground#005fb8
  • statusBarItem.remoteForeground#ffffff
  • tab.activeBackground#ffffff
  • tab.activeBorder#f8f8f8
  • tab.activeBorderTop#005fb8
  • tab.activeForeground#3b3b3b
  • tab.border#e5e5e5
  • tab.hoverBackground#ffffff
  • tab.inactiveBackground#f8f8f8
  • tab.inactiveForeground#868686
  • tab.lastPinnedBorder#d4d4d4
  • tab.selectedBackground#ffffffa5
  • tab.selectedBorderTop#68a3da
  • tab.selectedForeground#333333b3
  • tab.unfocusedActiveBorder#f8f8f8
  • tab.unfocusedActiveBorderTop#e5e5e5
  • tab.unfocusedHoverBackground#f8f8f8
  • terminal.foreground#3b3b3b
  • terminal.inactiveSelectionBackground#e5ebf1
  • terminal.tab.activeBorder#005fb8
  • terminalCursor.foreground#005fb8
  • textBlockQuote.background#f8f8f8
  • textBlockQuote.border#e5e5e5
  • textCodeBlock.background#f8f8f8
  • textLink.activeForeground#005fb8
  • textLink.foreground#005fb8
  • textPreformat.background#0000001f
  • textPreformat.foreground#3b3b3b
  • textSeparator.foreground#21262d
  • titleBar.activeBackground#f8f8f8
  • titleBar.activeForeground#1e1e1e
  • titleBar.border#e5e5e5
  • titleBar.inactiveBackground#f8f8f8
  • titleBar.inactiveForeground#8b949e
  • welcomePage.tileBackground#f3f3f3
  • widget.border#e5e5e5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.delayed.unison,punctuation.definition.list.begin.unison,punctuation.definition.list.end.unison,punctuation.definition.ability.begin.unison,punctuation.definition.ability.end.unison,punctuation.operator.assignment.as.unison,punctuation.separator.pipe.unison,punctuation.separator.delimiter.unison,punctuation.definition.hash.unison#ee6677
variable.other.generic-type.haskell#4477aa
storage.type.haskell#aa3377
support.variable.magic.python#ee6677
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#f7f7f7
variable.parameter.function.language.special.self.python#66ccee
storage.modifier.lifetime.rust#f7f7f7
support.function.std.rust#ccbb44
entity.name.lifetime.rust#66ccee
variable.language.rust#ee6677
support.constant.edge#4477aa
constant.other.character-class.regexp#ee6677
keyword.operator.quantifier.regexp#aa3377
punctuation.definition.string.begin,punctuation.definition.string.end#228833
variable.parameter.function#f7f7f7
comment markup.link#515151
markup.changed.diff#66ccee
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#ccbb44
markup.inserted.diff#228833
markup.deleted.diff#ee6677
meta.function.c,meta.function.cpp#ee6677
punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c#f7f7f7
punctuation.separator.key-value#f7f7f7
keyword.operator.expression.import#ccbb44
support.constant.math#66ccee
support.constant.property.math#aa3377
variable.other.constant#66ccee
storage.type.annotation.java, storage.type.object.array.java#66ccee
source.java#ee6677
punctuation.section.block.begin.java,punctuation.section.block.end.java,punctuation.definition.method-parameters.begin.java,punctuation.definition.method-parameters.end.java,meta.method.identifier.java,punctuation.section.method.begin.java,punctuation.section.method.end.java,punctuation.terminator.java,punctuation.section.class.begin.java,punctuation.section.class.end.java,punctuation.section.inner-class.begin.java,punctuation.section.inner-class.end.java,meta.method-call.java,punctuation.section.class.begin.bracket.curly.java,punctuation.section.class.end.bracket.curly.java,punctuation.section.method.begin.bracket.curly.java,punctuation.section.method.end.bracket.curly.java,punctuation.separator.period.java,punctuation.bracket.angle.java,punctuation.definition.annotation.java,meta.method.body.java#f7f7f7
meta.method.java#ccbb44
storage.modifier.import.java,storage.type.java,storage.type.generic.java#66ccee
keyword.operator.instanceof.java#4477aa
meta.definition.variable.name.java#ee6677
keyword.operator.logical#ffffff
keyword.operator.bitwise#ffffff
keyword.operator.channel#ffffff
support.constant.property-value.scss,support.constant.property-value.css#aa3377
keyword.operator.css,keyword.operator.scss,keyword.operator.less#ffffff
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#aa3377
punctuation.separator.list.comma.css#f7f7f7
support.constant.color.w3c-standard-color-name.css#aa3377
support.type.vendored.property-name.css#ffffff
support.module.node,support.type.object.module,support.module.node#66ccee
entity.name.type.module#66ccee
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#ee6677
support.constant.json#aa3377
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#4477aa
support.type.object.console#ee6677
support.variable.property.process#aa3377
entity.name.function,support.function.console#ccbb44
keyword.operator.misc.rust#f7f7f7
keyword.operator.sigil.rust#4477aa
keyword.operator.delete#4477aa
support.type.object.dom#ffffff
support.variable.dom,support.variable.property.dom#ee6677
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#ffffff
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp#4477aa
punctuation.separator.delimiter#f7f7f7
punctuation.separator.c,punctuation.separator.cpp#4477aa
support.type.posix-reserved.c,support.type.posix-reserved.cpp#ffffff
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#4477aa
variable.parameter.function.language.python#aa3377
support.type.python#ffffff
keyword.operator.logical.python#4477aa
variable.parameter.function.python#aa3377
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#f7f7f7
meta.function-call.generic.python#ccbb44
constant.character.format.placeholder.other.python#aa3377
keyword.operator#f7f7f7
keyword.operator.assignment.compound#4477aa
keyword.operator.assignment.compound.js,keyword.operator.assignment.compound.ts#ffffff
keyword#4477aa
entity.name.namespace#66ccee
variable#ee6677
variable.c#f7f7f7
variable.language#66ccee
token.variable.parameter.java#f7f7f7
import.storage.java#66ccee
token.package.keyword#4477aa
token.package#f7f7f7
entity.name.function, meta.require, support.function.any-method, variable.function#ccbb44
entity.name.type.namespace#66ccee
support.class, entity.name.type.class#66ccee
entity.name.class.identifier.namespace.type#66ccee
entity.name.class, variable.other.class.js, variable.other.class.ts#66ccee
variable.other.class.php#ee6677
entity.name.type#66ccee
keyword.control#4477aa
control.elements, keyword.operator.less#aa3377
keyword.other.special-method#ccbb44
storage#4477aa
token.storage#4477aa
keyword.operator.expression.delete,keyword.operator.expression.in,keyword.operator.expression.of,keyword.operator.expression.instanceof,keyword.operator.new,keyword.operator.expression.typeof,keyword.operator.expression.void#4477aa
token.storage.type.java#66ccee
support.function#ffffff
support.type.property-name#f7f7f7
support.constant.property-value#f7f7f7
support.constant.font-name#aa3377
meta.tag#f7f7f7
string#228833
entity.other.inherited-class#66ccee
constant.other.symbol#ffffff
constant.numeric#aa3377
constant#aa3377
punctuation.definition.constant#aa3377
entity.name.tag#ee6677
entity.other.attribute-name#aa3377
entity.other.attribute-name.id#ccbb44normal
entity.other.attribute-name.class.css#aa3377normal
meta.selector#4477aa
markup.heading#ee6677
markup.heading punctuation.definition.heading, entity.name.section#ccbb44
keyword.other.unit#ee6677
markup.bold,todo.bold#aa3377
punctuation.definition.bold#66ccee
markup.italic, punctuation.definition.italic,todo.emphasis#4477aa
emphasis md#4477aa
entity.name.section.markdown#ee6677
punctuation.definition.heading.markdown#ee6677
punctuation.definition.list.begin.markdown#ee6677
markup.heading.setext#f7f7f7
punctuation.definition.bold.markdown#aa3377
markup.inline.raw.markdown#228833
markup.inline.raw.string.markdown#228833
punctuation.definition.list.markdown#ee6677
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ee6677
beginning.punctuation.definition.list.markdown#ee6677
punctuation.definition.metadata.markdown#ee6677
markup.underline.link.markdown,markup.underline.link.image.markdown#4477aa
string.other.link.title.markdown,string.other.link.description.markdown#ccbb44
string.regexp#ffffff
constant.character.escape#ffffff
punctuation.section.embedded, variable.interpolation#ee6677
punctuation.section.embedded.begin,punctuation.section.embedded.end#4477aa
invalid.illegal#ffffff
invalid.illegal.bad-ampersand.html#f7f7f7
invalid.broken#ffffff
invalid.deprecated#ffffff
invalid.unimplemented#ffffff
source.json meta.structure.dictionary.json > string.quoted.json#ee6677
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#ee6677
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#228833
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#ffffff
support.type.property-name.json#ee6677
support.type.property-name.json punctuation#ee6677
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#4477aa
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#4477aa
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#66ccee
keyword.operator.error-control.php#4477aa
keyword.operator.type.php#4477aa
punctuation.section.array.begin.php#f7f7f7
punctuation.section.array.end.php#f7f7f7
invalid.illegal.non-null-typehinted.php#f44747
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#66ccee
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#ccbb44
punctuation.definition.parameters.begin.bracket.round.php,punctuation.definition.parameters.end.bracket.round.php,punctuation.separator.delimiter.php,punctuation.section.scope.begin.php,punctuation.section.scope.end.php,punctuation.terminator.expression.php,punctuation.definition.arguments.begin.bracket.round.php,punctuation.definition.arguments.end.bracket.round.php,punctuation.definition.storage-type.begin.bracket.round.php,punctuation.definition.storage-type.end.bracket.round.php,punctuation.definition.array.begin.bracket.round.php,punctuation.definition.array.end.bracket.round.php,punctuation.definition.begin.bracket.round.php,punctuation.definition.end.bracket.round.php,punctuation.definition.begin.bracket.curly.php,punctuation.definition.end.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php,punctuation.definition.section.switch-block.start.bracket.curly.php,punctuation.definition.section.switch-block.begin.bracket.curly.php,punctuation.definition.section.switch-block.end.bracket.curly.php#f7f7f7
support.constant.core.rust#aa3377
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#aa3377
entity.name.goto-label.php,support.other.php#ccbb44
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#ffffff
keyword.operator.regexp.php#4477aa
keyword.operator.comparison.php#ffffff
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#4477aa
meta.function.decorator.python#ccbb44
support.token.decorator.python,meta.function.decorator.identifier.python#ffffff
function.parameter#f7f7f7
function.brace#f7f7f7
function.parameter.ruby, function.parameter.cs#f7f7f7
constant.language.symbol.ruby#ffffff
rgb-value#ffffff
inline-color-decoration rgb-value#aa3377
less rgb-value#aa3377
selector.sass#ee6677
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#66ccee
block.scope.end,block.scope.begin#f7f7f7
storage.type.cs#66ccee
entity.name.variable.local.cs#ee6677
token.info-token#ccbb44
token.warn-token#aa3377
token.error-token#f44747
token.debug-token#4477aa
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#4477aa
meta.template.expression#f7f7f7
keyword.operator.module#4477aa
support.type.type.flowtype#ccbb44
support.type.primitive#66ccee
meta.property.object#ee6677
variable.parameter.function.js#ee6677
keyword.other.template.begin#228833
keyword.other.template.end#228833
keyword.other.substitution.begin#228833
keyword.other.substitution.end#228833
keyword.operator.assignment#ffffff
keyword.operator.assignment.go#66ccee
keyword.operator.arithmetic.go, keyword.operator.address.go#4477aa
entity.name.package.go#66ccee
support.type.prelude.elm#ffffff
support.constant.elm#aa3377
punctuation.quasi.element#4477aa
constant.character.entity#ee6677
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#ffffff
entity.global.clojure#66ccee
meta.symbol.clojure#ee6677
constant.keyword.clojure#ffffff
meta.arguments.coffee, variable.parameter.function.coffee#ee6677
source.ini#228833
meta.scope.prerequisites.makefile#ee6677
source.makefile#66ccee
storage.modifier.import.groovy#66ccee
meta.method.groovy#ccbb44
meta.definition.variable.name.groovy#ee6677
meta.definition.class.inherited.classes.groovy#228833
support.variable.semantic.hlsl#66ccee
support.type.texture.hlsl, support.type.sampler.hlsl, support.type.object.hlsl, support.type.object.rw.hlsl, support.type.fx.hlsl, support.type.object.hlsl#4477aa
text.variable, text.bracketed#ee6677
support.type.swift, support.type.vb.asp#66ccee
entity.name.function.xi#66ccee
entity.name.class.xi#ffffff
constant.character.character-class.regexp.xi#ee6677
constant.regexp.xi#4477aa
keyword.control.xi#ffffff
invalid.xi#f7f7f7
beginning.punctuation.definition.quote.markdown.xi#228833
beginning.punctuation.definition.list.markdown.xi#515151
constant.character.xi#ccbb44
accent.xi#ccbb44
wikiword.xi#aa3377
constant.other.color.rgb-value.xi#ffffff
punctuation.definition.tag.xi#515151
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#66ccee
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#ee6677
meta.brace.square#f7f7f7
comment, punctuation.definition.comment#515151italic
markup.quote.markdown#515151
punctuation.definition.block.sequence.item.yaml#f7f7f7
constant.language.symbol.elixir#ffffff
entity.other.attribute-name.js,entity.other.attribute-name.ts,entity.other.attribute-name.jsx,entity.other.attribute-name.tsx,variable.parameter,variable.language.superitalic
comment.line.double-slash,comment.block.documentationitalic
keyword.control.import.python,keyword.control.flow.pythonitalic
markup.italic.markdownitalic

Shiki preview

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

Loading...

Blinds Theme by Tan Ka-Shing - VS Code Theme