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#FDF6E3
  • activityBar.foreground#586E75
  • activityBar.inactiveForeground#93A1A1
  • activityBarBadge.background#D33682
  • activityBarBadge.foreground#FDF6E3
  • badge.background#D33682
  • badge.foreground#FDF6E3
  • breadcrumb.focusForeground#657B83
  • breadcrumb.foreground#93A1A1
  • diffEditor.insertedLineBackground#85990020
  • diffEditor.insertedTextBackground#85990030
  • diffEditor.removedLineBackground#DC322F20
  • diffEditor.removedTextBackground#DC322F30
  • editor.background#FDF6E3
  • editor.findMatchBackground#EEE8D5
  • editor.findMatchBorder#93A1A1
  • editor.findMatchHighlightBackground#EEE8D5
  • editor.foreground#657B83
  • editor.hoverHighlightBackground#EEE8D5
  • editor.hoverHighlightBorder#93A1A1
  • editor.lineHighlightBackground#EEE8D5
  • editor.selectionBackground#EEE8D5
  • editor.selectionForeground#586E75
  • editor.selectionHighlightBackground#EEE8D5
  • editor.selectionHighlightBorder#93A1A1
  • editor.wordHighlightBackground#EEE8D5
  • editor.wordHighlightBorder#93A1A1
  • editor.wordHighlightStrongBackground#EEE8D5
  • editor.wordHighlightStrongBorder#586E75
  • editorBracketHighlight.foreground1#268BD2
  • editorBracketHighlight.foreground2#859900
  • editorBracketHighlight.foreground3#6C71C4
  • editorBracketHighlight.foreground4#2AA198
  • editorBracketHighlight.foreground5#B58900
  • editorBracketHighlight.foreground6#D33682
  • editorBracketHighlight.unexpectedBracket.foreground#DC322F
  • editorCursor.background#FDF6E3
  • editorCursor.foreground#93A1A1
  • editorGroupHeader.tabsBackground#FDF6E3
  • editorInlayHint.background#FDF6E300
  • editorInlayHint.foreground#93A1A1
  • editorInlayHint.parameterBackground#FDF6E300
  • editorInlayHint.parameterForeground#93A1A1
  • editorInlayHint.typeBackground#FDF6E300
  • editorInlayHint.typeForeground#93A1A1
  • editorLightBulb.foreground#B58900
  • editorLightBulbAutoFix.foreground#B58900
  • editorLineNumber.activeForeground#657B83
  • editorLineNumber.foreground#93A1A1
  • editorWidget.background#FDF6E3
  • editorWidget.foreground#657B83
  • errorLens.errorBackground#DC322F20
  • errorLens.errorForeground#DC322F
  • errorLens.hintBackground#2AA19820
  • errorLens.hintForeground#2AA198
  • errorLens.infoBackground#85990020
  • errorLens.infoForeground#859900
  • errorLens.warningBackground#B5890020
  • errorLens.warningForeground#B58900
  • extensionBadge.remoteBackground#D33682
  • extensionBadge.remoteForeground#FDF6E3
  • focusBorder#93A1A1
  • foreground#657B83
  • icon.foreground#93A1A1
  • input.background#FDF6E3
  • input.foreground#657B83
  • input.placeholderForeground#93A1A1
  • inputOption.activeBackground#EEE8D5
  • inputOption.activeForeground#586E75
  • list.activeSelectionBackground#EEE8D5
  • list.activeSelectionForeground#586E75
  • list.errorForeground#DC322F
  • list.focusBackground#EEE8D5
  • list.focusForeground#586E75
  • list.hoverBackground#EEE8D5
  • list.hoverForeground#586E75
  • list.inactiveSelectionBackground#EEE8D5
  • list.inactiveSelectionForeground#586E75
  • list.warningForeground#B58900
  • panel.border#93A1A100
  • quickInputList.focusBackground#EEE8D5
  • quickInputList.focusForeground#586E75
  • scrollbar.shadow#FDF6E300
  • selection.background#EEE8D5
  • sideBar.background#FDF6E3
  • statusBar.background#FDF6E3
  • statusBar.debuggingBackground#FDF6E3
  • statusBar.foreground#93A1A1
  • statusBar.noFolderBackground#FDF6E3
  • statusBarItem.errorBackground#DC322F
  • statusBarItem.errorForeground#FDF6E3
  • statusBarItem.warningBackground#B58900
  • statusBarItem.warningForeground#FDF6E3
  • tab.activeBackground#EEE8D5
  • tab.activeForeground#586E75
  • tab.inactiveBackground#FDF6E3
  • tab.inactiveForeground#93A1A1
  • terminal.ansiBlack#EEE8D5
  • terminal.ansiBlue#268BD2
  • terminal.ansiBrightBlack#93A1A1
  • terminal.ansiBrightBlue#268BD2
  • terminal.ansiBrightCyan#2AA198
  • terminal.ansiBrightGreen#859900
  • terminal.ansiBrightMagenta#D33682
  • terminal.ansiBrightRed#CB4B16
  • terminal.ansiBrightWhite#586E75
  • terminal.ansiBrightYellow#B58900
  • terminal.ansiCyan#2AA198
  • terminal.ansiGreen#859900
  • terminal.ansiMagenta#6C71C4
  • terminal.ansiRed#DC322F
  • terminal.ansiWhite#586E75
  • terminal.ansiYellow#B58900
  • terminal.foreground#657B83
  • terminalCursor.background#FDF6E3
  • terminalCursor.foreground#93A1A1
  • titleBar.activeBackground#FDF6E3
  • titleBar.activeForeground#657B83
  • titleBar.inactiveBackground#FDF6E3
  • titleBar.inactiveForeground#93A1A1
  • widget.shadow#FDF6E300

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
keyword#859900
storage#859900
variable.language.self#859900
variable.language.this#859900
keyword.type.go#859900
keyword.control#D33682
entity.name.type#B58900
keyword.type#B58900
storage.type.cs#B58900
storage.type.java#B58900
storage.type.boolean.go#B58900
storage.type.byte.go#B58900
storage.type.error.go#B58900
storage.type.numeric.go#B58900
storage.type.rune.go#B58900
storage.type.string.go#B58900
storage.type.uintptr.go#B58900
entity.name.type.interface#6C71C4
entity.name.type.type-parameter#6C71C4
constant#2AA198
constant.numeric#2AA198
string#2AA198
entity.name.variable.field#268BD2
entity.name.variable.property#268BD2
variable.other.member#268BD2
variable.other.object.property#268BD2
variable.other.readwrite.instance#268BD2
support.type.property-name#268BD2
entity.name.variable.enum-member#2AA198
constant.other.enum#2AA198
variable.other.enummember#2AA198
entity.name.type.option#2AA198
entity.name.type.result#2AA198
entity.name.function.macro#D33682
entity.name.function.preprocessor#D33682
constant.other.placeholder#DC322F
punctuation.definition.interpolation#DC322F
punctuation.section.embedded#DC322F
constant.character.escape#DC322F
comment#93A1A1italic
comment.line.documentation#657B83italic
comment.block.documentation#657B83italic
comment.block.javadoc#657B83italic
entity.name.function.decorator#93A1A1
storage.type.annotation#93A1A1
punctuation.definition.annotation#93A1A1
keyword.operator#657B83
markup.deleted#DC322F
markup.inserted#859900
markup.changed#268BD2
meta.diff#93A1A1
comment.line.number-sign.git-commit#93A1A1
invalid.deprecated.line-too-long.git-commit#D33682
invalid.illegal.line-too-long.git-commit#DC322F

Shiki preview

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

Loading...