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.activeBorder#CECDC3
  • activityBar.background#100F0F
  • activityBar.border#343331
  • activityBar.foreground#878580
  • activityBar.inactiveForeground#878580
  • activityBarBadge.background#24837B
  • activityBarBadge.foreground#100F0F
  • badge.background#24837B
  • badge.foreground#100F0F
  • button.background#24837B
  • button.foreground#100F0F
  • button.hoverBackground#3AA99F
  • diffEditor.insertedLineBackground#66800B15
  • diffEditor.insertedTextBackground#66800B15
  • diffEditor.removedLineBackground#AF302915
  • diffEditor.removedTextBackground#AF302915
  • dropdown.background#1C1B1A
  • dropdown.border#343331
  • dropdown.foreground#CECDC3
  • dropdown.listBackground#100F0F
  • editor.background#100F0F
  • editor.findMatchBackground#AD8301
  • editor.findMatchHighlightBackground#AD8301cc
  • editor.findRangeHighlightBackground#1C1B1A
  • editor.foreground#CECDC3
  • editor.hoverHighlightBackground#343331
  • editor.inactiveSelectionBackground#282726
  • editor.lineHighlightBackground#1C1B1A
  • editor.lineHighlightBorder#282726
  • editor.rangeHighlightBackground#403E3C
  • editor.selectionBackground#3AA99F20
  • editor.selectionHighlightBackground#3AA99F20
  • editorBracketHighlight.unexpectedBracket.foreground#AF3029
  • editorBracketMatch.background#282726
  • editorBracketMatch.border#343331
  • editorError.foreground#AF3029
  • editorGroup.border#343331
  • editorGroupHeader.tabsBackground#1C1B1A
  • editorGutter.addedBackground#66800B
  • editorGutter.background#100F0F
  • editorGutter.deletedBackground#AF3029
  • editorGutter.modifiedBackground#AD8301
  • editorHoverWidget.background#1C1B1A
  • editorHoverWidget.border#282726
  • editorIndentGuide.background1#343331
  • editorInfo.foreground#4385BE
  • editorInlayHint.background#343331
  • editorInlayHint.foreground#878580
  • editorInlayHint.typeBackground#343331
  • editorInlayHint.typeForeground#CECDC3
  • editorLineNumber.activeForeground#CECDC3
  • editorLineNumber.foreground#403E3C
  • editorOverviewRuler.border#282726
  • editorSuggestWidget.background#100F0F
  • editorSuggestWidget.border#343331
  • editorSuggestWidget.foreground#CECDC3
  • editorSuggestWidget.highlightForeground#878580
  • editorSuggestWidget.selectedBackground#343331
  • editorWarning.foreground#AD8301
  • editorWhitespace.foreground#403E3C
  • editorWidget.background#1C1B1A
  • editorWidget.border#343331
  • focusBorder#403E3C
  • icon.foreground#878580
  • input.background#1C1B1A
  • input.border#343331
  • input.foreground#CECDC3
  • input.placeholderForeground#878580
  • inputOption.activeBackground#282726
  • inputOption.activeBorder#343331
  • inputOption.activeForeground#CECDC3
  • inputValidation.errorBackground#AF3029
  • inputValidation.errorBorder#AF3029
  • inputValidation.infoBackground#24837B
  • inputValidation.infoBorder#24837B
  • inputValidation.warningBackground#BC5215
  • inputValidation.warningBorder#BC5215
  • list.activeSelectionBackground#34333180
  • list.activeSelectionForeground#CECDC3
  • list.errorForeground#AF3029
  • list.highlightForeground#3AA99F
  • list.hoverBackground#232221
  • list.hoverForeground#CECDC3
  • list.inactiveSelectionBackground#282726
  • list.inactiveSelectionForeground#CECDC3
  • list.warningForeground#BC5215
  • menu.background#100F0F
  • menu.border#343331
  • menu.foreground#CECDC3
  • menu.selectionBackground#343331
  • menu.selectionForeground#CECDC3
  • merge.border#343331
  • merge.commonContentBackground#403E3C
  • merge.commonHeaderBackground#343331
  • merge.currentContentBackground#66800B
  • merge.currentHeaderBackground#66800B
  • merge.incomingContentBackground#24837B
  • merge.incomingHeaderBackground#24837B
  • notifications.background#282726
  • panel.background#100F0F
  • panel.border#343331
  • panelTitle.activeBorder#403E3C
  • panelTitle.activeForeground#CECDC3
  • panelTitle.inactiveForeground#878580
  • peekView.border#343331
  • peekViewEditor.background#100F0F
  • peekViewEditor.matchHighlightBackground#403E3C
  • peekViewResult.background#1C1B1A
  • peekViewResult.fileForeground#CECDC3
  • peekViewResult.lineForeground#878580
  • peekViewResult.matchHighlightBackground#403E3C
  • peekViewResult.selectionBackground#282726
  • peekViewResult.selectionForeground#575653
  • peekViewTitle.background#343331
  • peekViewTitleDescription.foreground#878580
  • peekViewTitleLabel.foreground#CECDC3
  • scrollbarSlider.background#28272680
  • scrollbarSlider.hoverBackground#343331
  • selection.background#3AA99F30
  • settings.modifiedItemIndicator#AD8301
  • sideBar.activeBackground#403E3C
  • sideBar.activeForeground#CECDC3
  • sideBar.background#1C1B1A
  • sideBar.border#343331
  • sideBar.fileIcon.foreground#4385BE
  • sideBar.folderIcon.foreground#66800B
  • sideBar.foreground#CECDC3
  • sideBar.hoverBackground#232221
  • sideBar.hoverForeground#878580
  • sideBarSectionHeader.background#1C1B1A
  • sideBarSectionHeader.border#343331
  • sideBarSectionHeader.foreground#878580
  • sideBarTitle.foreground#CECDC3
  • statusBar.background#1C1B1A
  • statusBar.border#343331
  • statusBar.debuggingBackground#BC5215
  • statusBar.debuggingForeground#CECDC3
  • statusBar.foreground#878580
  • statusBar.noFolderBackground#403E3C
  • statusBar.noFolderForeground#575653
  • statusBarItem.remoteBackground#24837B
  • statusBarItem.remoteForeground#100F0F
  • tab.activeBackground#100F0F
  • tab.activeForeground#CECDC3
  • tab.activeModifiedBorder#D0A215
  • tab.border#282726
  • tab.hoverBackground#343331
  • tab.inactiveBackground#1C1B1A
  • tab.inactiveModifiedBorder#4385BE
  • tab.unfocusedActiveModifiedBorder#AD8301
  • tab.unfocusedHoverBackground#343331
  • tab.unfocusedInactiveModifiedBorder#205EA6
  • terminal.ansiBlue#4385BE
  • terminal.ansiCyan#24837B
  • terminal.ansiGreen#66800B
  • terminal.ansiMagenta#24837B
  • terminal.ansiRed#AF3029
  • terminal.ansiYellow#AD8301
  • terminal.background#100F0F
  • terminal.foreground#CECDC3
  • terminalCursor.background#100F0F
  • terminalCursor.foreground#CECDC3
  • textLink.activeForeground#92BFDB
  • textLink.foreground#4385BE
  • titleBar.activeBackground#1C1B1A
  • titleBar.activeForeground#878580
  • titleBar.border#343331
  • titleBar.inactiveBackground#1C1B1A
  • titleBar.inactiveForeground#575653

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.definition.block.sequence.item.yaml#AAB1C0
markup.quote.markdown#5c6370
comment, punctuation.definition.comment#7f848eitalic
meta.brace.square#AAB1C0
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#f5c876
punctuation.definition.tag.xi#5c6370
constant.other.color.rgb-value.xi#ffffff
wikiword.xi#D8985F
accent.xi#52ADF2
constant.character.xi#52ADF2
beginning.punctuation.definition.list.markdown.xi#7f848e
beginning.punctuation.definition.quote.markdown.xi#98c379
invalid.xi#AAB1C0
keyword.control.xi#33d8e4
constant.regexp.xi#D55FDE
constant.character.character-class.regexp.xi#EF596F
entity.name.class.xi#33d8e4
entity.name.function.xi#f5c876
support.type.swift, support.type.vb.asp#f5c876
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#f5c876
meta.definition.class.inherited.classes.groovy#98c379
meta.definition.variable.name.groovy#EF596F
meta.method.groovy#52ADF2
storage.modifier.import.groovy#f5c876
source.makefile#f5c876
meta.scope.prerequisites.makefile#EF596F
source.ini#98c379
meta.arguments.coffee, variable.parameter.function.coffee#EF596F
constant.keyword.clojure#33d8e4
meta.symbol.clojure#EF596F
entity.global.clojure#f5c876
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#33d8e4
constant.character.entity#EF596F
punctuation.quasi.element#D55FDE
support.constant.elm#D8985F
support.type.prelude.elm#33d8e4
entity.name.package.go#f5c876
keyword.operator.assignment.go, keyword.operator.address.go#f5c876
keyword.operator.assignment#33d8e4
keyword.other.substitution.end#98c379
keyword.other.substitution.begin#98c379
keyword.other.template.end#98c379
keyword.other.template.begin#98c379
variable.parameter.function.js#EF596F
meta.property.object#EF596F
support.type.primitive#f5c876
support.type.type.flowtype#52ADF2
keyword.operator.module#D55FDE
meta.template.expression#AAB1C0
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#D8985F
token.info-token#52ADF2
entity.name.variable.local.cs#EF596F
storage.type.cs#f5c876
block.scope.end,block.scope.begin#AAB1C0
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#f5c876
selector.sass#EF596F
less rgb-value#D8985F
inline-color-decoration rgb-value#D8985F
rgb-value#33d8e4
constant.language.symbol.ruby#33d8e4
function.parameter.ruby, function.parameter.cs#AAB1C0
function.brace#AAB1C0
function.parameter#AAB1C0
support.token.decorator.python,meta.function.decorator.identifier.python#33d8e4
meta.function.decorator.python#52ADF2
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#D55FDE
keyword.operator.comparison.php#33d8e4
keyword.operator.regexp.php#D55FDE
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#33d8e4
entity.name.goto-label.php,support.other.php#52ADF2
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#D8985F
support.constant.core.rust#D8985F
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#AAB1C0
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#52ADF2
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#f5c876
invalid.illegal.non-null-typehinted.php#f44747
punctuation.section.array.end.php#AAB1C0
punctuation.section.array.begin.php#AAB1C0
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#f5c876
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#33d8e4
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#98c379
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#AAB1C0
invalid.illegal#ffffff
punctuation.section.embedded.begin,punctuation.section.embedded.end#D55FDE
punctuation.section.embedded, variable.interpolation#EF596F
constant.character.escape#33d8e4
string.regexp#33d8e4
markup.bold.markdownbold
string.other.link.title.markdown,string.other.link.description.markdown#52ADF2
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#98c379
markup.inline.raw.markdown#98c379
punctuation.definition.bold.markdown#D8985F
markup.heading.setext#AAB1C0
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#f5c876
markup.bold,todo.bold#D8985Fbold
keyword.other.unit#EF596F
markup.heading punctuation.definition.heading, entity.name.section#52ADF2
markup.heading#EF596Fbold
meta.selector#D55FDE
entity.other.attribute-name.class.css#D8985F
entity.other.attribute-name.id#52ADF2
entity.other.attribute-name#D8985F
entity.name.tag#EF596F
punctuation.definition.constant#D8985F
constant#D8985F
constant.numeric#D8985F
constant.other.symbol#33d8e4
entity.other.inherited-class#f5c876
string#98c379
meta.tag#AAB1C0
support.constant.font-name#D8985F
support.constant.property-value#AAB1C0
support.type.property-name#AAB1C0
support.function#33d8e4
token.storage.type.java#f5c876
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#52ADF2
control.elements, keyword.operator.less#D8985F
keyword.control#D55FDE
entity.name.type#f5c876
variable.other.class.php#EF596F
entity.name.class, variable.other.class.js, variable.other.class.ts#f5c876
entity.name.class.identifier.namespace.type#f5c876
support.class, entity.name.type.class#f5c876
entity.name.type.namespace#f5c876
entity.name.function, meta.require, support.function.any-method, variable.function#52ADF2
token.package#AAB1C0
token.package.keyword#D55FDE
import.storage.java#f5c876
token.variable.parameter.java#AAB1C0
variable.language#f5c876
variable.c#AAB1C0
variable#EF596F
keyword#D55FDE
keyword.operator.assignment.compound#D55FDE
keyword.operator#AAB1C0
constant.character.format.placeholder.other.python#D8985F
meta.function-call.generic.python#52ADF2
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#AAB1C0
variable.parameter.function.python#D8985F
keyword.operator.logical.python#D55FDE
support.type.python#33d8e4
variable.parameter.function.language.python#D8985F
keyword.operator.sizeof.c,keyword.operator.sizeof.cpp#D55FDE
support.type.posix-reserved.c,support.type.posix-reserved.cpp#33d8e4
punctuation.separator.c,punctuation.separator.cpp#D55FDE
punctuation.separator.delimiter#AAB1C0
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#33d8e4
support.variable.dom,support.variable.property.dom#EF596F
support.type.object.dom#33d8e4
keyword.operator.delete#D55FDE
keyword.operator.misc.rust#AAB1C0
entity.name.function,support.function.console#52ADF2
support.variable.property.process#D8985F
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#D8985F
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#EF596F
entity.name.type.module#f5c876
support.module.node,support.type.object.module,support.module.node#f5c876
support.type.vendored.property-name.css#33d8e4
support.constant.color.w3c-standard-color-name.css#D8985F
punctuation.separator.list.comma.css#AAB1C0
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#D8985F
keyword.operator.css,keyword.operator.scss,keyword.operator.less#33d8e4
support.constant.property-value.scss,support.constant.property-value.css#D8985F
keyword.operator.channel#33d8e4
keyword.operator.bitwise#33d8e4
keyword.operator.logical#33d8e4
meta.definition.variable.name.java#EF596F
keyword.operator.instanceof.java#D55FDE
storage.modifier.import.java,storage.type.java,storage.type.generic.java#f5c876
meta.method.java#52ADF2
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#AAB1C0
source.java#EF596F
storage.type.annotation.java, storage.type.object.array.java#f5c876
variable.other.constant#f5c876
support.constant.property.math#D8985F
support.constant.math#f5c876
keyword.operator.expression.import#52ADF2
punctuation.separator.key-value#AAB1C0
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#AAB1C0
meta.function.c,meta.function.cpp#EF596F
markup.deleted.diff#EF596F
markup.inserted.diff#98c379
meta.diff.header.from-file,meta.diff.header.to-file,punctuation.definition.from-file.diff,punctuation.definition.to-file.diff#52ADF2
markup.changed.diff#f5c876
comment markup.link#5c6370
variable.parameter.function#AAB1C0
punctuation.definition.string.begin,punctuation.definition.string.end#98c379
keyword.operator.quantifier.regexp#D8985F
constant.other.character-class.regexp#EF596F
support.constant.edge#D55FDE
variable.language.rust#EF596F
entity.name.lifetime.rust#f5c876
support.function.std.rust#52ADF2
storage.modifier.lifetime.rust#AAB1C0
variable.parameter.function.language.special.self.python#f5c876
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#AAB1C0
support.variable.magic.python#EF596F
storage.type.haskell#D8985F
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 Dark Flexoki - Coding Theme