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#710531
  • activityBar.border#710531
  • activityBar.foreground#fffdfd
  • activityBar.inactiveForeground#f7d487
  • activityBarBadge.background#c30d23
  • activityBarBadge.foreground#fffdfd
  • badge.background#c30d23
  • badge.foreground#fffdfd
  • button.background#710531
  • button.foreground#fffdfd
  • button.hoverBackground#c30d23
  • disabledForeground#a48a6f
  • dropdown.background#fffdfd
  • dropdown.border#f7b52b
  • dropdown.foreground#710531
  • editor.background#fffdfd
  • editor.findMatchBackground#f7b52b80
  • editor.findMatchHighlightBackground#f7b52b40
  • editor.foreground#710531
  • editor.hoverHighlightBackground#f7d48740
  • editor.inactiveSelectionBackground#f7d48740
  • editor.selectionBackground#f7d48780
  • editor.selectionHighlightBackground#c30d2340
  • editor.wordHighlightBackground#f7b52b40
  • editor.wordHighlightStrongBackground#f7b52b80
  • editorBracketMatch.background#fffdfd
  • editorBracketMatch.border#c30d23
  • editorCursor.foreground#c30d23
  • editorGroupHeader.tabsBackground#fffdfd
  • editorGroupHeader.tabsBorder#710531
  • editorGutter.addedBackground#f7d487
  • editorGutter.background#fffdfd
  • editorGutter.deletedBackground#c30d23
  • editorGutter.modifiedBackground#f7b52b
  • editorIndentGuide.activeBackground#71053180
  • editorIndentGuide.background#71053133
  • editorLineNumber.activeForeground#710531
  • editorLineNumber.foreground#f7b52b
  • editorOverviewRuler.border#ffffff00
  • editorOverviewRuler.errorForeground#c30d23
  • editorOverviewRuler.findMatchForeground#f7b52b80
  • editorOverviewRuler.infoForeground#710531
  • editorOverviewRuler.warningForeground#f7b52b
  • editorRuler.foreground#f7d487
  • editorWhitespace.foreground#71053140
  • focusBorder#c30d23
  • foreground#710531
  • input.background#fffdfd
  • input.border#f7b52b
  • input.foreground#710531
  • input.placeholderForeground#71053180
  • list.activeSelectionBackground#f7b52b80
  • list.activeSelectionForeground#710531
  • list.errorForeground#c30d23
  • list.focusBackground#f7b52b80
  • list.focusForeground#710531
  • list.highlightForeground#c30d23
  • list.hoverBackground#f7d48780
  • list.hoverForeground#710531
  • list.inactiveSelectionBackground#f7d48740
  • list.inactiveSelectionForeground#710531
  • list.warningForeground#c30d2380
  • panel.background#fffdfd
  • panel.border#f7b52b
  • panelTitle.activeBorder#c30d23
  • panelTitle.activeForeground#710531
  • panelTitle.inactiveForeground#71053199
  • peekView.border#c30d23
  • peekViewEditor.background#fffdfd
  • peekViewEditor.matchHighlightBackground#f7b52b80
  • peekViewResult.background#fffdfd
  • peekViewResult.selectionBackground#f7d48780
  • peekViewTitle.background#f7b52b
  • progressBar.background#c30d23
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#710531
  • scrollbarSlider.background#71053140
  • scrollbarSlider.hoverBackground#71053180
  • sideBar.background#f7b52b
  • sideBar.border#710531
  • sideBar.foreground#710531
  • sideBarSectionHeader.background#710531
  • sideBarSectionHeader.border#710531
  • sideBarSectionHeader.foreground#fffdfd
  • sideBarTitle.foreground#710531
  • statusBar.background#f7b52b
  • statusBar.border#f7b52b
  • statusBar.debuggingBackground#c30d23
  • statusBar.debuggingForeground#fffdfd
  • statusBar.foreground#710531
  • statusBar.noFolderBackground#710531
  • statusBar.noFolderForeground#fffdfd
  • statusBarItem.remoteBackground#c30d23
  • statusBarItem.remoteForeground#fffdfd
  • tab.activeBackground#fffdfd
  • tab.activeBorderTop#c30d23
  • tab.activeForeground#710531
  • tab.border#710531
  • tab.inactiveBackground#f7d487
  • tab.inactiveForeground#71053199
  • tab.unfocusedActiveBorderTop#c30d2380
  • terminal.ansiBlack#710531
  • terminal.ansiBlue#710531
  • terminal.ansiBrightBlack#a48a6f
  • terminal.ansiBrightBlue#710531
  • terminal.ansiBrightCyan#f7d487
  • terminal.ansiBrightGreen#f7b52b
  • terminal.ansiBrightMagenta#710531
  • terminal.ansiBrightRed#c30d23
  • terminal.ansiBrightWhite#fffdfd
  • terminal.ansiBrightYellow#f7b52b
  • terminal.ansiCyan#f7d487
  • terminal.ansiGreen#f7b52b
  • terminal.ansiMagenta#710531
  • terminal.ansiRed#c30d23
  • terminal.ansiWhite#710531
  • terminal.ansiYellow#f7b52b
  • terminal.background#fffdfd
  • terminal.foreground#710531
  • terminalCursor.foreground#c30d23
  • titleBar.activeBackground#710531
  • titleBar.activeForeground#fffdfd
  • titleBar.border#710531
  • titleBar.inactiveBackground#f7d487
  • titleBar.inactiveForeground#710531

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#A48A6Fitalic
string, punctuation.definition.string#F7B52B
constant.numeric#F7B52B
constant.language, constant.character, constant.other#C30D23bold
variable#710531
variable.language#C30D23italic
keyword, storage#C30D23bold
storage.type#A48A6Fitalic
entity.name.type, entity.name.class, support.class, entity.name.function, support.function#710531bold
entity.other.inherited-class#710531italic
variable.parameter#710531italic
entity.name.tag#C30D23bold
entity.other.attribute-name#F7B52Bitalic
support.function, support.constant, support.type, support.class, support.variable#A48A6F
invalid#FFFDFD
invalid.deprecated#710531
support.type.property-name.json#C30D23
string.quoted.double.json#F7B52B
constant.language.json#A48A6F
markup.heading#C30D23bold
markup.underline.link#F7B52Bunderline
markup.bold#710531bold
markup.italic#710531italic
markup.inline.raw#F7B52B
token.info-token#316BCD
token.warn-token#CD9731
token.error-token#CD3131
token.debug-token#800080
Showa Retro Themes by SUZUKI Tetsuya - VS Code Theme