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#DDD6C1
  • activityBar.dropBackground#EEE8D5
  • activityBar.foreground#584c27
  • activityBarBadge.background#B58900
  • badge.background#B58900AA
  • button.background#AC9D57
  • debugExceptionWidget.background#DDD6C1
  • debugExceptionWidget.border#AB395B
  • debugToolBar.background#DDD6C1
  • dropdown.background#EEE8D5
  • dropdown.border#D3AF86
  • editor.background#FDF6E3
  • editor.lineHighlightBackground#EEE8D5
  • editor.selectionBackground#EEE8D5
  • editor.selectionHighlightBackground#EEE8D5
  • editorCursor.foreground#657B83
  • editorGroup.background#FFFBF2
  • editorGroup.border#DDD6C1
  • editorGroup.dropBackground#DDD6C1AA
  • editorGroupHeader.tabsBackground#D9D2C2
  • editorHoverWidget.background#CCC4B0
  • editorIndentGuide.activeBackground#CCC4B0
  • editorIndentGuide.background#EDE7D3
  • editorLineNumber.activeForeground#666666
  • editorLineNumber.foreground#CCCCCC
  • editorWhitespace.foreground#586E7580
  • editorWidget.background#EEE8D5
  • extensionButton.prominentBackground#b58900
  • extensionButton.prominentHoverBackground#584c27aa
  • focusBorder#D3AF86
  • input.background#DDD6C1
  • input.foreground#586E75
  • input.placeholderForeground#586E75AA
  • inputOption.activeBorder#D3AF86
  • list.activeSelectionBackground#DFCA88
  • list.activeSelectionForeground#6C6C6C
  • list.focusBackground#DFCA8866
  • list.highlightForeground#B58900
  • list.hoverBackground#DFCA8844
  • list.inactiveSelectionBackground#D1CBB8
  • notification.background#999178
  • panel.border#DDD6C1
  • peekView.border#B58900
  • peekViewEditor.background#FFFBF2
  • peekViewEditor.matchHighlightBackground#7744AA40
  • peekViewResult.background#EEE8D5
  • peekViewTitle.background#EEE8D5
  • pickerGroup.border#2AA19899
  • pickerGroup.foreground#2AA19899
  • progressBar.background#B58900
  • selection.background#CCC4B0
  • sideBar.background#EEE8D5
  • sideBarTitle.foreground#586E75
  • statusBar.background#EEE8D5
  • statusBar.debuggingBackground#EEE8D5
  • statusBar.foreground#586E75
  • statusBar.noFolderBackground#EEE8D5
  • statusBarItem.prominentBackground#DDD6C1
  • statusBarItem.prominentHoverBackground#DDD6C199
  • tab.activeBackground#FDF6E3
  • tab.border#DDD6C1
  • tab.inactiveBackground#D3CBB7
  • tab.inactiveForeground#586E75
  • terminal.ansiBlack#073642
  • terminal.ansiBlue#268bd2
  • terminal.ansiBrightBlack#586e75
  • terminal.ansiBrightBlue#839496
  • terminal.ansiBrightCyan#93a1a1
  • terminal.ansiBrightGreen#586e75
  • terminal.ansiBrightMagenta#6c71c4
  • terminal.ansiBrightRed#cb4b16
  • terminal.ansiBrightWhite#888
  • terminal.ansiBrightYellow#657b83
  • terminal.ansiCyan#2aa198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#d33682
  • terminal.ansiRed#dc322f
  • terminal.ansiWhite#777
  • terminal.ansiYellow#b58900
  • titleBar.activeBackground#EEE8D5

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

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

Shiki preview

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

Loading...