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#3e3722
  • activityBar.dropBackground#2a2411
  • activityBar.foreground#d8cca7
  • activityBarBadge.background#ffd34a
  • activityBarBadge.foreground#000
  • badge.background#ffd34aab
  • button.background#a89953
  • debugExceptionWidget.background#3e3722
  • debugExceptionWidget.border#c65476
  • debugToolBar.background#3e3722
  • dropdown.background#2a2411
  • dropdown.border#79552c
  • editor.background#1c1502
  • editor.lineHighlightBackground#2a2411
  • editor.selectionBackground#2a2411
  • editor.selectionHighlightBackground#2a2411
  • editorCursor.foreground#7c929a
  • editorGroup.background#0d0900
  • editorGroup.border#3e3722
  • editorGroup.dropBackground#3e3722ab
  • editorGroupHeader.tabsBackground#3d3626
  • editorHoverWidget.background#4f4733
  • editorIndentGuide.activeBackground#4f4733
  • editorIndentGuide.background#2c2612
  • editorLineNumber.activeForeground#999999
  • editorLineNumber.foreground#333333
  • editorWhitespace.foreground#8aa0a780
  • editorWidget.background#2a2411
  • extensionButton.prominentBackground#ffd34a
  • extensionButton.prominentHoverBackground#d8cca7ab
  • focusBorder#79552c
  • input.background#3e3722
  • input.foreground#8aa0a7
  • input.placeholderForeground#8aa0a7ab
  • inputOption.activeBorder#79552c
  • list.activeSelectionBackground#776220
  • list.activeSelectionForeground#939393
  • list.focusBackground#77622066
  • list.highlightForeground#ffd34a
  • list.hoverBackground#77622045
  • list.inactiveSelectionBackground#47412e
  • notification.background#877f66
  • panel.border#3e3722
  • peekView.border#ffd34a
  • peekViewEditor.background#0d0900
  • peekViewEditor.matchHighlightBackground#8855bb40
  • peekViewResult.background#2a2411
  • peekViewTitle.background#2a2411
  • pickerGroup.border#5ed5cc99
  • pickerGroup.foreground#5ed5cc99
  • progressBar.background#ffd34a
  • selection.background#4f4733
  • sideBar.background#2a2411
  • sideBarTitle.foreground#8aa0a7
  • statusBar.background#2a2411
  • statusBar.debuggingBackground#2a2411
  • statusBar.foreground#8aa0a7
  • statusBar.noFolderBackground#2a2411
  • statusBarItem.prominentBackground#3e3722
  • statusBarItem.prominentHoverBackground#3e372299
  • tab.activeBackground#1c1502
  • tab.border#3e3722
  • tab.inactiveBackground#48402c
  • tab.inactiveForeground#8aa0a7
  • terminal.ansiBlack#bdecf8
  • terminal.ansiBlue#2d92d9
  • terminal.ansiBrightBlack#8aa0a7
  • terminal.ansiBrightBlue#697a7c
  • terminal.ansiBrightCyan#5e6c6c
  • terminal.ansiBrightGreen#8aa0a7
  • terminal.ansiBrightMagenta#3b4093
  • terminal.ansiBrightRed#e96934
  • terminal.ansiBrightWhite#777777
  • terminal.ansiBrightYellow#7c929a
  • terminal.ansiCyan#5ed5cc
  • terminal.ansiGreen#ebff66
  • terminal.ansiMagenta#c92c78
  • terminal.ansiRed#d02623
  • terminal.ansiWhite#888888
  • terminal.ansiYellow#ffd34a
  • titleBar.activeBackground#2a2411

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
emphasisitalic
strongbold
header#ffffffba
comment, punctuation.definition.comment#ffffff33
punctuation.definition.string.template#ffffffba
constant, support.constant, variable.arguments#ffffffba
constant.character.entity#ffffff36
constant.rgb-value#ffffffba
entity.name.selector#ffffffba
entity.other.attribute-name#ffffffba
entity.other.inherited-class#ffffffba
entity.name.tag, punctuation.tag#ffffff36
invalid, invalid.illegal#f44336
invalid.deprecated#ff0266
meta.selector#ffffffba
meta.preprocessor#ffffffba
meta.preprocessor.string#ffffffba
meta.preprocessor.numeric#ffffffba
meta.header.diff#ffffffba
storage#ffffff36
storage.modifier#ffffff36
string#ffffffba
string.quoted.double#ffffffba
string.tag#ffffff36
string.value#ffffffba
string.regexp#ffffffba
string.escape#ffffff36
string.quasi#ffffff36
string.entity#ffffffba
object#ffffffba
module.node#ffffffba
support.type.property-name#ffffffba
keyword#ffffff36
keyword.control#ffffff36
keyword.control.try, keyword.control.catch#ffffffba
keyword.control.conditional, keyword.control.loop#ffffffba
keyword.control.module#ffffffba
keyword.control.less#ffffffba
keyword.operator#ffffff36
keyword.operator.new#ffffff36
keyword.other.unit#ffffffba
metatag.php#ffffffba
support.function.git-rebase#ffffffba
constant.sha.git-rebase#ffffffba
meta.type.name, meta.return.type, meta.return-type, meta.cast, support.type, storage.type.cs, variable.class#ffffff36
variable.this, support.variable#ffffffba
entity.static, entity.name.class.static.function, entity.name.function, entity.name.class, entity.name.type.class#ffffffba
meta.type.annotation, meta.type.parameters#ffffff36
storage.type.function, entity.function, entity.name.function.static, meta.delimiter#ffffff36
entity.name.function.function-call#ffffffba
support.function.builtin#ffffffba
entity.name.method, entity.name.method.function-call, entity.name.static.function-call#ffffff36
brace, meta.brace.round, meta.brace.square, meta.brace.curly#ffffff36
meta.parameter.type.variable, variable.parameter, variable.name, variable.other, variable, string.constant.other.placeholder#ffffffba
prototype#ffffffba
storage.type.class#ffffff36
punctuation#ffffff36
punctuation.quoted#ffffff36
punctuation.quasi#ffffff36
punctuation.accessor, keyword.operator.accessor#ffffffba
*url*, *link*, *uri*underline
text.haml#ffffff80
meta.function.python, entity.name.function.python#ffffffba
storage.type.function.python, storage.modifier.declaration, storage.type.class.python#ffffff36
meta.function-call.generic#ffffffba
meta.function-call.arguments#ffffffba
entity.name.function.decorator#ffffff36
constant.other.caps#ffffffba
keyword.operator.logical#ffffff36
punctuation.definition.logical-expression#ffffff36
string.inperpolated.dollar.shell#ffffff36
string.interpolated.dollar.shell, string.interpolated.backtick.shell#ffffff36
keyword.control.directive#ffffff36
support.function.C99 , keyword.control.c#ffffffba
meta.scope.prerequisites#fabd2f
entity.name.function.target#b8bb26bold
storage.modifier.import.java, storage.modifier.package.java#ffffffba
keyword.other.import.java, keyword.other.package.java#ffffffba
storage.type.java#ffffff36
storage.type.annotation#ffffff36
keyword.other.documentation.javadoc#ffffff36
comment.block.javadoc variable.parameter.java#ffffffba
source.java variable.other.object, source.java variable.other.definition.java#ffffffba
punctuation.separator.period#ffffffba
meta.function-parameters.lisp#fabd2f
markup.underlineunderline
string.other.link.title.markdown#ffffffbaunderline
markup.underline.link#ffffffba
markup.bold#ffffffbabold
markup.heading#ffffffbabold
markup.italicitalic
markup.inserted#ffffffba
markup.deleted#ffffffba
markup.changed#ffffffba
markup.punctuation.quote.beginning#ffffff36
markup.punctuation.list.beginning#ffffff36
markup.inline.raw, markup.fenced_code.block#ffffffba
string.quoted.double.json#ffffffba
source.json meta.structure.dictionary.json support.type.property-name.json#ffffffba
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffffffba
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffffffba
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#ffffffba
entity.other.attribute-name.css#ffffffba
source.css meta.selector#ffffffba
support.type.property-name.css#ffffffba
entity.other.attribute-name.class, punctuation.definition.entity#ffffffba
source.css support.function.transform, source.css support.function.timing-function, source.css support.function.misc#ffffffba
support.property-value, constant.rgb-value, support.property-value.scss, constant.rgb-value.scss#ffffffba
entity.name.tag.css#ffffff36
punctuation.definition.tag, cast.expr#ffffff36
text.html entity.name.tag, text.html punctuation.tag#ffffff36
source.js variable.language#ffffff36
support.type.object#ffffffba
source.ts variable.language#ffffff36
source.go storage.type#ffffff36
source.go entity.name.import#ffffffba
punctuation.other.period#ffffffba
source.go keyword.package, source.go keyword.import#ffffff36
source.go keyword.interface, source.go keyword.struct#ffffff36
source.go entity.name.type#ffffffba
source.go entity.name.function#ffffffba
keyword.control.cucumber.table#ffffffba
source.reason string.double, source.reason string.regexp#ffffffba
source.reason keyword.control.less#ffffff36
source.reason entity.name.function#ffffffba
source.reason support.property-value, source.reason entity.name.filename#ffffffba
source.powershell variable.other.member.powershell#ffffffba
source.powershell support.function.powershell#ffffff36
keyword.control.powershell#ffffffba
source.powershell support.function.attribute.powershell#ffffffba
source.powershell meta.hashtable.assignment.powershell variable.other.readwrite.powershell#ffffff36
keyword.operator.new#ffffffbabold
variable.language.this.js#ffffffba
keyword.operator.logical.js#ffffffba
keyword.operator.comparison.js#ffffffbabold
string.quoted#ffffffba
comment#ffffff4f
keyword.control#ffffffbabold
keyword.generator.asterisk.js#ffffffbabold
text.html entity.name.tag#ffffffba
entity.name.tag#ffffffba
source.vue text.html entity.name.tag#ffffffba
source.vue entity.name.tag#ffffff36
entity.name.function.decorator.python#ffffffba
support.type.python, support.type.metaclass.python#ffffffba
support.type.exception.python#ffffffbabold
token.info-token#6796e6
token.warn-token#cd9731
token.error-token#f44747
token.debug-token#b267e6
keyword.other.debugger, support.function.console.js, support.class.console.js#fe2c2d

Shiki preview

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

Loading...