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.activeBackground#2D322D
  • activityBar.activeBorder#FF5D62
  • activityBar.background#121622
  • activityBar.border#2D322D
  • activityBar.foreground#A0A8B7
  • activityBarBadge.background#89DDFF
  • activityBarBadge.foreground#1A1F1A
  • editor.background#1A1E23
  • editor.findMatchBackground#4E5E5399
  • editor.findMatchHighlightBackground#4E5E5366
  • editor.foreground#D4D9E4
  • editor.lineHighlightBackground#2A303A
  • editor.selectionBackground#303540
  • editor.selectionHighlightBackground#37423c
  • editor.wordHighlightBackground#3D454080
  • editor.wordHighlightStrongBackground#4E5E5380
  • editorBracketMatch.background#3D454080
  • editorBracketMatch.border#5D6963
  • editorCursor.foreground#FFCC66
  • editorGroup.border#2D322D
  • editorGroup.dropBackground#3D454080
  • editorGroupHeader.noTabsBackground#1A1F1A
  • editorGroupHeader.tabsBackground#1A1F1A
  • editorGroupHeader.tabsBorder#2D322D
  • editorIndentGuide.activeBackground#3D4540
  • editorIndentGuide.background#2D322D
  • editorLineNumber.activeForeground#BBD99E
  • editorLineNumber.foreground#5D6963
  • editorRuler.foreground#3D4540
  • editorWhitespace.foreground#3D4540
  • gitDecoration.conflictingResourceForeground#BB80FF
  • gitDecoration.deletedResourceForeground#F07178
  • gitDecoration.ignoredResourceForeground#5D6963
  • gitDecoration.modifiedResourceForeground#FFCC66
  • gitDecoration.untrackedResourceForeground#BBD99E
  • list.activeSelectionBackground#32393680
  • list.activeSelectionForeground#D4D7D6
  • list.focusBackground#32393680
  • list.highlightForeground#89DDFF
  • list.hoverBackground#32393680
  • list.inactiveSelectionBackground#2D322D
  • panel.background#1A1F1A
  • panel.border#2D322D
  • panelTitle.activeForeground#D4D7D6
  • panelTitle.inactiveForeground#8B9891
  • scrollbarSlider.activeBackground#5D696380
  • scrollbarSlider.background#3D454080
  • scrollbarSlider.hoverBackground#4E5E5380
  • sideBar.background#151A20
  • sideBar.border#2D322D
  • sideBar.foreground#A0A8B7
  • sideBarSectionHeader.background#1A1F1A
  • sideBarSectionHeader.border#2D322D
  • sideBarSectionHeader.foreground#8B9891
  • sideBarTitle.foreground#D4D7D6
  • statusBar.background#151A20
  • statusBar.border#2D322D
  • statusBar.debuggingBackground#FF9D8F
  • statusBar.debuggingForeground#1A1F1A
  • statusBar.foreground#A0A8B7
  • statusBar.noFolderBackground#1A1F1A
  • statusBarItem.activeBackground#2D322D
  • statusBarItem.hoverBackground#2D322D
  • statusBarItem.prominentBackground#89DDFF33
  • statusBarItem.prominentHoverBackground#89DDFF66
  • tab.activeBackground#1E2330
  • tab.activeBorder#89DDFF
  • tab.activeForeground#D4D9E4
  • tab.border#1A1F1A
  • tab.hoverBackground#2D322D
  • tab.inactiveBackground#151A20
  • tab.inactiveForeground#8B9891
  • tab.unfocusedActiveBorder#5D6963
  • tab.unfocusedActiveForeground#8B9891
  • tab.unfocusedInactiveForeground#8B9891
  • terminal.ansiBlack#1A1F1A
  • terminal.ansiBlue#89DDFF
  • terminal.ansiBrightBlack#5D6963
  • terminal.ansiBrightBlue#7DCFFF
  • terminal.ansiBrightCyan#7DCFFF
  • terminal.ansiBrightGreen#BBD99E
  • terminal.ansiBrightMagenta#BB80FF
  • terminal.ansiBrightRed#F07178
  • terminal.ansiBrightWhite#D4D7D6
  • terminal.ansiBrightYellow#FFCC66
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#BBD99E
  • terminal.ansiMagenta#BB80FF
  • terminal.ansiRed#F07178
  • terminal.ansiWhite#D4D7D6
  • terminal.ansiYellow#E5C07B
  • terminal.background#151A20
  • terminal.foreground#D4D9E4
  • titleBar.activeBackground#1A1F1A
  • titleBar.activeForeground#8B9891
  • titleBar.border#2D322D
  • titleBar.inactiveBackground#1A1F1A
  • titleBar.inactiveForeground#5D6963

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#D4D7D6
comment#5D6963
comment punctuation, comment.block punctuation, comment string.quoted, comment punctuation.definition, comment punctuation.definition.string#5D6963
string#E5C07B
constant.numeric#C3E88D
constant.language#FF9CAC
constant.character, constant.other#BB80FF
variable#C8DFFF
keyword#29BFFF
storage#29BFFF
storage.type#29BFFF
entity.name.class#7DCFFF
entity.other.inherited-class#7DCFFFunderline
entity.name.function#FF9D8F
variable.parameter#E4AA7A
entity.name.tag#F07178
entity.other.attribute-name#BBD99E
support.function#7DCFFF
support.constant#BB80FF
support.type, support.class#7DCFFF
support.other.variable#F07178
invalid#D4D7D6
invalid.deprecated#D4D7D6
support.type.property-name.json#7DCFFF
string.quoted.double.json, constant.numeric.json, constant.language.json#E5C07B
entity.name.import, entity.name.package#E5C07B
entity.name#7DCFFF
meta.object-literal.key, meta.object.member, meta.structure.dictionary.key#F07178
variable.other.constant, variable.other.object.property, variable.other.property#C8DFFF
meta.type.parameters.ts, meta.type.parameters.tsx, meta.type.annotation#7DCFFF
meta.object-literal.key, entity.name.function.method#F07178
support.constant.property-value.css, support.constant.property-value.scss, support.constant.property-value.less#E5C07B
string.regexp, constant.regexp#89DDFF
support.type.object.console, support.function.console#F07178
storage.type.function.arrow.ts, storage.type.function.arrow.js#FF5D62
string.template punctuation.definition.string#89DDFF
variable.language.this#FF9CAC
markup.heading#89DDFF
markup.bold#F07178bold
markup.italic#BBD99E
markup.underline.link, string.other.link#7DCFFF
meta.function.decorator.python, meta.decorator.python#BB80FF
meta.selectionset.graphql variable#E5C07B

Shiki preview

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

Loading...

Tsukuyomi - Coding Theme