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.background#0f0f0f
  • activityBar.foreground#d7dae0
  • activityBarBadge.background#4d78cc
  • activityBarBadge.foreground#f8fafd
  • badge.background#0f0f0f
  • button.background#404754
  • debugToolBar.background#0f0f0f
  • diffEditor.insertedTextBackground#00809b33
  • dropdown.background#0f0f0f
  • dropdown.border#0f0f0f
  • editor.background#0f0f0f
  • editor.findMatchBackground#FFFFFF20
  • editor.findMatchBorder#FFFFFF60
  • editor.findMatchHighlightBackground#FFFFFF30
  • editor.foreground#dbdbdb
  • editor.lineHighlightBackground#292929
  • editor.selectionBackground#FFFFFF33
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#dddddd
  • editor.wordHighlightBackground#d2e0ff2f
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#dbdbdb26
  • editor.wordHighlightStrongBorder#7f848e
  • editorActiveLineNumber.foreground#737984
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#FFF
  • editorError.foreground#c24038
  • editorGroup.background#181a1f
  • editorGroup.border#181a1f
  • editorGroupHeader.tabsBackground#0f0f0f
  • editorHoverWidget.background#0f0f0f
  • editorHoverWidget.border#181a1f
  • editorIndentGuide.activeBackground#c8c8c825
  • editorIndentGuide.background#3b404830
  • editorLineNumber.foreground#FFFFFF25
  • editorMarkerNavigation.background#0f0f0f
  • editorRuler.foreground#dbdbdb26
  • editorSuggestWidget.background#0f0f0f
  • editorSuggestWidget.border#181a1f
  • editorSuggestWidget.selectedBackground#2c313a
  • editorWarning.foreground#d19a66
  • editorWhitespace.foreground#3b4048
  • editorWidget.background#0f0f0f
  • focusBorder#464646
  • input.background#1d1f23
  • list.activeSelectionBackground#333
  • list.activeSelectionForeground#ffffff90
  • list.focusBackground#FFFFFF30
  • list.focusForeground#FFFFFF90
  • list.highlightForeground#ffffff90
  • list.hoverBackground#FFFFFF40
  • list.inactiveSelectionBackground#222
  • list.inactiveSelectionForeground#ffffff90
  • list.warningForeground#d19a66
  • menu.foreground#c8c8c8
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#0f0f0f
  • sideBar.foreground#FFFFFF30
  • statusBar.background#0f0f0f
  • statusBar.debuggingBackground#7e0097
  • statusBar.debuggingBorder#66017a
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#0f0f0f
  • statusBarItem.hoverBackground#2c313a
  • statusBarItem.remoteBackground#4d78cc
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#0f0f0f
  • tab.activeForeground#dcdcdc
  • tab.border#181a1f
  • tab.hoverBackground#323842
  • tab.inactiveBackground#0f0f0f
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#2d3139
  • terminal.ansiBlue#61afef
  • terminal.ansiBrightBlack#7f848e
  • terminal.ansiBrightBlue#528bff
  • terminal.ansiBrightCyan#56b6c2
  • terminal.ansiBrightGreen#89ca78
  • terminal.ansiBrightMagenta#7e0097
  • terminal.ansiBrightRed#f44747
  • terminal.ansiBrightWhite#d7dae0
  • terminal.ansiBrightYellow#e5c07b
  • terminal.ansiCyan#56b6c2
  • terminal.ansiGreen#89ca78
  • terminal.ansiMagenta#d55fde
  • terminal.ansiRed#ef596f
  • terminal.ansiWhite#d7dae0
  • terminal.ansiYellow#e5c07b
  • terminal.foreground#c8c8c8
  • textLink.foreground#61afef
  • titleBar.activeBackground#0f0f0f
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#0f0f0f
  • titleBar.inactiveForeground#6b717d

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.block.sequence.item.yaml#dbdbdb
markup.quote.markdown#5c6370
comment, punctuation.definition.comment#7f848eitalic
meta.brace.square#dbdbdb
entity.name.label.cs, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#ef596f
entity.name.label.cs, entity.name.scope-resolution.function.call, entity.name.scope-resolution.function.definition#e5c07b
punctuation.definition.tag.xi#5c6370
constant.other.color.rgb-value.xi#ffffff
wikiword.xi#d19a66
accent.xi#61afef
constant.character.xi#61afef
beginning.punctuation.definition.list.markdown.xi#7f848e
beginning.punctuation.definition.quote.markdown.xi#89ca78
invalid.xi#dbdbdb
keyword.control.xi#56b6c2
constant.regexp.xi#d55fde
constant.character.character-class.regexp.xi#ef596f
entity.name.class.xi#56b6c2
entity.name.function.xi#e5c07b
support.type.swift, support.type.vb.asp#e5c07b
text.variable, text.bracketed#ef596f
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#d55fde
support.variable.semantic.hlsl#e5c07b
meta.definition.class.inherited.classes.groovy#89ca78
meta.definition.variable.name.groovy#ef596f
meta.method.groovy#61afef
storage.modifier.import.groovy#e5c07b
source.makefile#e5c07b
meta.scope.prerequisites.makefile#ef596f
source.ini#89ca78
meta.arguments.coffee, variable.parameter.function.coffee#ef596f
constant.keyword.clojure#2bbac5
meta.symbol.clojure#ef596f
entity.global.clojure#e5c07b
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#56b6c2
constant.character.entity#ef596f
punctuation.quasi.element#d55fde
support.constant.elm#d19a66
support.type.prelude.elm#56b6c2
entity.name.package.go#e5c07b
keyword.operator.assignment.go, keyword.operator.address.go#e5c07b
keyword.operator.assignment#56b6c2
keyword.other.substitution.end#89ca78
keyword.other.substitution.begin#89ca78
keyword.other.template.end#89ca78
keyword.other.template.begin#89ca78
variable.parameter.function.js#ef596f
meta.property.object#ef596f
support.type.primitive#e5c07b
support.type.type.flowtype#61afef
keyword.operator.module#d55fde
meta.template.expression#dbdbdb
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#d55fde
token.debug-token#d55fde
token.error-token#f44747
token.warn-token#d19a66
token.info-token#61afef
entity.name.variable.local.cs#ef596f
storage.type.cs#e5c07b
block.scope.end,block.scope.begin#dbdbdb
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#e5c07b
selector.sass#ef596f
less rgb-value#d19a66
inline-color-decoration rgb-value#d19a66
rgb-value#56b6c2
constant.language.symbol.ruby#56b6c2
function.parameter.ruby, function.parameter.cs#dbdbdb
function.brace#dbdbdb
function.parameter#dbdbdb
support.token.decorator.python,meta.function.decorator.identifier.python#56b6c2
meta.function.decorator.python#61afef
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#d55fde
keyword.operator.comparison.php#56b6c2
keyword.operator.regexp.php#d55fde
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#56b6c2
entity.name.goto-label.php,support.other.php#61afef
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#d19a66
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#dbdbdb
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#61afef
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#e5c07b
invalid.illegal.non-null-typehinted.php#f44747
punctuation.section.array.end.php#dbdbdb
punctuation.section.array.begin.php#dbdbdb
keyword.operator.type.php#d55fde
keyword.operator.error-control.php#d55fde
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#e5c07b
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#d55fde
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#d55fde
support.type.property-name.json punctuation#ef596f
support.type.property-name.json#ef596f
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#56b6c2
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#89ca78
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#ef596f
source.json meta.structure.dictionary.json > string.quoted.json#ef596f
invalid.unimplemented#ffffff
invalid.deprecated#ffffff
invalid.broken#ffffff
invalid.illegal.bad-ampersand.html#dbdbdb
invalid.illegal#ffffff
punctuation.section.embedded.begin,punctuation.section.embedded.end#d55fde
punctuation.section.embedded, variable.interpolation#ef596f
constant.character.escape#56b6c2
string.regexp#56b6c2
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#61afef
markup.underline.link.markdown,markup.underline.link.image.markdown#d55fde
punctuation.definition.metadata.markdown#ef596f
beginning.punctuation.definition.list.markdown#ef596f
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ef596f
punctuation.definition.list.markdown#ef596f
markup.inline.raw.string.markdown#89ca78
markup.inline.raw.markdown#89ca78
punctuation.definition.bold.markdown#d19a66
markup.heading.setext#dbdbdb
punctuation.definition.list.begin.markdown#ef596f
punctuation.definition.heading.markdown#ef596f
entity.name.section.markdown#ef596f
emphasis md#d55fde
markup.italic, punctuation.definition.italic,todo.emphasis#d55fde
punctuation.definition.bold#e5c07b
markup.bold,todo.bold#d19a66bold
keyword.other.unit#ef596f
markup.heading punctuation.definition.heading, entity.name.section#61afef
markup.heading#ef596fbold
meta.selector#d55fde
entity.other.attribute-name.class.css#d19a66normal
entity.other.attribute-name.id#61afefnormal
entity.other.attribute-name#d19a66
entity.name.tag#ef596f
punctuation.definition.constant#d19a66
constant#d19a66
constant.numeric#d19a66
constant.other.symbol#56b6c2
entity.other.inherited-class#e5c07b
string#89ca78
meta.tag#dbdbdb
support.constant.font-name#d19a66
support.constant.property-value#dbdbdb
support.type.property-name#dbdbdb
support.function#56b6c2
token.storage.type.java#e5c07b
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#d55fde
token.storage#d55fde
storage#d55fde
keyword.other.special-method#61afef
control.elements, keyword.operator.less#d19a66
keyword.control#d55fde
entity.name.type#e5c07b
variable.other.class.php#ef596f
entity.name.class, variable.other.class.js, variable.other.class.ts#e5c07b
entity.name.class.identifier.namespace.type#e5c07b
support.class, entity.name.type.class#e5c07b
entity.name.type.namespace#e5c07b
entity.name.function, meta.require, support.function.any-method, variable.function#61afef
token.package#dbdbdb
token.package.keyword#d55fde
import.storage.java#e5c07b
token.variable.parameter.java#dbdbdb
variable.language#e5c07b
variable#ef596f
keyword#d55fde
keyword.operator.assignment.compound#d55fde
keyword.operator#dbdbdb
constant.character.format.placeholder.other.python#d19a66
meta.function-call.generic.python#61afef
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#dbdbdb
variable.parameter.function.python#d19a66
keyword.operator.logical.python#d55fde
support.type.python#56b6c2
variable.parameter.function.language.python#d19a66
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#d55fde
support.type.posix-reserved.c,support.type.posix-reserved.cpp#56b6c2
punctuation.separator.c,punctuation.separator.cpp#d55fde
punctuation.separator.delimiter#dbdbdb
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#d55fde
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment,keyword.operator.relational#56b6c2
support.variable.dom,support.variable.property.dom#ef596f
support.type.object.dom#56b6c2
keyword.operator.delete#d55fde
keyword.operator.misc.rust#dbdbdb
entity.name.function,support.function.console#61afef
support.variable.property.process#d19a66
support.type.object.console#ef596f
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.keyof#d55fde
support.constant.json#d19a66
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#ef596f
entity.name.type.module#e5c07b
support.module.node,support.type.object.module,support.module.node#e5c07b
support.type.vendored.property-name.css#56b6c2
support.constant.color.w3c-standard-color-name.css#d19a66
punctuation.separator.list.comma.css#dbdbdb
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#d19a66
keyword.operator.css,keyword.operator.scss,keyword.operator.less#56b6c2
support.constant.property-value.scss,support.constant.property-value.css#d19a66
keyword.operator.channel#56b6c2
keyword.operator.bitwise#56b6c2
keyword.operator.logical#56b6c2
meta.definition.variable.name.java#ef596f
keyword.operator.instanceof.java#d55fde
storage.modifier.import.java,storage.type.java,storage.type.generic.java#e5c07b
meta.method.java#61afef
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#dbdbdb
source.java#ef596f
storage.type.annotation.java, storage.type.object.array.java#e5c07b
variable.other.constant#e5c07b
support.constant.property.math#d19a66
support.constant.math#e5c07b
keyword.operator.expression.import#61afef
punctuation.separator.key-value#dbdbdb
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#dbdbdb
meta.function.c,meta.function.cpp#ef596f
markup.deleted.diff#ef596f
markup.inserted.diff#89ca78
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#61afef
markup.changed.diff#e5c07b
comment markup.link#5c6370
variable.parameter.function#dbdbdb
punctuation.definition.string.begin,punctuation.definition.string.end#89ca78
keyword.operator.quantifier.regexp#d19a66
constant.other.character-class.regexp#ef596f
support.constant.edge#d55fde
variable.language.rust#ef596f
entity.name.lifetime.rust#e5c07b
support.function.std.rust#61afef
storage.modifier.lifetime.rust#dbdbdb
variable.parameter.function.language.special.self.python#e5c07b
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#dbdbdb
support.variable.magic.python#ef596f
storage.type.haskell#d19a66
variable.other.generic-type.haskell#d55fde
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#ef596f
markup.italic.markdownitalic
keyword.control.import.python,keyword.control.flow.pythonitalic
comment.line.double-slash,comment.block.documentationitalic
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

Shiki preview

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

Loading...

One Darker Pro by drekevist - VS Code Theme