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#18181C
  • activityBar.foreground#F0E6D6
  • activityBar.inactiveForeground#948C7E
  • activityBarBadge.background#C9A24B
  • activityBarBadge.foreground#14141A
  • badge.background#C9A24B
  • badge.foreground#14141A
  • button.background#C9A24B
  • button.foreground#14141A
  • button.hoverBackground#E8C468
  • button.secondaryBackground#201F24
  • button.secondaryForeground#F0E6D6
  • dropdown.background#201F24
  • dropdown.border#38383E
  • dropdown.foreground#F0E6D6
  • editor.background#14141A
  • editor.foreground#F0E6D6
  • editor.inactiveSelectionBackground#C9A24B1A
  • editor.lineHighlightBackground#201F24
  • editor.selectionBackground#C9A24B33
  • editor.selectionHighlightBackground#C9A24B22
  • editorBracketHighlight.foreground1#B27EE8
  • editorBracketHighlight.foreground2#6FB3E0
  • editorBracketHighlight.foreground3#3EE0A0
  • editorBracketHighlight.foreground4#E8C468
  • editorBracketHighlight.foreground5#B27EE8
  • editorBracketHighlight.foreground6#6FB3E0
  • editorBracketHighlight.unexpectedBracket.foreground#E45D75
  • editorBracketMatch.border#C9A24B
  • editorCursor.foreground#E8C468
  • editorGroup.border#18181C
  • editorGroupHeader.tabsBackground#18181C
  • editorGutter.addedBackground#3EE0A0
  • editorGutter.background#14141A
  • editorGutter.deletedBackground#E45D75
  • editorGutter.modifiedBackground#C9A24B
  • editorHoverWidget.background#18181C
  • editorHoverWidget.border#38383E
  • editorIndentGuide.activeBackground1#57505F
  • editorIndentGuide.background1#2A2930
  • editorLineNumber.activeForeground#F0E6D6
  • editorLineNumber.foreground#57505F
  • editorSuggestWidget.background#18181C
  • editorSuggestWidget.highlightForeground#E8C468
  • editorSuggestWidget.selectedBackground#201F24
  • editorWhitespace.foreground#38383E
  • editorWidget.background#18181C
  • editorWidget.border#38383E
  • focusBorder#C9A24B
  • foreground#F0E6D6
  • gitDecoration.addedResourceForeground#3EE0A0
  • gitDecoration.conflictingResourceForeground#5C1A2E
  • gitDecoration.deletedResourceForeground#E45D75
  • gitDecoration.ignoredResourceForeground#948C7E
  • gitDecoration.modifiedResourceForeground#C9A24B
  • gitDecoration.untrackedResourceForeground#3EE0A0
  • input.background#201F24
  • input.border#38383E
  • input.foreground#F0E6D6
  • input.placeholderForeground#57505F
  • list.activeSelectionBackground#201F24
  • list.activeSelectionForeground#FFF8EC
  • list.focusBackground#201F24
  • list.highlightForeground#E8C468
  • list.hoverBackground#201F24
  • list.inactiveSelectionBackground#1C1B20
  • notifications.background#18181C
  • notifications.foreground#F0E6D6
  • panel.background#18181C
  • panel.border#18181C
  • panelTitle.activeBorder#C9A24B
  • panelTitle.activeForeground#FFF8EC
  • panelTitle.inactiveForeground#948C7E
  • peekView.border#C9A24B
  • peekViewEditor.background#14141A
  • peekViewResult.background#18181C
  • scrollbarSlider.activeBackground#C9A24B88
  • scrollbarSlider.background#57505F55
  • scrollbarSlider.hoverBackground#57505F88
  • sideBar.background#18181C
  • sideBar.foreground#F0E6D6
  • sideBarSectionHeader.background#18181C
  • sideBarSectionHeader.foreground#F0E6D6
  • sideBarTitle.foreground#FFF8EC
  • statusBar.background#18181C
  • statusBar.border#18181C
  • statusBar.debuggingBackground#5C1A2E
  • statusBar.debuggingForeground#FFF8EC
  • statusBar.foreground#F0E6D6
  • statusBar.noFolderBackground#18181C
  • statusBarItem.hoverBackground#201F24
  • statusBarItem.remoteBackground#C9A24B
  • statusBarItem.remoteForeground#14141A
  • tab.activeBackground#14141A
  • tab.activeBorderTop#C9A24B
  • tab.activeForeground#FFF8EC
  • tab.border#18181C
  • tab.inactiveBackground#18181C
  • tab.inactiveForeground#948C7E
  • tab.unfocusedActiveBorderTop#57505F
  • terminal.ansiBlack#14141A
  • terminal.ansiBlue#1B3A66
  • terminal.ansiBrightBlack#38383E
  • terminal.ansiBrightBlue#6FB3E0
  • terminal.ansiBrightCyan#7FE0D6
  • terminal.ansiBrightGreen#3EE0A0
  • terminal.ansiBrightMagenta#B27EE8
  • terminal.ansiBrightRed#E45D75
  • terminal.ansiBrightWhite#FFF8EC
  • terminal.ansiBrightYellow#E8C468
  • terminal.ansiCyan#1C5C56
  • terminal.ansiGreen#164D34
  • terminal.ansiMagenta#3D1E5C
  • terminal.ansiRed#5C1A2E
  • terminal.ansiWhite#F0E6D6
  • terminal.ansiYellow#6B4A12
  • terminal.background#14141A
  • terminal.foreground#F0E6D6
  • terminalCursor.foreground#E8C468
  • titleBar.activeBackground#18181C
  • titleBar.activeForeground#F0E6D6
  • titleBar.inactiveBackground#18181C
  • titleBar.inactiveForeground#948C7E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#948A9Citalic
keyword, keyword.control, storage, storage.type, storage.modifier, keyword.operator.new, keyword.other#B27EE8
entity.name.function, support.function, meta.function-call#6FB3E0
string, string.quoted, string.template#3EE0A0
constant.numeric, constant.language, constant.character, constant.other#E8C468
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#7FE0D6
variable, variable.parameter, variable.other#F0E6D6
punctuation, keyword.operator, meta.brace#57505F
entity.name.tag#E45D75
entity.other.attribute-name, meta.object-literal.key, support.type.property-name, variable.parameter.key, entity.name.tag.yaml#E8C468
invalid, invalid.illegal#E45D75underline
markup.heading#E8C468bold
markup.bold#FFF8ECbold
markup.italicitalic
markup.underline.link#6FB3E0
markup.quote#948A9Citalic
markup.inline.raw, markup.fenced_code.block#3EE0A0
Reliquary by The Freehold Foundry - VS Code Theme