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#080E26
  • activityBar.border#1E2750
  • activityBar.foreground#5DB1FF
  • activityBar.inactiveForeground#4A5488
  • activityBarBadge.background#9F72E1
  • activityBarBadge.foreground#FFFFFF
  • badge.background#9F72E1
  • badge.foreground#FFFFFF
  • breadcrumb.focusForeground#D6DCF2
  • breadcrumb.foreground#7782AD
  • button.background#5DB1FF
  • button.foreground#06122E
  • button.hoverBackground#7FC2FF
  • button.secondaryBackground#9F72E1
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#B28FE8
  • descriptionForeground#8B94BE
  • dropdown.background#0E163A
  • dropdown.border#2A3360
  • dropdown.foreground#D6DCF2
  • editor.background#0B1230
  • editor.findMatchBackground#E1C63166
  • editor.findMatchHighlightBackground#E1C63133
  • editor.foreground#D6DCF2
  • editor.lineHighlightBackground#141B3D
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#5DB1FF33
  • editor.selectionHighlightBackground#5DB1FF22
  • editor.wordHighlightBackground#9F72E133
  • editor.wordHighlightStrongBackground#9F72E144
  • editorBracketHighlight.foreground1#5DB1FF
  • editorBracketHighlight.foreground2#9F72E1
  • editorBracketHighlight.foreground3#F659A8
  • editorBracketHighlight.foreground4#E1C631
  • editorBracketHighlight.foreground5#8FCBFF
  • editorBracketHighlight.foreground6#C2A6EE
  • editorBracketMatch.background#9F72E133
  • editorBracketMatch.border#9F72E1
  • editorCursor.foreground#5DB1FF
  • editorError.foreground#F659A8
  • editorGroup.border#1E2750
  • editorGroupHeader.tabsBackground#080E26
  • editorGutter.addedBackground#5DB1FF
  • editorGutter.deletedBackground#F659A8
  • editorGutter.modifiedBackground#E1C631
  • editorHoverWidget.background#0E163A
  • editorHoverWidget.border#2A3360
  • editorIndentGuide.activeBackground1#3D4775
  • editorIndentGuide.background1#1E2750
  • editorInfo.foreground#5DB1FF
  • editorLineNumber.activeForeground#5DB1FF
  • editorLineNumber.foreground#3D4775
  • editorRuler.foreground#1E2750
  • editorSuggestWidget.background#0E163A
  • editorSuggestWidget.border#2A3360
  • editorSuggestWidget.highlightForeground#5DB1FF
  • editorSuggestWidget.selectedBackground#5DB1FF22
  • editorWarning.foreground#E1C631
  • editorWhitespace.foreground#2A3360
  • editorWidget.background#0E163A
  • editorWidget.border#2A3360
  • errorForeground#F659A8
  • focusBorder#5DB1FF66
  • foreground#D6DCF2
  • gitDecoration.conflictingResourceForeground#9F72E1
  • gitDecoration.deletedResourceForeground#F659A8
  • gitDecoration.ignoredResourceForeground#4A5488
  • gitDecoration.modifiedResourceForeground#E1C631
  • gitDecoration.untrackedResourceForeground#4FCB92
  • icon.foreground#9F72E1
  • input.background#0E163A
  • input.border#2A3360
  • input.foreground#D6DCF2
  • input.placeholderForeground#5A6494
  • inputOption.activeBackground#5DB1FF33
  • inputOption.activeBorder#5DB1FF
  • inputValidation.errorBackground#3A0E26
  • inputValidation.errorBorder#F659A8
  • list.activeSelectionBackground#5DB1FF22
  • list.activeSelectionForeground#FFFFFF
  • list.focusBackground#5DB1FF22
  • list.highlightForeground#5DB1FF
  • list.hoverBackground#141B3D
  • list.inactiveSelectionBackground#5DB1FF14
  • minimap.findMatchHighlight#E1C631
  • panel.background#080E26
  • panel.border#1E2750
  • panelTitle.activeBorder#5DB1FF
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#7782AD
  • peekView.border#5DB1FF
  • peekViewEditor.background#0E163A
  • peekViewResult.background#080E26
  • peekViewTitle.background#0E163A
  • progressBar.background#5DB1FF
  • scrollbarSlider.activeBackground#5DB1FF55
  • scrollbarSlider.background#5DB1FF1F
  • scrollbarSlider.hoverBackground#5DB1FF33
  • selection.background#5DB1FF44
  • sideBar.background#080E26
  • sideBar.border#1E2750
  • sideBar.foreground#B6BFE0
  • sideBarSectionHeader.background#0B1230
  • sideBarSectionHeader.foreground#B6BFE0
  • sideBarTitle.foreground#8B94BE
  • statusBar.background#080E26
  • statusBar.border#1E2750
  • statusBar.debuggingBackground#9F72E1
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#B6BFE0
  • statusBar.noFolderBackground#080E26
  • statusBarItem.remoteBackground#9F72E1
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#0B1230
  • tab.activeBorder#5DB1FF00
  • tab.activeBorderTop#5DB1FF
  • tab.activeForeground#FFFFFF
  • tab.border#1E2750
  • tab.hoverBackground#0E163A
  • tab.inactiveBackground#080E26
  • tab.inactiveForeground#7782AD
  • terminal.ansiBlack#0B1230
  • terminal.ansiBlue#5DB1FF
  • terminal.ansiBrightBlack#3D4775
  • terminal.ansiBrightBlue#8FCBFF
  • terminal.ansiBrightCyan#9FE0FF
  • terminal.ansiBrightGreen#7FE0B0
  • terminal.ansiBrightMagenta#C2A6EE
  • terminal.ansiBrightRed#FB8AC0
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#ECD877
  • terminal.ansiCyan#5DD6FF
  • terminal.ansiGreen#4FCB92
  • terminal.ansiMagenta#9F72E1
  • terminal.ansiRed#F659A8
  • terminal.ansiWhite#D6DCF2
  • terminal.ansiYellow#E1C631
  • terminal.background#080E26
  • terminal.foreground#D6DCF2
  • textLink.activeForeground#8FCBFF
  • textLink.foreground#5DB1FF
  • textPreformat.foreground#E1C631
  • titleBar.activeBackground#080E26
  • titleBar.activeForeground#D6DCF2
  • titleBar.border#1E2750
  • titleBar.inactiveBackground#080E26
  • titleBar.inactiveForeground#7782AD

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#5A6494italic
string, string.quoted, string.template#E1C631
constant.character.escape, punctuation.definition.template-expression#F659A8
constant.numeric, constant.language, constant.character#F659A8
keyword, keyword.control, storage.type, storage.modifier#9F72E1
keyword.operator#8FCBFF
entity.name.function, support.function, meta.function-call entity.name.function#5DB1FF
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#C2A6EE
variable, variable.other, meta.definition.variable#D6DCF2
variable.parameter#E2B9F4
variable.language, variable.language.this#F659A8italic
entity.name.tag, punctuation.definition.tag#F659A8
entity.other.attribute-name#E1C631italic
support.type.property-name, meta.object-literal.key, variable.object.property#5DB1FF
constant.other.color, support.constant#5DB1FF
markup.heading, entity.name.section#5DB1FFbold
markup.bold#F659A8bold
markup.italic#9F72E1italic
markup.inline.raw, markup.fenced_code#E1C631
markup.underline.link, string.other.link#8FCBFFunderline
invalid, invalid.illegal#F659A8
punctuation, meta.brace#8B94BE
uRadical Themes by uRadical - VS Code Theme