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#161C23
  • activityBar.foreground#F2D7BB
  • activityBar.inactiveForeground#677A83
  • badge.background#F2B076
  • badge.foreground#000000
  • button.background#F2B076
  • button.foreground#000000
  • button.hoverBackground#F2766B
  • descriptionForeground#677A83
  • diffEditor.insertedLineBackgroundhsla(180, 45%, 60%, 0.15)
  • diffEditor.insertedTextBackgroundhsla(180, 45%, 60%, 0.15)
  • diffEditor.removedLineBackgroundhsla(357, 45%, 60%, 0.15)
  • diffEditor.removedTextBackgroundhsla(357, 45%, 60%, 0.15)
  • dropdown.background#1C232C
  • dropdown.border#20272E
  • dropdown.foreground#D9D5CC
  • editor.background#161C23
  • editor.findMatchBackground#F2E6A9
  • editor.findMatchForeground#000000
  • editor.findMatchHighlightBackground#F2E6A966
  • editor.findRangeHighlightBackground#F2E6A933
  • editor.foreground#D9D5CC
  • editor.inactiveSelectionBackground#1E2A35
  • editor.lineHighlightBackground#1E2630
  • editor.selectionBackground#3A5166
  • editor.selectionHighlightBackground#F2B076CC
  • editor.wordHighlightBackground#F2B076CC
  • editor.wordHighlightStrongBackground#F2B076CC
  • editorBracketMatch.background#FF00001A
  • editorBracketMatch.border#FF0000
  • editorCursor.foreground#F2B076
  • editorError.foreground#FF0000
  • editorGutter.added#B5F2A9
  • editorGutter.background#161C23
  • editorGutter.deleted#F2766B
  • editorGutter.modified#7ED4E5
  • editorIndentGuide.activeBackground#AAFF9954
  • editorIndentGuide.background#20272E
  • editorInfo.foreground#7ED4E5
  • editorLineNumber.activeForeground#D9D5CC
  • editorLineNumber.foreground#515F66
  • editorWarning.foreground#F2E6A9
  • editorWhitespace.foreground#20272E
  • editorWidget.background#1C232C
  • editorWidget.border#20272E
  • errorForeground#FF0000
  • focusBorder#F2B076
  • foreground#D9D5CC
  • gitDecoration.addedResourceForeground#B5F2A9
  • gitDecoration.deletedResourceForeground#F2766B
  • gitDecoration.ignoredResourceForeground#677A83
  • gitDecoration.modifiedResourceForeground#7ED4E5
  • gitDecoration.untrackedResourceForeground#B5F2A9
  • input.background#1C232C
  • input.border#20272E
  • input.foreground#D9D5CC
  • list.activeSelectionBackground#1E2A35
  • list.dropBackground#1E2630
  • list.hoverBackground#1E2630
  • list.inactiveSelectionBackground#1E2A35
  • minimap.border#F2B076
  • panel.background#161C23
  • panel.border#20272E
  • progressBar.background#F2B076
  • scrollbarSlider.activeBackground#20272ECC
  • scrollbarSlider.background#20272E80
  • scrollbarSlider.hoverBackground#20272EAA
  • selection.background#3A5166
  • sideBar.background#161C23
  • sideBar.foreground#D9D5CC
  • sideBarSectionHeader.background#1E2630
  • sideBarSectionHeader.foreground#D9D5CC
  • statusBar.background#161C23
  • statusBar.debuggingBackground#161C23
  • statusBar.foreground#D9D5CC
  • statusBar.noFolderBackground#161C23
  • statusBarItem.activeBackground#20272E
  • statusBarItem.hoverBackground#1C232C
  • tab.activeBackground#161C23
  • tab.activeBorder#8DB386
  • tab.activeForeground#D9D5CC
  • tab.border#20272E
  • tab.inactiveBackground#1C232C
  • tab.inactiveForeground#677A83
  • terminal.background#161C23
  • terminal.foreground#D9D5CC
  • terminalCursor.background#F2B076
  • terminalCursor.foreground#F2B076
  • titleBar.activeBackground#161C23
  • titleBar.activeForeground#D9D5CC

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#677A83italic
keyword, keyword.control, keyword.operator, keyword.other, punctuation.definition, punctuation.separator, punctuation.terminator, punctuation.accessor#F2B076—
punctuation.section#D9D5CC—
string, string.quoted#F2E6A9—
constant.numeric, constant.language, constant.other, support.constant#33B4CE—
entity.name.function#F26091—
variable.function, support.function, support.macro#F2766Bitalic
variable.annotation#F2766Bitalic
variable.language, variable.parameter, variable.member#7ED4E5italic
storage, storage.type#F2D7BBitalic
storage.modifier, support.type#F2E6A9italic
support.class#B5F2A9italic
entity.name#B5F2A9—
entity.name.namespace#F2766B—
entity.other.inherited-class#7ED4E5italic
invalid, invalid.deprecated#D9D5CC—
entity.name.tag#F2D7BBE6—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#F2D7BB73
entity.other.attribute-name#B5F2A9E6
markup.heading, markup.heading punctuation.definition.heading, markup.heading.1 punctuation.definition.heading#F2B076bold
string.other.link, markup.underline.link#33B4CE—
markup.bold—bold
markup.italic—italic
markup.italic markup.bold, markup.bold markup.italic—bold italic
punctuation.definition.thematic-break#F2B076—
markup.list.numberOrange.bullet, markup.quote punctuation.definition.blockquote, markup.list punctuation.definition.list_item#7ED4E5—
markup.raw#C6CED2—
markup.raw.inline#F26091—
text punctuation.definition.italic, text punctuation.definition.bold#F26091—
meta.diff, meta.diff.header, markup.deleted, markup.inserted, markup.changed#F2B076—
entity.name.tag.yaml#F2B076—
source.yaml string.unquoted#B5F2A9—
source.systemverilog storage.type.module#F2E6A9italic
source.systemverilog entity.name.type.module#B5F2A9—
source.systemverilog meta.module.inst meta.bind.param support.function.port#F26091italic
source.systemverilog support.function.port#F2766Bitalic
source.systemverilog support.function.system#F26091—
markup.error.sublime_linter#FF0000—
markup.warning.sublime_linter#F2E6A9—
entity.name.filename.sublime_linter#F2D7BB—
entity.name.label.linter-name.sublime_linter#B5F2A9—
entity.name.class.error-code.sublime_linter#7ED4E5—
invalid.illegal.unclosed-string.json——
Gunacode by Valentin Barral - VS Code Theme