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#EEF2FC
  • activityBar.border#DCE2F2
  • activityBar.foreground#1E7FD6
  • activityBar.inactiveForeground#9099C2
  • activityBarBadge.background#7A45C9
  • activityBarBadge.foreground#FFFFFF
  • badge.background#7A45C9
  • badge.foreground#FFFFFF
  • breadcrumb.focusForeground#0C1A50
  • breadcrumb.foreground#6B75A3
  • button.background#1E7FD6
  • button.foreground#FFFFFF
  • button.hoverBackground#1A6EBC
  • button.secondaryBackground#7A45C9
  • button.secondaryForeground#FFFFFF
  • button.secondaryHoverBackground#6A3BB2
  • descriptionForeground#5A6494
  • dropdown.background#FFFFFF
  • dropdown.border#CdD5EC
  • dropdown.foreground#0C1A50
  • editor.background#FBFCFF
  • editor.findMatchBackground#E1C63188
  • editor.findMatchHighlightBackground#E1C63144
  • editor.foreground#0C1A50
  • editor.lineHighlightBackground#EEF2FC
  • editor.lineHighlightBorder#00000000
  • editor.selectionBackground#5DB1FF40
  • editor.selectionHighlightBackground#5DB1FF26
  • editor.wordHighlightBackground#9F72E126
  • editor.wordHighlightStrongBackground#9F72E133
  • editorBracketHighlight.foreground1#1E7FD6
  • editorBracketHighlight.foreground2#7A45C9
  • editorBracketHighlight.foreground3#D2348A
  • editorBracketHighlight.foreground4#A8870F
  • editorBracketHighlight.foreground5#3E94E0
  • editorBracketHighlight.foreground6#9460D6
  • editorBracketMatch.background#9F72E126
  • editorBracketMatch.border#7A45C9
  • editorCursor.foreground#1E7FD6
  • editorError.foreground#D2348A
  • editorGroup.border#DCE2F2
  • editorGroupHeader.tabsBackground#EEF2FC
  • editorGutter.addedBackground#1E7FD6
  • editorGutter.deletedBackground#D2348A
  • editorGutter.modifiedBackground#A8870F
  • editorHoverWidget.background#F2F5FC
  • editorHoverWidget.border#D4DAEE
  • editorIndentGuide.activeBackground1#B6BFE0
  • editorIndentGuide.background1#E2E7F5
  • editorInfo.foreground#1E7FD6
  • editorLineNumber.activeForeground#1E7FD6
  • editorLineNumber.foreground#A9B2D6
  • editorRuler.foreground#E2E7F5
  • editorSuggestWidget.background#F2F5FC
  • editorSuggestWidget.border#D4DAEE
  • editorSuggestWidget.highlightForeground#1E7FD6
  • editorSuggestWidget.selectedBackground#5DB1FF2E
  • editorWarning.foreground#A8870F
  • editorWhitespace.foreground#D4DAEE
  • editorWidget.background#F2F5FC
  • editorWidget.border#D4DAEE
  • errorForeground#D2348A
  • focusBorder#1E7FD666
  • foreground#0C1A50
  • gitDecoration.conflictingResourceForeground#7A45C9
  • gitDecoration.deletedResourceForeground#D2348A
  • gitDecoration.ignoredResourceForeground#9099C2
  • gitDecoration.modifiedResourceForeground#A8870F
  • gitDecoration.untrackedResourceForeground#0C8A5E
  • icon.foreground#7A45C9
  • input.background#FFFFFF
  • input.border#CdD5EC
  • input.foreground#0C1A50
  • input.placeholderForeground#9099C2
  • inputOption.activeBackground#5DB1FF33
  • inputOption.activeBorder#1E7FD6
  • inputValidation.errorBackground#FBE3EF
  • inputValidation.errorBorder#D2348A
  • list.activeSelectionBackground#5DB1FF33
  • list.activeSelectionForeground#0C1A50
  • list.focusBackground#5DB1FF33
  • list.highlightForeground#1E7FD6
  • list.hoverBackground#E8EEFA
  • list.inactiveSelectionBackground#5DB1FF1F
  • minimap.findMatchHighlight#A8870F
  • panel.background#F2F5FC
  • panel.border#DCE2F2
  • panelTitle.activeBorder#1E7FD6
  • panelTitle.activeForeground#0C1A50
  • panelTitle.inactiveForeground#6B75A3
  • peekView.border#1E7FD6
  • peekViewEditor.background#F2F5FC
  • peekViewResult.background#EEF2FC
  • peekViewTitle.background#F2F5FC
  • progressBar.background#1E7FD6
  • scrollbarSlider.activeBackground#0C1A5055
  • scrollbarSlider.background#0C1A5022
  • scrollbarSlider.hoverBackground#0C1A5033
  • selection.background#5DB1FF55
  • sideBar.background#F2F5FC
  • sideBar.border#DCE2F2
  • sideBar.foreground#2C3666
  • sideBarSectionHeader.background#EEF2FC
  • sideBarSectionHeader.foreground#2C3666
  • sideBarTitle.foreground#5A6494
  • statusBar.background#EEF2FC
  • statusBar.border#DCE2F2
  • statusBar.debuggingBackground#7A45C9
  • statusBar.debuggingForeground#FFFFFF
  • statusBar.foreground#2C3666
  • statusBar.noFolderBackground#EEF2FC
  • statusBarItem.remoteBackground#7A45C9
  • statusBarItem.remoteForeground#FFFFFF
  • tab.activeBackground#FBFCFF
  • tab.activeBorder#1E7FD600
  • tab.activeBorderTop#1E7FD6
  • tab.activeForeground#0C1A50
  • tab.border#DCE2F2
  • tab.hoverBackground#F2F5FC
  • tab.inactiveBackground#EEF2FC
  • tab.inactiveForeground#6B75A3
  • terminal.ansiBlack#0C1A50
  • terminal.ansiBlue#1E7FD6
  • terminal.ansiBrightBlack#6B75A3
  • terminal.ansiBrightBlue#3E94E0
  • terminal.ansiBrightCyan#0E9FBF
  • terminal.ansiBrightGreen#0F9A6A
  • terminal.ansiBrightMagenta#9460D6
  • terminal.ansiBrightRed#E04C97
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#C2A220
  • terminal.ansiCyan#0C8FAE
  • terminal.ansiGreen#0C8A5E
  • terminal.ansiMagenta#7A45C9
  • terminal.ansiRed#D2348A
  • terminal.ansiWhite#2C3666
  • terminal.ansiYellow#A8870F
  • terminal.background#F2F5FC
  • terminal.foreground#0C1A50
  • textLink.activeForeground#1A6EBC
  • textLink.foreground#1E7FD6
  • textPreformat.foreground#A8870F
  • titleBar.activeBackground#EEF2FC
  • titleBar.activeForeground#0C1A50
  • titleBar.border#DCE2F2
  • titleBar.inactiveBackground#EEF2FC
  • titleBar.inactiveForeground#6B75A3

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7C86ACitalic
string, string.quoted, string.template#8A6A0C
constant.character.escape, punctuation.definition.template-expression#D2348A
constant.numeric, constant.language, constant.character#D2348A
keyword, keyword.control, storage.type, storage.modifier#7A45C9
keyword.operator#1E7FD6
entity.name.function, support.function, meta.function-call entity.name.function#1E7FD6
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#9460D6
variable, variable.other, meta.definition.variable#0C1A50
variable.parameter#7A45C9
variable.language, variable.language.this#D2348Aitalic
entity.name.tag, punctuation.definition.tag#D2348A
entity.other.attribute-name#A8870Fitalic
support.type.property-name, meta.object-literal.key, variable.object.property#1E7FD6
constant.other.color, support.constant#1E7FD6
markup.heading, entity.name.section#1E7FD6bold
markup.bold#D2348Abold
markup.italic#7A45C9italic
markup.inline.raw, markup.fenced_code#8A6A0C
markup.underline.link, string.other.link#1E7FD6underline
invalid, invalid.illegal#D2348A
punctuation, meta.brace#5A6494
uRadical Themes by uRadical - VS Code Theme