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.activeBorder#4F8CFF
  • activityBar.background#050A12
  • activityBar.border#101B2A
  • activityBar.foreground#9EB2C8
  • activityBar.inactiveForeground#4F6075
  • activityBarBadge.background#4F8CFF
  • activityBarBadge.foreground#FFFFFF
  • activityBarItem.profilesForeground#9EB2C8
  • activityBarItem.profilesHoverBackground#0B1726
  • activityBarItem.profilesHoverForeground#D6DEEA
  • activityBarTop.activeBorder#4F8CFF
  • activityBarTop.foreground#9EB2C8
  • activityBarTop.inactiveForeground#4F6075
  • badge.background#163B66
  • badge.foreground#EAF6FF
  • breadcrumb.activeSelectionForeground#E6F0FA
  • breadcrumb.background#050A12
  • breadcrumb.focusForeground#D6DEEA
  • breadcrumb.foreground#718096
  • breadcrumbPicker.background#08111D
  • button.background#163B66
  • button.foreground#EAF6FF
  • button.hoverBackground#1D4D82
  • commandCenter.activeBackground#0B1726
  • commandCenter.activeForeground#D6DEEA
  • commandCenter.background#050A12
  • commandCenter.border#101B2A
  • commandCenter.foreground#9EB2C8
  • debugToolBar.background#0A1422
  • debugToolBar.border#1B334B
  • diffEditor.insertedTextBackground#C3E88D20
  • diffEditor.removedTextBackground#FF537020
  • dropdown.background#0A1422
  • dropdown.border#1B334B
  • dropdown.foreground#D7E2F0
  • editor.background#050A12CC
  • editor.findMatchBackground#24507A
  • editor.findMatchBorder#66D9FF
  • editor.findMatchHighlightBackground#163653
  • editor.findMatchHighlightBorder#4F8CFF88
  • editor.foldBackground#10233755
  • editor.foreground#D6DEEA
  • editor.hoverHighlightBackground#102337
  • editor.inactiveSelectionBackground#10233780
  • editor.lineHighlightBackground#0A111C80
  • editor.selectionBackground#14263A
  • editor.selectionHighlightBackground#16304A80
  • editor.wordHighlightBackground#18314A80
  • editor.wordHighlightStrongBackground#20405F80
  • editorBracketHighlight.foreground1#4F8CFF
  • editorBracketHighlight.foreground2#C792EA
  • editorBracketHighlight.foreground3#C3E88D
  • editorBracketHighlight.foreground4#FFCB8B
  • editorBracketHighlight.foreground5#89DDFF
  • editorBracketHighlight.foreground6#F07178
  • editorBracketMatch.background#16304A80
  • editorBracketMatch.border#4F8CFF
  • editorBracketPairGuide.activeBackground1#315A82
  • editorBracketPairGuide.activeBackground2#3A5070
  • editorBracketPairGuide.activeBackground3#41627E
  • editorBracketPairGuide.background1#16263A
  • editorBracketPairGuide.background2#1A3047
  • editorBracketPairGuide.background3#213B54
  • editorCodeLens.foreground#596B80
  • editorCursor.foreground#66D9FF
  • editorError.foreground#FF5370
  • editorGroup.border#101B2A
  • editorGroup.dropBackground#163B6640
  • editorGroup.emptyBackground#050A12
  • editorGroupHeader.noTabsBackground#050A12
  • editorGroupHeader.tabsBackground#050A12
  • editorGroupHeader.tabsBorder#101B2A
  • editorGutter.addedBackground#C3E88D
  • editorGutter.deletedBackground#FF5370
  • editorGutter.foldingControlForeground#65768B
  • editorGutter.modifiedBackground#F78C6C
  • editorHoverWidget.background#08111D
  • editorHoverWidget.border#1B334B
  • editorHoverWidget.foreground#D6DEEA
  • editorIndentGuide.activeBackground1#1D334A
  • editorIndentGuide.background1#111B29
  • editorInfo.foreground#4F8CFF
  • editorLineNumber.activeForeground#8A99AD
  • editorLineNumber.foreground#394454
  • editorOverviewRuler.border#101B2A
  • editorOverviewRuler.errorForeground#FF5370CC
  • editorOverviewRuler.infoForeground#4F8CFFAA
  • editorOverviewRuler.warningForeground#FFCB6BCC
  • editorRuler.foreground#16263A
  • editorSuggestWidget.background#08111D
  • editorSuggestWidget.border#1B334B
  • editorSuggestWidget.foreground#D6DEEA
  • editorSuggestWidget.highlightForeground#66D9FF
  • editorSuggestWidget.selectedBackground#102A43
  • editorWarning.foreground#FFCB6B
  • editorWhitespace.foreground#1A2738
  • editorWidget.background#08111D
  • editorWidget.border#1B334B
  • editorWidget.foreground#D6DEEA
  • focusBorder#4F8CFF
  • gitDecoration.conflictingResourceForeground#FFCB6B
  • gitDecoration.deletedResourceForeground#FF5370
  • gitDecoration.ignoredResourceForeground#4F6075
  • gitDecoration.modifiedResourceForeground#82AAFF
  • gitDecoration.untrackedResourceForeground#C3E88D
  • input.background#0A1422
  • input.border#1B334B
  • input.foreground#D7E2F0
  • input.placeholderForeground#596B80
  • inputOption.activeBorder#4F8CFF
  • list.activeSelectionBackground#102A43
  • list.activeSelectionForeground#E6F0FA
  • list.dropBackground#163B6640
  • list.focusBackground#102A43
  • list.focusForeground#E6F0FA
  • list.highlightForeground#66D9FF
  • list.hoverBackground#0B1929
  • list.hoverForeground#D6DEEA
  • list.inactiveSelectionBackground#0D2033
  • list.inactiveSelectionForeground#8FA5BC
  • menu.background#08111D
  • menu.border#1B334B
  • menu.foreground#D6DEEA
  • menu.selectionBackground#102A43
  • menu.selectionForeground#E6F0FA
  • menu.separatorBackground#1B334B
  • minimap.background#050A12
  • minimap.errorHighlight#FF537066
  • minimap.findMatchHighlight#4F8CFF66
  • minimap.selectionHighlight#16304A66
  • minimap.warningHighlight#FFCB6B66
  • minimapSlider.activeBackground#4B688599
  • minimapSlider.background#26384D55
  • minimapSlider.hoverBackground#3A526D77
  • notificationLink.foreground#4F8CFF
  • notifications.background#08111D
  • notifications.border#1B334B
  • notifications.foreground#D6DEEA
  • panel.background#070D18D9
  • panel.border#101B2A
  • panelSection.border#101B2A
  • panelTitle.activeForeground#D7E2F0
  • panelTitle.border#101B2A
  • panelTitle.inactiveForeground#66788D
  • peekView.border#1B334B
  • peekViewEditor.background#07101A
  • peekViewResult.background#070D18
  • peekViewTitle.background#0A1320
  • progress.background#4F8CFF
  • quickInput.background#08111D
  • quickInput.foreground#D6DEEA
  • quickInputTitle.background#0A1320
  • scrollbar.shadow#02060B
  • scrollbarSlider.activeBackground#4B6885AA
  • scrollbarSlider.background#26384D88
  • scrollbarSlider.hoverBackground#3A526D99
  • sideBar.background#070D18D9
  • sideBar.border#101B2A
  • sideBar.foreground#AEBFD2
  • sideBarSectionHeader.background#0A1320
  • sideBarSectionHeader.border#101B2A
  • sideBarSectionHeader.foreground#9EB2C8
  • sideBarTitle.foreground#D7E2F0
  • statusBar.background#07111F
  • statusBar.border#101B2A
  • statusBar.foreground#8FA5BC
  • tab.activeBackground#0A111C
  • tab.activeBorder#4F8CFF
  • tab.activeForeground#E6F0FA
  • tab.border#101B2A
  • tab.hoverBackground#0B1726
  • tab.hoverForeground#D6DEEA
  • tab.inactiveBackground#050A12
  • tab.inactiveForeground#65768B
  • tab.lastPinnedBorder#1B334B
  • tab.unfocusedActiveBorder#294B73
  • tab.unfocusedActiveForeground#9EB2C8
  • tab.unfocusedInactiveForeground#596B80
  • terminal.ansiBlack#050A12
  • terminal.ansiBlue#4F8CFF
  • terminal.ansiBrightBlack#596B80
  • terminal.ansiBrightBlue#70A5FF
  • terminal.ansiBrightCyan#A5E9FF
  • terminal.ansiBrightGreen#D6F5A8
  • terminal.ansiBrightMagenta#D7A8F0
  • terminal.ansiBrightRed#FF6B81
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFD580
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF5370
  • terminal.ansiWhite#D6DEEA
  • terminal.ansiYellow#FFCB6B
  • terminal.background#050A12CC
  • terminal.border#101B2A
  • terminal.foreground#C9D6E5
  • terminal.selectionBackground#14263A
  • terminalCursor.foreground#66D9FF
  • terminalOverviewRuler.border#101B2A
  • terminalOverviewRuler.cursorForeground#66D9FF
  • titleBar.activeBackground#050A12
  • titleBar.activeForeground#AFC1D4
  • titleBar.inactiveBackground#050A12
  • titleBar.inactiveForeground#65768B
  • tree.inactiveIndentGuidesStroke#101B2A
  • tree.indentGuidesStroke#16263A

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#637777italic
variable, variable.other, variable.other.readwrite, variable.other.constant#D6DEEA
variable.parameter, variable.parameter.function#F07178
keyword, keyword.control, keyword.other, storage, storage.type, storage.modifier#C792EA
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.logical, keyword.operator.bitwise, keyword.operator.ternary, keyword.operator.new#89DDFF
entity.name.function, entity.name.function.js, entity.name.function.ts, meta.function-call, variable.function, support.function, entity.name.method, entity.name.method.js, entity.name.method.ts#4F8CFF
entity.name.class, entity.name.type.class, entity.other.inherited-class#FFCB8B
support.type, support.class, support.type.primitive, entity.name.type.interface, entity.name.type.enum#82AAFF
string, string.quoted, string.quoted.single, string.quoted.double, string.template, string.unquoted#C3E88D
meta.template.expression, punctuation.definition.template-expression#89DDFF
constant.numeric, constant.numeric.integer, constant.numeric.float, constant.numeric.hex, constant.numeric.binary#F78C6C
constant.language, constant.character, constant.other, support.constant#FFCB6B
constant.language.boolean, constant.language.true, constant.language.false#C3E88D
constant.language.null#FF5370
variable.other.property, variable.other.object.property, meta.object-literal.key, support.type.property-name, entity.name.property#80CBC4
meta.decorator, entity.name.function.decorator, punctuation.decorator#C792EA
string.regexp#89DDFF
constant.character.escape#FFCB6B
entity.name.tag, entity.name.tag.html, entity.name.tag.tsx, meta.tag.sgml#F07178
entity.other.attribute-name, entity.other.attribute-name.html#C792EA
entity.other.attribute-name.class, entity.other.attribute-name.id, entity.name.tag.css#F07178
support.type.property-name.css#80CBC4
markup.heading#FFCB8B
markup.bold#D6DEEAbold
markup.italic#B8C7D9italic
*url*, *link*, *uri*, string.other.link#4F8CFFunderline
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#F78C6C
invalid, invalid.illegal#FF5370
Blue Eyes Theme by Blue Eyes - VS Code Theme