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#0c0a20
  • activityBar.foreground#7984d1
  • activityBarBadge.background#ff2e97
  • activityBarBadge.foreground#ffffff
  • button.background#1ea8fc
  • button.foreground#f2f3f7
  • button.hoverBackground#1ea8fc
  • descriptionForeground#f2f3f7
  • dropdown.background#100d2b
  • dropdown.listBackground#100d2b
  • editor.background#0c0a20
  • editor.findMatchBackground#484f7d
  • editor.findMatchHighlightBackground#484f7d80
  • editor.foreground#f2f3f7
  • editor.hoverHighlightBackground#42c6ff2a
  • editor.lineHighlightBackground#0c0a20
  • editor.selectionBackground#484f7d
  • editor.selectionHighlightBackground#484f7d8e
  • editor.wordHighlightBackground#ffffff22
  • editor.wordHighlightStrongBackground#42c6ff63
  • editorCursor.foreground#ff2e97
  • editorError.foreground#ff2e97
  • editorGroup.dropBackground#7984d1
  • editorGroupHeader.noTabsBackground#090819
  • editorGroupHeader.tabsBackground#090819
  • editorHoverWidget.background#100d2b
  • editorHoverWidget.border#3b4167
  • editorInfo.foreground#7984d1
  • editorLineNumber.activeForeground#42c6ff
  • editorLineNumber.foreground#484f7d
  • editorRuler.foreground#484f7d
  • editorSuggestWidget.background#100d2b
  • editorWarning.foreground#ff9b50
  • editorWidget.background#100d2b
  • editorWidget.border#3b4167
  • foreground#f2f3f7
  • gitDecoration.conflictingResourceForeground#df85ff
  • gitDecoration.deletedResourceForeground#ff2e97
  • gitDecoration.ignoredResourceForeground#7984d1
  • gitDecoration.modifiedResourceForeground#ffd400
  • gitDecoration.untrackedResourceForeground#42c6ff
  • input.background#0c0a20
  • input.border#763b8c
  • input.placeholderForeground#7984d1
  • inputOption.activeBorder#ff9b50
  • list.activeSelectionBackground#30007e
  • list.activeSelectionForeground#F2F3F7
  • list.dropBackground#100d2b
  • list.errorForeground#ff2e97
  • list.focusBackground#8a45a3
  • list.hoverBackground#0e0658
  • list.hoverForeground#F2F3F7
  • list.inactiveSelectionBackground#131033
  • list.warningForeground#ff2e97
  • menu.background#100d2b
  • panel.background#090819
  • panel.border#090819
  • panelTitle.activeBorder#1ea8fc
  • panelTitle.activeForeground#f2f3f7
  • panelTitle.inactiveForeground#7984d1
  • peekView.border#ff9b50
  • peekViewEditor.background#110d26
  • peekViewEditor.matchHighlightBackground#161130
  • peekViewEditor.matchHighlightBorder#161130
  • peekViewResult.background#0c0a20
  • peekViewResult.selectionBackground#ff9b50
  • peekViewTitle.background#0c0a20
  • peekViewTitleDescription.foreground#7984d1
  • progressBar.background#ff2e97
  • scrollbar.shadow#090819
  • scrollbarSlider.activeBackground#919ad9
  • scrollbarSlider.background#9199d94f
  • scrollbarSlider.hoverBackground#9199d9b4
  • sideBar.background#090819
  • sideBarSectionHeader.background#0c0a20
  • sideBarSectionHeader.foreground#7984d1
  • statusBar.background#090819
  • statusBar.foreground#7984d1
  • statusBar.noFolderBackground#1ea8fc
  • statusBar.noFolderForeground#ffffff
  • tab.activeBackground#0c0a20
  • tab.activeForeground#f2f3f7
  • tab.border#0c0a20
  • tab.inactiveBackground#090819
  • tab.inactiveForeground#7984d1
  • terminal.ansiBlack#283034
  • terminal.ansiBlue#42c6ff
  • terminal.ansiBrightBlack#435056
  • terminal.ansiBrightBlue#42c6ff
  • terminal.ansiBrightCyan#42c6ff
  • terminal.ansiBrightGreen#add0e5
  • terminal.ansiBrightMagenta#ff2afc
  • terminal.ansiBrightRed#ff2e97
  • terminal.ansiBrightWhite#f4f6f9
  • terminal.ansiBrightYellow#ffd400
  • terminal.ansiCyan#42c6ff
  • terminal.ansiGreen#62a9cf
  • terminal.ansiMagenta#ff2afc
  • terminal.ansiRed#ff2e97
  • terminal.ansiWhite#d9e0e9
  • terminal.ansiYellow#ffd400
  • terminal.background#090819
  • terminal.foreground#e4eeff
  • titleBar.activeBackground#090819

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
punctuation.separator, punctuation.terminator#bfbdb6b3—
meta.decorator variable.other, meta.decorator punctuation.decorator, storage.type.annotation#bbb6bf—
comment#acb6bf8citalic
string, constant.other.symbol#aad94c—
string.regexp, constant.character, constant.other#95e6cb—
constant.numeric#d2a6ff—
constant.language#d2a6ff—
variable, variable.parameter.function-call#A9B7C6—
variable.language#39bae6italic
storage#0096FF—
keyword#0096FF—
keyword.operator#f29668—
punctuation.accessor#f29668—
storage.type.function#ff8f40—
source.java storage.type.primitive#39bae6—
entity.name.function#aad94c—
variable.parameter, meta.parameter#d2a6ff—
support.function, support.macro#f07178—
entity.name#f07178
entity.name.tag, meta.tag.sgml#0096FF—
punctuation.definition.tag.end, punctuation.definition.tag.begin, punctuation.definition.tag#0096FF—
entity.other.attribute-name#ffb454—
variable.other.local.java#f29668—
source#bfbdb6—
punctuation.section#bfbdb6—
variable.member#f07178—
punctuation.definition.template-expression#39bae6—
meta.embedded#bfbdb6—
source.java storage.type, source.haskell storage.type, source.c storage.type#59c2ff—
entity.other.inherited-class#39bae6—
variable.function, variable.annotation, meta.function-call.generic, support.function.go#ffb454—
entity.name.import, entity.name.package#aad94c—
support.class.component#59c2ff—
support.constant#f29668italic
support.type, support.class, source.go storage.type#39bae6—
invalid#d95757—
meta.diff, meta.diff.header#c594c5—
source.ruby variable.other.readwrite#ffb454—
source.css entity.name.tag, source.sass entity.name.tag, source.scss entity.name.tag, source.less entity.name.tag, source.stylus entity.name.tag#59c2ff—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#acb6bf8c—
support.type.property-name#39bae6normal
constant.numeric.line-number.find-in-files - match#acb6bf8c—
constant.numeric.line-number.match#ff8f40—
entity.name.filename.find-in-files#aad94c—
message.error#d95757—
markup.heading, markup.heading entity.name#aad94cbold
markup.underline.link, string.other.link#39bae6—
markup.italic#f07178italic
markup.bold#f07178bold
markup.italic markup.bold, markup.bold markup.italic—bold italic
markup.raw——
markup.raw.inline——
meta.separator#acb6bf8cbold
markup.quote#95e6cbitalic
markup.list punctuation.definition.list.begin#ffb454—
markup.inserted#7fd962—
markup.changed#73b8ff—
markup.deleted#f26d78—
markup.strike#e6b673—
markup.table#39bae6—
text.html.markdown markup.inline.raw#f29668—
text.html.markdown meta.dummy.line-break#acb6bf8c—
punctuation.definition.markdown#acb6bf8c—
GatomontesRoseIII by GatomontesRoseIII - VS Code Theme