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.activeBorder#DAA520
  • activityBar.background#5A4634
  • activityBar.foreground#DAA520
  • activityBarBadge.background#DAA520
  • activityBarBadge.foreground#FDF6E3
  • badge.background#DAA520
  • badge.foreground#1E1A18
  • button.background#8A9A5B
  • button.foreground#FDF6E3
  • button.hoverBackground#8A9A5B80
  • dropdown.background#E8DDC9
  • dropdown.border#5A4634
  • dropdown.foreground#3B302F
  • editor.background#FDF6E3
  • editor.findMatchBackground#DAA52044
  • editor.findMatchHighlightBackground#DAA52022
  • editor.foreground#3B302F
  • editor.lineHighlightBackground#DAA52020
  • editor.lineHighlightBorder#DAA52080
  • editor.selectionBackground#8A9A5B80
  • editor.selectionHighlightBackground#8A9A5B50
  • editorBracketMatch.background#DAA52033
  • editorBracketMatch.border#DAA520
  • editorCursor.foreground#3B302F
  • editorGroupHeader.tabsBackground#FDF6E3
  • editorIndentGuide.activeBackground#8A9A5B88
  • editorIndentGuide.background#8A9A5B44
  • editorLineNumber.activeForeground#DAA520
  • editorLineNumber.foreground#8A9A5B
  • editorWhitespace.foreground#8A9A5B80
  • focusBorder#DAA520
  • gitDecoration.conflictingResourceForeground#7A6E5F
  • gitDecoration.deletedResourceForeground#B33A3A
  • gitDecoration.modifiedResourceForeground#DAA520
  • gitDecoration.untrackedResourceForeground#8A9A5B
  • input.background#E8DDC9
  • input.border#5A4634
  • input.foreground#3B302F
  • input.placeholderForeground#8A9A5B
  • inputOption.activeBorder#DAA520
  • list.activeSelectionBackground#8A9A5B
  • list.activeSelectionForeground#FDF6E3
  • list.focusBackground#8A9A5B
  • list.highlightForeground#DAA520
  • list.hoverBackground#8A9A5B44
  • minimap.background#1E1A18
  • minimapSlider.activeBackground#8A9A5B66
  • minimapSlider.background#8A9A5B22
  • minimapSlider.hoverBackground#8A9A5B44
  • panel.background#1E1A18
  • panel.border#5A4634
  • panelTitle.activeBorder#DAA520
  • panelTitle.activeForeground#FDF6E3
  • panelTitle.inactiveForeground#8A9A5B
  • scrollbar.shadow#00000044
  • scrollbarSlider.activeBackground#8A9A5BCC
  • scrollbarSlider.background#8A9A5B44
  • scrollbarSlider.hoverBackground#8A9A5B88
  • sideBar.background#E8DDC9
  • sideBar.foreground#3B302F
  • sideBarSectionHeader.background#5A4634
  • sideBarSectionHeader.foreground#FDF6E3
  • sideBarTitle.foreground#DAA520
  • statusBar.background#5A4634
  • statusBar.debuggingBackground#DAA520
  • statusBar.foreground#FDF6E3
  • statusBar.noFolderBackground#E8DDC9
  • statusBarItem.hoverBackground#8A9A5B
  • tab.activeBackground#FDF6E3
  • tab.activeBorder#DAA520
  • tab.activeForeground#3B302F
  • tab.border#5A4634
  • tab.inactiveBackground#E8DDC9
  • tab.inactiveForeground#8A9A5B
  • terminal.ansiBlue#3A9D9D
  • terminal.ansiBrightBlue#5FA8A8
  • terminal.ansiBrightCyan#78D1D1
  • terminal.ansiBrightGreen#C5D890
  • terminal.ansiBrightMagenta#9E7A6E
  • terminal.ansiBrightRed#D96565
  • terminal.ansiBrightYellow#E5C85A
  • terminal.ansiCyan#5DB3B3
  • terminal.ansiGreen#8A9A5B
  • terminal.ansiMagenta#7A6E5F
  • terminal.ansiRed#B33A3A
  • terminal.ansiYellow#DAA520
  • terminal.background#1E1A18
  • terminal.foreground#FDF6E3
  • titleBar.activeBackground#5A4634
  • titleBar.activeForeground#FDF6E3
  • titleBar.inactiveBackground#E8DDC9
  • titleBar.inactiveForeground#DAA520

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#7A6E5Fitalic
string, string.quoted, string.template#8A9A5B
keyword, storage.type, storage.modifier#DAA520bold
keyword.operator, punctuation.accessor#8A9A5B
variable, variable.other#3B302F
variable.parameter#8A9A5Bitalic
entity.name.function, support.function#DAA520
meta.function-call#3A9D9D
entity.name.class, entity.name.type.class, support.class#DAA520bold
entity.name.type, support.type#DAA520
entity.name.type.interface#3A9D9Ditalic
constant.numeric#DAA520
constant, constant.language, constant.character#8A9A5B
constant.language.boolean#DAA520bold
variable.other.property, support.variable.property#8A9A5B
meta.object-literal.key#3A9D9D
entity.name.tag, punctuation.definition.tag#DAA520
entity.other.attribute-name#7A6E5Fitalic
punctuation, meta.brace#3B302F
string.regexp#3A9D9D
constant.character.escape#7A6E5F
meta.decorator, punctuation.decorator#DAA520
invalid, invalid.illegal#B33A3Astrikethrough
markup.heading, entity.name.section#DAA520bold
markup.bold#DAA520bold
markup.italic#7A6E5Fitalic
markup.underline.link#3A9D9D
markup.inline.raw, markup.fenced_code#3A9D9D
support.type.property-name.json#DAA520
entity.other.attribute-name.class.css, entity.other.attribute-name.id.css#7A6E5F
support.type.property-name.css#3A9D9D
support.constant.property-value.css#DAA520
themesmith by CyberBoost - VS Code Theme