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.activeBorder#FF4D4D
  • activityBar.background#090A0E
  • activityBar.foreground#7A7A8C
  • activityBarBadge.background#FF4D4D
  • activityBarBadge.foreground#0B0C10
  • badge.background#FF4D4D
  • badge.foreground#0B0C10
  • button.background#1D1E22
  • button.foreground#C0C0C0
  • button.hoverBackground#2C2D33
  • dropdown.background#111217
  • dropdown.border#1D1E22
  • dropdown.foreground#C0C0C0
  • editor.background#0B0C10
  • editor.findMatchBackground#FF4D4D40
  • editor.findMatchHighlightBackground#FF4D4D20
  • editor.foreground#C0C0C0
  • editor.lineHighlightBackground#191A1F
  • editor.lineHighlightBorder#2C2D33
  • editor.selectionBackground#3A3B44CC
  • editor.selectionHighlightBackground#3A3B4410
  • editorBracketMatch.background#FF4D4D30
  • editorBracketMatch.border#FF4D4D
  • editorCursor.foreground#FF4D4D
  • editorGroupHeader.tabsBackground#0B0C10
  • editorIndentGuide.activeBackground#2C2D3380
  • editorIndentGuide.background#2C2D3340
  • editorLineNumber.activeForeground#FF4D4D
  • editorLineNumber.foreground#5A5B63
  • editorWhitespace.foreground#2C2D33
  • focusBorder#FF4D4D
  • gitDecoration.conflictingResourceForeground#FFEB4D
  • gitDecoration.deletedResourceForeground#FF4D4D
  • gitDecoration.modifiedResourceForeground#39FFD1
  • gitDecoration.untrackedResourceForeground#4DFF4D
  • input.background#111217
  • input.border#1D1E22
  • input.foreground#C0C0C0
  • input.placeholderForeground#7A7A8C
  • inputOption.activeBorder#FF4D4D
  • list.activeSelectionBackground#1D1E22
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#1D1E22
  • list.highlightForeground#FF4D4D
  • list.hoverBackground#111217
  • minimap.background#0B0C10
  • minimapSlider.activeBackground#FF4D4D60
  • minimapSlider.background#FF4D4D20
  • minimapSlider.hoverBackground#FF4D4D40
  • panel.background#0B0C10
  • panel.border#1D1E22
  • panelTitle.activeBorder#FF4D4D
  • panelTitle.activeForeground#FF4D4D
  • panelTitle.inactiveForeground#6A6A6A
  • scrollbar.shadow#00000080
  • scrollbarSlider.activeBackground#5A5B6480
  • scrollbarSlider.background#3A3B4440
  • scrollbarSlider.hoverBackground#3A3B4480
  • sideBar.background#0A0B0F
  • sideBar.foreground#A0A0A0
  • sideBarSectionHeader.background#0B0C10
  • sideBarSectionHeader.foreground#FF4D4D
  • sideBarTitle.foreground#FF4D4D
  • statusBar.background#111217
  • statusBar.debuggingBackground#FF4D4D
  • statusBar.foreground#E5E5E5
  • statusBar.noFolderBackground#0B0C10
  • statusBarItem.hoverBackground#1D1E22
  • tab.activeBackground#111217
  • tab.activeBorder#FF4D4D
  • tab.activeForeground#FFFFFF
  • tab.border#0B0C10
  • tab.inactiveBackground#0A0B0F
  • tab.inactiveForeground#8A8A8A
  • terminal.ansiBlue#5A5F7D
  • terminal.ansiBrightBlue#7A7F9D
  • terminal.ansiBrightCyan#5CFFD1
  • terminal.ansiBrightGreen#6DFF6D
  • terminal.ansiBrightMagenta#D86DFF
  • terminal.ansiBrightRed#FF6D6D
  • terminal.ansiBrightYellow#FFF56D
  • terminal.ansiCyan#39FFD1
  • terminal.ansiGreen#4DFF4D
  • terminal.ansiMagenta#B84DFF
  • terminal.ansiRed#FF4D4D
  • terminal.ansiYellow#FFEB4D
  • terminal.background#0B0C10
  • terminal.foreground#C0C0C0
  • titleBar.activeBackground#090A0E
  • titleBar.activeForeground#E5E5E5
  • titleBar.inactiveBackground#070809
  • titleBar.inactiveForeground#6A6A6A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A6A6Aitalic
string, string.quoted, string.template#39FFD1
keyword, storage.type, storage.modifier#FF4D4Dbold
keyword.operator, punctuation.accessor#C0C0C0
variable, variable.other#C0C0C0
variable.parameter#FF4D4Ditalic
entity.name.function, support.function#39FFD1
meta.function-call#C0C0C0
entity.name.class, entity.name.type.class, support.class#FF4D4Dbold
entity.name.type, support.type#B84DFF
entity.name.type.interface#39FFD1italic
constant.numeric#FF4D4D
constant, constant.language, constant.character#39FFD1
constant.language.boolean#FF4D4Dbold
variable.other.property, support.variable.property#C0C0C0
meta.object-literal.key#FF4D4D
entity.name.tag, punctuation.definition.tag#FF4D4D
entity.other.attribute-name#39FFD1italic
punctuation, meta.brace#7A7A8C
string.regexp#FF4D4D
constant.character.escape#39FFD1
meta.decorator, punctuation.decorator#FFEB4D
invalid, invalid.illegal#FF4D4Dstrikethrough
markup.heading, entity.name.section#FF4D4Dbold
markup.bold#FF4D4Dbold
markup.italic#39FFD1italic
markup.underline.link#39FFD1
markup.inline.raw, markup.fenced_code#4DFF4D
support.type.property-name.json#FF4D4D
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#FFEB4D
support.type.property-name.css#FF4D4D
support.constant.property-value.css#39FFD1
themesmith by CyberBoost - VS Code Theme