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.activeBackground#0F8B8514
  • activityBar.activeBorder#0F8B85
  • activityBar.background#E0DCD0
  • activityBar.foreground#2F4A6F
  • activityBar.inactiveForeground#7A8090
  • activityBarBadge.background#0F8B85
  • activityBarBadge.foreground#EFEBE0
  • badge.background#0F8B85
  • badge.foreground#EFEBE0
  • button.background#0F8B85
  • button.foreground#EFEBE0
  • button.hoverBackground#0F8B85
  • button.secondaryBackground#B5B0A0
  • button.secondaryForeground#2F4A6F
  • dropdown.background#F8F4EA
  • dropdown.border#B5B0A0
  • dropdown.foreground#2F4A6F
  • editor.background#EFEBE0
  • editor.findMatchBackground#C97F0A33
  • editor.findMatchBorder#C97F0A
  • editor.findMatchHighlightBackground#C97F0A1F
  • editor.foreground#2F4A6F
  • editor.hoverHighlightBackground#C97F0A22
  • editor.lineHighlightBackground#E5E0D0
  • editor.lineHighlightBorder#C97F0A1F
  • editor.selectionBackground#0F8B8533
  • editor.selectionHighlightBackground#0F8B851A
  • editor.wordHighlightBackground#D85F3F22
  • editor.wordHighlightBorder#D85F3F5C
  • editor.wordHighlightStrongBackground#D85F3F40
  • editor.wordHighlightStrongBorder#D85F3F80
  • editorBracketHighlight.foreground1#C97F0A
  • editorBracketHighlight.foreground2#D85F3F
  • editorBracketHighlight.foreground3#0E8A56
  • editorBracketHighlight.foreground4#0F8B85
  • editorBracketHighlight.foreground5#0E7AA0
  • editorBracketHighlight.foreground6#C13F4E
  • editorBracketHighlight.unexpectedBracket.foreground#C13F4E
  • editorBracketMatch.background#D85F3F20
  • editorBracketMatch.border#D85F3F
  • editorCursor.foreground#C97F0A
  • editorError.foreground#C13F4E
  • editorGroupHeader.tabsBackground#E0DCD0
  • editorGroupHeader.tabsBorder#C8C4B8
  • editorIndentGuide.activeBackground1#0F8B8560
  • editorIndentGuide.background1#C8C4B8
  • editorInfo.foreground#0F8B85
  • editorLineNumber.activeForeground#C97F0A
  • editorLineNumber.foreground#7A8090
  • editorOverviewRuler.addedForeground#0E8A56
  • editorOverviewRuler.deletedForeground#C13F4E
  • editorOverviewRuler.errorForeground#C13F4E
  • editorOverviewRuler.findMatchForeground#C97F0A99
  • editorOverviewRuler.infoForeground#0F8B85
  • editorOverviewRuler.modifiedForeground#C97F0A
  • editorOverviewRuler.warningForeground#C97F0A
  • editorOverviewRuler.wordHighlightForeground#D85F3F60
  • editorWarning.foreground#C97F0A
  • editorWhitespace.foreground#B5B0A0
  • errorForeground#C13F4E
  • focusBorder#0F8B85
  • foreground#2F4A6F
  • gitDecoration.conflictingResourceForeground#D85F3F
  • gitDecoration.deletedResourceForeground#C13F4E
  • gitDecoration.ignoredResourceForeground#7A8090
  • gitDecoration.modifiedResourceForeground#C97F0A
  • gitDecoration.untrackedResourceForeground#0E8A56
  • input.background#F8F4EA
  • input.border#B5B0A0
  • input.foreground#2F4A6F
  • input.placeholderForeground#7A8090
  • inputOption.activeBackground#0F8B8520
  • inputOption.activeBorder#0F8B85
  • list.activeSelectionBackground#A5CDC5
  • list.activeSelectionForeground#2F4A6F
  • list.focusBackground#A5CDC5
  • list.focusOutline#0F8B8560
  • list.highlightForeground#0F8B85
  • list.hoverBackground#E5E0D0
  • list.inactiveSelectionBackground#D0E2DC
  • list.inactiveSelectionForeground#2F4A6F
  • minimap.errorHighlight#C13F4E
  • minimap.findMatchHighlight#C97F0AAA
  • minimap.selectionHighlight#0F8B85AA
  • minimap.warningHighlight#C97F0A
  • panel.background#E0DCD0
  • panel.border#C8C4B8
  • panelTitle.activeBorder#0F8B85
  • panelTitle.activeForeground#C97F0A
  • panelTitle.inactiveForeground#7A8090
  • scrollbarSlider.activeBackground#C97F0A80
  • scrollbarSlider.background#B5B0A080
  • scrollbarSlider.hoverBackground#7A8090B0
  • selection.background#0F8B8540
  • sideBar.background#E0DCD0
  • sideBar.foreground#3A4A6A
  • sideBarSectionHeader.background#E0DCD0
  • sideBarSectionHeader.foreground#2F4A6F
  • sideBarTitle.foreground#2F4A6F
  • statusBar.background#C8C4B8
  • statusBar.debuggingBackground#D85F3F
  • statusBar.debuggingForeground#EFEBE0
  • statusBar.foreground#3A4A6A
  • statusBar.noFolderBackground#C8C4B8
  • statusBarItem.hoverBackground#0F8B8520
  • statusBarItem.remoteBackground#0F8B85
  • statusBarItem.remoteForeground#EFEBE0
  • tab.activeBackground#EFEBE0
  • tab.activeBorder#C97F0A20
  • tab.activeBorderTop#C97F0A
  • tab.activeForeground#C97F0A
  • tab.border#C8C4B8
  • tab.hoverBackground#E5E0D0
  • tab.hoverForeground#2F4A6F
  • tab.inactiveBackground#E0DCD0
  • tab.inactiveForeground#7A8090
  • terminal.ansiBlack#2F4A6F
  • terminal.ansiBlue#4ECDC4
  • terminal.ansiBrightBlack#7A8090
  • terminal.ansiBrightBlue#7EE0D9
  • terminal.ansiBrightCyan#B0F0FF
  • terminal.ansiBrightGreen#A5FFD9
  • terminal.ansiBrightMagenta#FFBFA5
  • terminal.ansiBrightRed#FF9BA8
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FFDB8F
  • terminal.ansiCyan#80E5FF
  • terminal.ansiGreen#88D8B0
  • terminal.ansiMagenta#FFA585
  • terminal.ansiRed#FF7E8E
  • terminal.ansiWhite#FFFFFF
  • terminal.ansiYellow#FFCB6B
  • terminal.background#EFEBE0
  • terminal.foreground#2F4A6F
  • titleBar.activeBackground#C8C4B8
  • titleBar.activeForeground#2F4A6F
  • titleBar.inactiveBackground#C8C4B8
  • titleBar.inactiveForeground#7A8090

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A8090italic
string, punctuation.definition.string, string.quoted#0E8A56
constant.numeric, constant.language, constant.character, constant.other#0E7AA0
variable, variable.other.readwrite, variable.parameter#2F4A6F
variable.other.constant, entity.name.constant#0E7AA0
variable.other.enummember, constant.other.enum, entity.name.constant.enum#D85F3F
keyword, storage.type, storage.modifier#C97F0A
keyword.control#C97F0Abold
entity.name.function, support.function, meta.function-call entity.name.function, meta.function-call.generic#D85F3F
entity.name.class, entity.name.type, support.class, support.type, entity.other.inherited-class#0F8B85
entity.name.tag#C13F4Ebold
punctuation.definition.tag#2F4A6F
entity.other.attribute-name#C97F0A
string.regexp, constant.character.escape#0F8B85
keyword.operator#C97F0A
punctuation, meta.brace#5A6878
markup.heading, entity.name.section#D85F3Fbold
markup.bold#C97F0Abold
markup.italic#C97F0Aitalic
markup.inserted#0E8A56
markup.deleted#C13F4E
markup.changed#C97F0A
invalid, invalid.illegal#C13F4Eunderline
Lagoon Theme by Khoa Doan - VS Code Theme