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#282c34
  • activityBar.foreground#D7DAE0
  • activityBarBadge.background#4D78CC
  • activityBarBadge.foreground#F8FAFD
  • badge.background#282c34
  • button.background#404754
  • debugToolBar.background#282c34
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#313338
  • dropdown.border#313338
  • editor.background#282c34
  • editor.findMatchBackground#42557B
  • editor.findMatchBorder#457dff
  • editor.findMatchHighlightBackground#314365
  • editor.foreground#abb2bf
  • editor.lineHighlightBackground#2C323C
  • editor.selectionBackground#67769660
  • editor.selectionHighlightBackground#ffffff10
  • editor.selectionHighlightBorder#ddd
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorActiveLineNumber.foreground#737984
  • editorBracketMatch.background#515a6b
  • editorBracketMatch.border#515a6b
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.foreground#c24038
  • editorGroup.background#181A1F
  • editorGroup.border#181A1F
  • editorGroupHeader.tabsBackground#21252b
  • editorHoverWidget.background#232933
  • editorHoverWidget.border#181A1F
  • editorIndentGuide.activeBackground#909039
  • editorIndentGuide.background#282c34
  • editorInlayHint.background#2c313c
  • editorInlayHint.foreground#abb2bf
  • editorLineNumber.foreground#495162
  • editorMarkerNavigation.background#232933
  • editorRuler.foreground#abb2bf26
  • editorSuggestWidget.background#21252b
  • editorSuggestWidget.border#282c34
  • editorSuggestWidget.foreground#D8D9DC
  • editorSuggestWidget.selectedBackground#383E4A
  • editorWhitespace.foreground#282c34
  • editorWidget.background#21252b
  • focusBorder#232933
  • input.background#1d1f23
  • input.foreground#abb2bf
  • input.placeholderForeground#8f8f8f
  • list.activeSelectionBackground#363840
  • list.activeSelectionForeground#d7dae0
  • list.focusBackground#363840
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#34363b
  • list.inactiveSelectionBackground#292D35
  • list.inactiveSelectionForeground#d7dae0
  • menu.background#22252A
  • menu.foreground#CCCCCC
  • menu.separatorBackground#575658
  • peekView.border#A2A8B0
  • peekViewEditor.background#282c34
  • peekViewEditor.matchHighlightBackground#455064
  • peekViewResult.background#22262b
  • peekViewResult.selectionBackground#abb2bf30
  • peekViewTitle.background#30353B
  • peekViewTitleLabel.foreground#E8EAED
  • pickerGroup.border#575658
  • quickInput.background#282c34
  • scrollbar.shadow#23252c
  • scrollbarSlider.activeBackground#747d9180
  • scrollbarSlider.background#4e566660
  • scrollbarSlider.hoverBackground#5a637580
  • sideBar.background#22252A
  • sideBar.foreground#abb2bf
  • sideBarSectionHeader.background#22252A
  • statusBar.background#343840
  • statusBar.debuggingBackground#515761
  • statusBar.debuggingBorder#515761
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#8292ac
  • statusBar.foreground#ffffff
  • statusBar.noFolderBackground#232933
  • statusBarItem.focusBorder#8292ac
  • statusBarItem.hoverBackground#232933
  • tab.activeBackground#2d3035
  • tab.activeBorder#b4b4b4
  • tab.border#282c34
  • tab.hoverBackground#323842
  • tab.inactiveBackground#24262b
  • tab.unfocusedHoverBackground#323842
  • terminal.ansiBlack#2D3139
  • terminal.ansiBlue#61AFEF
  • terminal.ansiBrightMagenta#CAA6ED
  • terminal.ansiGreen#92D69E
  • terminal.ansiMagenta#CAA6ED
  • terminal.ansiYellow#EBB07A
  • terminal.foreground#abb2bf
  • titleBar.activeBackground#282c34
  • titleBar.activeForeground#9da5b4
  • titleBar.inactiveBackground#282c34
  • titleBar.inactiveForeground#9da5b4

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.constant.edge#C792EA
constant.other.character-class.regexp#db7079ff
keyword.operator.quantifier.regexp#EBB07Aff
punctuation.definition.string.begin,punctuation.definition.string.end#92D69E
variable.parameter.function#A6B2C0
beginning.punctuation.definition.list.markdown.xi#7f848e
comment, punctuation.definition.comment#7F848Enormal
comment markup.link#5C6370
markup.changed.diff#e0c285
meta.diff.header.from-file,punctuation.definition.from-file.diff#569cd6
markup.inserted.diff#92D69E
markup.deleted.diff#db7079
meta.function.c#db7079
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#abb2bf
punctuation.separator.key-value#bbbbbb
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
keyword.operator.expression.import#61afef
support.constant.math#DBB979
support.constant.property.math#EBB07A
variable.other.constant#E5C07B
storage.type.annotation.java#DBB979
source.java#db7079
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,storage.type.generic.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,meta.method.body.java#abb2bf
meta.method.java#61afef
storage.modifier.import.java,storage.type.java#DBB979
meta.definition.variable.name.java#db7079
keyword.operator.logical.js#56b6c2
keyword.operator.bitwise#56b6c2
keyword.operator.channel#56b6c2
support.constant.property-value.scss,support.constant.property-value.css#EBB07A
keyword.operator.css,keyword.operator.scss,keyword.operator.less#56B6C2
support.constant.color.w3c-standard-color-name.css,support.constant.color.w3c-standard-color-name.scss#EBB07A
punctuation.separator.list.comma.css#b9c0ca
support.constant.color.w3c-standard-color-name.css#EBB07A
support.type.vendored.property-name.css#56b6c2
punctuation.definition.template-expression.begin,punctuation.definition.template-expression.end#db7079
support.module.node,support.type.object.module,support.module.node#DBB979
variable.other.readwrite,meta.object-literal.key,support.variable.property,support.variable.object.process,support.variable.object.node#db7079
comment.line.double-slash,comment.block.documentationnormal
support.constant.json#EBB07A
keyword.operator.expression.instanceof, keyword.operator.new, keyword.operator.ternary, keyword.operator.optional#C792EA
support.type.object.console#db7079
support.variable.property.process#EBB07A
entity.name.function,support.function.console#61afef
keyword.operator#56b6c2
support.type.object.dom#56b6c2
support.variable.dom,support.variable.property.dom#db7079
keyword.operator.arithmetic,keyword.operator.comparison,keyword.operator.decrement,keyword.operator.increment#56b6c2
keyword.operator.assignment.c,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c#C792EAff
punctuation.separator.delimiter#bbbbbb
punctuation.separator.c#C792EAff
support.type.posix-reserved.c#57adb8
keyword.operator.sizeof.c#C178DD
variable.parameter.function.language.python#EBB07A
support.type.python#56b6c2
keyword.operator.logical.python#C792EA
meta.function-call.arguments.python#E06C60
meta.function-call.python#E06C60
variable.parameter.function.python#D18C4E
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python,meta.function-call.arguments.python#abb2bf
meta.function-call.generic.python#61afef
constant.character.format.placeholder.other.python#92D69E
none#A6B2C0
keyword.operator#abb2bf
keyword.operator.assignment.compound#C792EAff
keyword#C792EA
variable#db7079
variable.other.constant.property#db7079
token.variable.parameter.java#abb2bf
import.storage.java#DBB979
token.package.keyword#C792EA
token.package#abb2bf
entity.name.function, meta.require, support.function.any-method, variable.function#61afef
entity.name.type.namespace#DBB979
support.class, entity.name.type.class#DBB979
entity.name.class.identifier.namespace.type#DBB979
entity.name.class, variable.other.class.js, variable.other.class.ts#DBB979
variable.other.class.php#db7079ff
entity.name.type#DBB979
keyword.control#C792EA
control.elements, keyword.operator.less#EBB07A
keyword.other.special-method#61afef
storage#C792EA
token.storage#C792EA
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#C792EA
token.storage.type.java#DBB979
support.function#56b6c2
support.type.property-name#abb2bf
support.constant.property-value#abb2bf
support.constant.font-name#EBB07A
meta.tag#abb2bf
string, entity.other.inherited-class#92D69E
constant.other.symbol#56b6c2
constant.numeric#EBB07A
none#EBB07A
none#EBB07A
constant#EBB07A
punctuation.definition.constant#EBB07A
entity.name.tag#db7079
entity.other.attribute-name#EBB07A
entity.other.attribute-name.id#61afefnormal
entity.other.attribute-name.class.css#EBB07Anormal
meta.selector#C792EA
none#D2945D
markup.heading#C792EA
markup.heading punctuation.definition.heading, entity.name.section#61afef
keyword.other.unit#db7079
markup.bold,todo.bold#92D69E
punctuation.definition.bold#DBB979
markup.italic, punctuation.definition.italic,todo.emphasis#C792EA
emphasis md#C792EA
entity.name.section.markdown#C792EA
punctuation.definition.heading.markdown#C792EA
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#92D69E
markup.inline.raw.markdown#92D69E
markup.inline.raw.string.markdown#92D69E
punctuation.definition.list.markdown#db7079
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#db7079
beginning.punctuation.definition.list.markdown#db7079
punctuation.definition.metadata.markdown#db7079
markup.underline.link.markdown,markup.underline.link.image.markdown#C792EA
string.other.link.title.markdown,string.other.link.description.markdown#61AFEF
markup.italic.markdownitalic
markup.bold.markdown
string.regexp#57B6C2
constant.character.escape#57B6C2
punctuation.section.embedded, variable.interpolation#BE4F44
invalid.illegal#FFFFFF
invalid.broken#FFFFFF
invalid.deprecated#FFFFFF
invalid.unimplemented#FFFFFF
source.json meta.structure.dictionary.json > string.quoted.json#db7079
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#db7079
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#92D69E
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#56B6C2
support.type.property-name.json#C792EA
support.type.property-name.json punctuation#C792EA
text.html.laravel-blade source.php.embedded.line.html entity.name.tag.laravel-blade#C679DD
text.html.laravel-blade source.php.embedded.line.html support.constant.laravel-blade#C679DD
support.other.namespace.use.php,support.other.namespace.use-as.php,support.other.namespace.php,entity.other.alias.php,meta.interface.php#DBB979
keyword.operator.error-control.php#C792EA
keyword.operator.type.php#C792EA
punctuation.section.array.begin.php#abb2bf
punctuation.section.array.end.php#abb2bf
invalid.illegal.non-null-typehinted.php#ff0000
storage.type.php,meta.other.type.phpdoc.php,keyword.other.type.php,keyword.other.array.phpdoc.php#DBB979
meta.function-call.php,meta.function-call.object.php,meta.function-call.static.php#61afef
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#bbbbbb
support.constant.ext.php,support.constant.std.php,support.constant.core.php,support.constant.parser-token.php#EBB07A
entity.name.goto-label.php,support.other.php#61afef
keyword.operator.logical.php,keyword.operator.bitwise.php,keyword.operator.arithmetic.php#56b6c2
keyword.operator.regexp.php#C792EA
keyword.operator.comparison.php#56b6c2
punctuation.definition.variable.php#db7079
keyword.operator.heredoc.php,keyword.operator.nowdoc.php#C792EA
meta.function.decorator.python#61afef
support.token.decorator.python,meta.function.decorator.identifier.python#56B6C2
function.parameter#EBB07A
function.parameter#abb2bf
function.brace#abb2bf
function.parameter.ruby, function.parameter.cs#abb2bf
rgb-value#56B6C2
inline-color-decoration rgb-value#EBB07A
less rgb-value#EBB07A
selector.sass#db7079
var.this,variable.language.this.js,variable.language.this.ts,variable.language.this.jsx,variable.language.this.tsx#DBB979italic
support.type.primitive.ts,support.type.builtin.ts,support.type.primitive.tsx,support.type.builtin.tsx#DBB979
block.scope.end,block.scope.begin#abb2bf
storage.type.cs#DBB979ff
entity.name.variable.local.cs#db7079
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#C792EA
meta.template.expression#abb2bf
keyword.operator.assignment.go, keyword.operator.address.go#DBB979
entity.name.package.go#DBB979
support.type.prelude.elm#56b6c2ff
support.constant.elm#EBB07Aff
punctuation.quasi.element#C792EA
constant.character.entity#db7079
entity.other.attribute-name.pseudo-element, entity.other.attribute-name.pseudo-class#56B6C2
entity.global.clojure#DBB979
meta.symbol.clojure#db7079
constant.keyword.clojure#56B6C2
meta.arguments.coffee, variable.parameter.function.coffee#db7079
source.ini#92D69E
meta.scope.prerequisites.makefile#db7079
source.makefile#DBB979
storage.modifier.import.groovy#DBB979
meta.method.groovy#61afef
meta.definition.variable.name.groovy#db7079
meta.definition.class.inherited.classes.groovy#92D69E
support.variable.semantic.hlsl#DBB979
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#C792EA
text.variable, text.bracketed#db7079
support.type.swift, support.type.vb.asp#DBB979

Shiki preview

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

Loading...

One Dark Modern - Coding Theme