Skip to main content
Coding Theme

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#202020
  • activityBar.foreground#d0d0d0
  • activityBar.inactiveForeground#808080
  • activityBarBadge.background#6C95EB
  • activityBarBadge.foreground#FFFFFF
  • badge.background#6C95EB
  • badge.foreground#ffffff
  • button.background#6C95EB
  • button.foreground#ffffff
  • diffEditor.insertedTextBackground#29421F40
  • diffEditor.removedTextBackground#61272240
  • dropdown.background#303030
  • dropdown.border#202020
  • dropdown.foreground#d0d0d0
  • editor.background#202020
  • editor.findMatchBackground#144238
  • editor.findMatchHighlightBackground#48401280
  • editor.foreground#D0D0D0
  • editor.lineHighlightBackground#202424
  • editor.selectionBackground#08335e
  • editor.selectionHighlightBackground#08335e80
  • editor.wordHighlightBackground#232E4680
  • editor.wordHighlightStrongBackground#232E4680
  • editorBracketMatch.background#422240
  • editorBracketMatch.border#422240
  • editorCursor.background#000000
  • editorCursor.foreground#F0F0F0
  • editorError.foreground#FF5647
  • editorGroupHeader.tabsBackground#202020
  • editorGroupHeader.tabsBorder#202020
  • editorGutter.addedBackground#2C4722
  • editorGutter.background#202020
  • editorGutter.deletedBackground#BF3428
  • editorGutter.modifiedBackground#293A5F
  • editorIndentGuide.activeBackground1#404040
  • editorIndentGuide.background1#404040
  • editorInfo.foreground#787878
  • editorLineNumber.activeForeground#F0F0F0
  • editorLineNumber.foreground#808080
  • editorOverviewRuler.border#202020
  • editorWarning.foreground#F5D86A
  • editorWhitespace.foreground#686868
  • focusBorder#202020
  • foreground#d0d0d0
  • input.background#303030
  • input.border#202020
  • input.foreground#d0d0d0
  • input.placeholderForeground#808080
  • list.activeSelectionBackground#232E46
  • list.activeSelectionForeground#F0F0F0
  • list.focusBackground#232E46
  • list.highlightForeground#6C95EB
  • list.hoverBackground#232E46
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#303030
  • panel.background#202020
  • panel.border#202020
  • panelTitle.activeBorder#6C95EB
  • panelTitle.activeForeground#d0d0d0
  • panelTitle.inactiveForeground#808080
  • progressBar.background#6C95EB
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#232E46
  • scrollbarSlider.background#303030
  • scrollbarSlider.hoverBackground#404040
  • selection.background#08335e
  • sideBar.background#202020
  • sideBar.foreground#d0d0d0
  • sideBarSectionHeader.background#303030
  • sideBarSectionHeader.foreground#d0d0d0
  • sideBarTitle.foreground#d0d0d0
  • statusBar.background#202020
  • statusBar.debuggingBackground#6B4C1B
  • statusBar.foreground#d0d0d0
  • statusBar.noFolderBackground#202020
  • statusBarItem.hoverBackground#303030
  • tab.activeBackground#202020
  • tab.activeBorder#6C95EB
  • tab.activeForeground#F0F0F0
  • tab.border#202020
  • tab.inactiveBackground#202020
  • tab.inactiveForeground#808080
  • terminal.ansiBlack#202020
  • terminal.ansiBlue#6C95EB
  • terminal.ansiBrightBlack#666666
  • terminal.ansiBrightBlue#ADD3FF
  • terminal.ansiBrightCyan#7DF0C0
  • terminal.ansiBrightGreen#ADEB96
  • terminal.ansiBrightMagenta#FFBFFE
  • terminal.ansiBrightRed#FF8870
  • terminal.ansiBrightWhite#F0F0F0
  • terminal.ansiBrightYellow#F5D86A
  • terminal.ansiCyan#39CC9B
  • terminal.ansiGreen#85C46C
  • terminal.ansiMagenta#D688D4
  • terminal.ansiRed#FF5647
  • terminal.ansiWhite#BDBDBD
  • terminal.ansiYellow#D9B72B
  • terminal.background#202020
  • terminal.foreground#BDBDBD
  • titleBar.activeBackground#202020
  • titleBar.activeForeground#d0d0d0
  • titleBar.border#202020
  • titleBar.inactiveBackground#202020
  • titleBar.inactiveForeground#808080
  • widget.shadow#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
source, text#d0d0d0
comment, punctuation.definition.comment#85C46Citalic
storage.type.class.jsdoc, punctuation.definition.block.tag.jsdoc#487D34
variable.other.jsdoc#C9A26D
string, string.quoted#C9A26D
constant.character.escape#D688D4
string.regexp#FFD49E
keyword.operator.quantifier.regexp#ADEB96
punctuation.definition.group.regexp#66C3CC
constant.other.character-class.regexp#C191FF
constant.numeric#ED94C0
constant.language#6C95EB
keyword, keyword.control, keyword.operator.new, storage.modifier, storage.type#6C95EB
keyword.operator#BDBDBD
punctuation, meta.brace, meta.delimiter#BDBDBD
entity.name.type.class, entity.name.type, support.class#C191FF
entity.name.type.interface#C191FF
entity.name.type.enum#E1BFFF
entity.name.type.struct#E1BFFF
entity.name.namespace, entity.name.type.namespace#C191FF
entity.name.type.type-parameter#C191FF
entity.name.function, support.function#39CC9B
variable.other.readwrite.instance, variable.other.property#66C3CC
variable.other.constant, support.constant#66C3CC
variable, variable.other, variable.parameter#BDBDBD
variable.other.event#ED94C0
meta.decorator, entity.name.type.annotation#C191FF
entity.name.tag, punctuation.definition.tag#C191FF
entity.other.attribute-name#85C46C
string.quoted.double.html, string.quoted.single.html#C9A26D
constant.character.entity#FFD49E
support.type.property-name.css, meta.property-name#6C95EB
meta.property-value, support.constant.property-value#F0F0F0
entity.name.tag.css, entity.other.attribute-name.class.css, entity.other.attribute-name.id.css, entity.other.attribute-name.pseudo-class, entity.other.attribute-name.pseudo-element#C191FF
constant.numeric.css#ED94C0
constant.other.color.rgb-value.css#ADEB96
string.quoted.double.css, string.quoted.single.css#C9A26D
support.function.misc.css#39CC9B
keyword.other.important.css#E67281
support.type.property-name.json#66C3CC
string.quoted.double.json#C9A26D
constant.numeric.json#ED94C0
constant.language.json#6C95EB
entity.name.tag.xml, entity.name.tag.html#C191FF
entity.other.attribute-name.xml#85C46C
string.quoted.double.xml#C9A26D
entity.name.tag.yaml#C191FF
string.quoted.single.yaml, string.quoted.double.yaml#C9A26D
comment.line.number-sign.yaml#85C46Citalic
string.unquoted.yaml#BDBDBD
markup.inline.raw.markdown, markup.fenced_code.block.markdown#85C46C
markup.heading#6C95EB
markup.boldbold
markup.italicitalic
markup.underline.link#6C95EB
invalid#FF5647
Rider Dark Theme by delarmuss - VS Code Theme