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#0096FF
  • activityBar.background#1E1E1E
  • activityBar.foreground#E0E0E0
  • activityBarBadge.background#FF4C00
  • activityBarBadge.foreground#FFFFFF
  • badge.background#FF4C00
  • badge.foreground#FFFFFF
  • button.background#0096FF
  • button.foreground#FFFFFF
  • button.hoverBackground#33AFFF
  • dropdown.background#1E1E1E
  • dropdown.border#333333
  • dropdown.foreground#E0E0E0
  • editor.background#0D0D0D
  • editor.findMatchBackground#FFD50080
  • editor.findMatchHighlightBackground#FF4C0080
  • editor.foreground#E0E0E0
  • editor.lineHighlightBackground#2A2A2A
  • editor.lineHighlightBorder#0096FF
  • editor.selectionBackground#00408080
  • editor.selectionHighlightBackground#00336680
  • editorBracketMatch.background#00A85930
  • editorBracketMatch.border#00A859
  • editorCursor.foreground#FFFFFF
  • editorGroupHeader.tabsBackground#0D0D0D
  • editorIndentGuide.activeBackground#555555
  • editorIndentGuide.background#333333
  • editorLineNumber.activeForeground#E0E0E0
  • editorLineNumber.foreground#888888
  • editorWhitespace.foreground#555555
  • focusBorder#0096FF
  • gitDecoration.conflictingResourceForeground#C71585
  • gitDecoration.deletedResourceForeground#FF4C00
  • gitDecoration.modifiedResourceForeground#0096FF
  • gitDecoration.untrackedResourceForeground#00A859
  • input.background#1E1E1E
  • input.border#333333
  • input.foreground#E0E0E0
  • input.placeholderForeground#777777
  • inputOption.activeBorder#0096FF
  • list.activeSelectionBackground#004080
  • list.activeSelectionForeground#E0E0E0
  • list.focusBackground#003060
  • list.highlightForeground#FFD500
  • list.hoverBackground#002040
  • minimap.background#0D0D0D
  • minimapSlider.activeBackground#99999980
  • minimapSlider.background#55555580
  • minimapSlider.hoverBackground#77777780
  • panel.background#0D0D0D
  • panel.border#333333
  • panelTitle.activeBorder#0096FF
  • panelTitle.activeForeground#E0E0E0
  • panelTitle.inactiveForeground#888888
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#99999980
  • scrollbarSlider.background#55555580
  • scrollbarSlider.hoverBackground#77777780
  • sideBar.background#1A1A1A
  • sideBar.foreground#E0E0E0
  • sideBarSectionHeader.background#252525
  • sideBarSectionHeader.foreground#E0E0E0
  • sideBarTitle.foreground#E0E0E0
  • statusBar.background#252525
  • statusBar.debuggingBackground#0096FF
  • statusBar.foreground#E0E0E0
  • statusBar.noFolderBackground#252525
  • statusBarItem.hoverBackground#333333
  • tab.activeBackground#1E1E1E
  • tab.activeBorder#0096FF
  • tab.activeForeground#E0E0E0
  • tab.border#0D0D0D
  • tab.inactiveBackground#0D0D0D
  • tab.inactiveForeground#888888
  • terminal.ansiBlue#0096FF
  • terminal.ansiBrightBlue#66B2FF
  • terminal.ansiBrightCyan#5FD7D7
  • terminal.ansiBrightGreen#5FD75F
  • terminal.ansiBrightMagenta#E066FF
  • terminal.ansiBrightRed#FF8C66
  • terminal.ansiBrightYellow#FFE066
  • terminal.ansiCyan#00CED1
  • terminal.ansiGreen#00A859
  • terminal.ansiMagenta#C71585
  • terminal.ansiRed#FF4C00
  • terminal.ansiYellow#FFD500
  • terminal.background#0D0D0D
  • terminal.foreground#E0E0E0
  • titleBar.activeBackground#0D0D0D
  • titleBar.activeForeground#E0E0E0
  • titleBar.inactiveBackground#0D0D0D
  • titleBar.inactiveForeground#888888

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#6A737Ditalic
string, string.quoted, string.template#FFD500
keyword, storage.type, storage.modifier#0096FFbold
keyword.operator, punctuation.accessor#00CED1
variable, variable.other#E0E0E0
variable.parameter#C71585italic
entity.name.function, support.function#00A859
meta.function-call#33AFFF
entity.name.class, entity.name.type.class, support.class#FF4C00bold
entity.name.type, support.type#33AFFF
entity.name.type.interface#FF8C66italic
constant.numeric#FFE066
constant, constant.language, constant.character#33AFFF
constant.language.boolean#0096FFbold
variable.other.property, support.variable.property#E0E0E0
meta.object-literal.key#FF4C00
entity.name.tag, punctuation.definition.tag#0096FF
entity.other.attribute-name#C71585italic
punctuation, meta.brace#E0E0E0
string.regexp#00A859
constant.character.escape#C71585
meta.decorator, punctuation.decorator#33AFFF
invalid, invalid.illegal#FF4C00strikethrough
markup.heading, entity.name.section#0096FFbold
markup.bold#FF4C00bold
markup.italic#00A859italic
markup.underline.link#33AFFF
markup.inline.raw, markup.fenced_code#FFD500
support.type.property-name.json#FF4C00
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#0096FF
support.type.property-name.css#00A859
support.constant.property-value.css#FFD500
themesmith by CyberBoost - VS Code Theme