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#172030
  • activityBar.border#1A2335
  • activityBar.foreground#A7ACB9
  • activityBarBadge.background#c6797e
  • activityBarBadge.foreground#fff
  • badge.background#a06468df
  • badge.foreground#fff
  • breadcrumb.activeSelectionForeground#a7acb9
  • breadcrumb.focusForeground#a7acb9
  • breadcrumb.foreground#64727d
  • breadcrumbPicker.background#172030
  • button.background#75809580
  • button.foreground#fff
  • button.hoverBackground#758095
  • contrastBorder#172030
  • debugToolBar.background#97a38f
  • descriptionForeground#a7acb9
  • diffEditor.insertedTextBackground#9BBA9A40
  • diffEditor.insertedTextBorder#9BBA9A
  • diffEditor.removedTextBackground#CC565E40
  • diffEditor.removedTextBorder#CC565E
  • dropdown.background#172030
  • dropdown.border#a06468df
  • dropdown.foreground#ccc
  • editor.background#172030
  • editor.findMatchBackground#91d1bd40
  • editor.findMatchHighlightBackground#91d1bd40
  • editor.findRangeHighlightBackground#91d1bd40
  • editor.foreground#bbb
  • editor.hoverHighlightBackground#91d1bd40
  • editor.inactiveSelectionBackground#91d1bd26
  • editor.lineHighlightBackground#91d1bd10
  • editor.selectionBackground#91d1bd40
  • editor.selectionForeground#91d1bdff
  • editor.wordHighlightBackground#91d1bd40
  • editor.wordHighlightStrongBackground#91d1bd40
  • editorBracketMatch.background#212e45
  • editorBracketMatch.border#eabe9a80
  • editorCodeLens.foreground#758095
  • editorCursor.background#c6797e
  • editorCursor.foreground#c6797e
  • editorError.foreground#cc565e
  • editorGroup.background#172030
  • editorGroup.border#75809559
  • editorGroup.dropBackground#75809566
  • editorGroupHeader.noTabsBackground#172030
  • editorGroupHeader.tabsBackground#172030
  • editorGutter.addedBackground#9BBA9Acc
  • editorGutter.background#172030
  • editorGutter.deletedBackground#CC565Ecc
  • editorGutter.modifiedBackground#eabe9acc
  • editorHoverWidget.background#1F2A3F
  • editorHoverWidget.border#758095
  • editorIndentGuide.activeBackground#75809580
  • editorIndentGuide.background#75809580
  • editorLineNumber.activeForeground#A4B4D1
  • editorLineNumber.foreground#758095
  • editorLink.activeForeground#758095
  • editorOverviewRuler.addedForeground#9BBA9Acc
  • editorOverviewRuler.border#293a57cc
  • editorOverviewRuler.deletedForeground#CC565E40
  • editorOverviewRuler.errorForeground#CC565Ecc
  • editorOverviewRuler.findMatchForeground#91d1bd66
  • editorOverviewRuler.infoForeground#6e94b9cc
  • editorOverviewRuler.modifiedForeground#eabe9acc
  • editorOverviewRuler.selectionHighlightForeground#91d1bd66
  • editorRuler.foreground#75809580
  • editorSuggestWidget.background#1F2A3F
  • editorSuggestWidget.border#758095
  • editorSuggestWidget.foreground#c6cad2
  • editorSuggestWidget.highlightForeground#eabe9a
  • editorSuggestWidget.selectedBackground#293a57
  • editorWarning.foreground#CC565Edf
  • editorWhitespace.foreground#91d1bd26
  • editorWidget.background#192334
  • editorWidget.border#c6797e
  • errorForeground#c6797e
  • extensionButton.prominentBackground#728069B3
  • extensionButton.prominentForeground#fff
  • extensionButton.prominentHoverBackground#728069
  • focusBorder#758095
  • gitDecoration.conflictingResourceForeground#d19498
  • gitDecoration.deletedResourceForeground#b18bb1e6
  • gitDecoration.ignoredResourceForeground#6e94b9e6
  • gitDecoration.modifiedResourceForeground#eabe9a
  • gitDecoration.untrackedResourceForeground#ADB9A4
  • input.background#172030
  • input.border#a06468df
  • input.foreground#A7ACB9
  • input.placeholderForeground#808799
  • inputOption.activeBorder#b8bcc6
  • inputValidation.errorBackground#1A2335
  • inputValidation.errorBorder#CC565Edf
  • inputValidation.infoBackground#1A2335
  • inputValidation.infoBorder#6e94b999
  • inputValidation.warningBackground#1A2335
  • inputValidation.warningBorder#eabe9adf
  • list.activeSelectionBackground#c6797edf
  • list.activeSelectionForeground#fff
  • list.dropBackground#75809566
  • list.errorForeground#CC565E
  • list.focusBackground#293a57
  • list.focusForeground#c6cad2
  • list.highlightForeground#eabe9a
  • list.hoverBackground#293a57
  • list.hoverForeground#c6cad2
  • list.inactiveFocusBackground#293a57
  • list.inactiveFocusForeground#a7acb9
  • list.inactiveSelectionBackground#293a57
  • list.inactiveSelectionForeground#c6cad2
  • list.invalidItemForeground#CC565E
  • list.warningForeground#F9B5ACcc
  • menu.background#172030
  • menu.foreground#a7acb9
  • menu.selectionBackground#293a57
  • menu.selectionForeground#c6cad2
  • menubar.selectionBackground#c6797e
  • menubar.selectionForeground#fff
  • merge.border#A7ACB9
  • merge.currentContentBackground#9BBA9A26
  • merge.currentHeaderBackground#9BBA9A80
  • merge.incomingContentBackground#6e94b966
  • merge.incomingHeaderBackground#6e94b999
  • notificationCenter.border#758095
  • notificationCenterHeader.background#1F2A3F
  • notificationCenterHeader.foreground#A7ACB9
  • notificationLink.foreground#c6cad2
  • notifications.background#1F2A3F
  • notifications.border#75809566
  • notifications.foreground#c6cad2
  • notificationToast.border#758095
  • panel.background#172030
  • panel.border#75809559
  • panelTitle.activeBorder#c6797ecc
  • panelTitle.activeForeground#A7ACB9
  • panelTitle.inactiveForeground#808799b3
  • peekView.border#c6797e
  • peekViewEditor.background#1F2A3F
  • peekViewEditor.matchHighlightBackground#91d1bd40
  • peekViewEditorGutter.background#1F2A3F
  • peekViewResult.background#1B2638
  • peekViewResult.fileForeground##c6cad2
  • peekViewResult.lineForeground#fff
  • peekViewResult.matchHighlightBackground#91d1bd66
  • peekViewResult.selectionBackground#293a57
  • peekViewResult.selectionForeground#c6cad2
  • peekViewTitle.background#1B2638
  • peekViewTitleDescription.foreground#A7ACB9
  • peekViewTitleLabel.foreground#c6cad2
  • pickerGroup.border#758095
  • pickerGroup.foreground#eabe9acc
  • progressBar.background#97a38f
  • scrollbar.shadow#a0646810
  • scrollbarSlider.activeBackground#c6797ef2
  • scrollbarSlider.background#a06468cc
  • scrollbarSlider.hoverBackground#c6797ecc
  • selection.background#91d1bd40
  • settings.checkboxBackground#75809560
  • settings.checkboxBorder#c6797e80
  • settings.checkboxForeground#758095
  • settings.dropdownBackground#172030
  • settings.dropdownBorder#c6797e80
  • settings.dropdownForeground#A7ACB9
  • settings.headerForeground#c6cad2
  • settings.inactiveSelectedItemBorder#75809559
  • settings.modifiedItemForeground#c6797e
  • settings.numberInputBackground#172030
  • settings.numberInputBorder#c6797e80
  • settings.numberInputForeground#A7ACB9
  • settings.textInputBackground#172030
  • settings.textInputBorder#c6797e80
  • settings.textInputForeground#A7ACB9
  • sideBar.background#172030
  • sideBar.border#1A2335
  • sideBar.dropBackground#c6797edf
  • sideBar.foreground#a7acb9
  • sideBarSectionHeader.background#172030
  • sideBarSectionHeader.foreground#e6e6e6
  • statusBar.background#172030
  • statusBar.debuggingBackground#97a38fe6
  • statusBar.debuggingForeground#fff
  • statusBar.foreground#c6cad2
  • statusBar.noFolderBackground#c6797edf
  • statusBarItem.activeBackground#c6797e
  • statusBarItem.activeForeground#fff
  • statusBarItem.hoverBackground#293a57
  • statusBarItem.prominentBackground#b18bb1cc
  • statusBarItem.prominentHoverBackground#b18bb1
  • tab.activeBackground#c6797edf
  • tab.activeForeground#fff
  • tab.border#172030
  • tab.inactiveBackground#172030
  • tab.inactiveForeground#A7ACB9
  • tab.unfocusedActiveForeground#fff
  • tab.unfocusedInactiveForeground#A7ACB9
  • terminal.ansiBlack#374E73
  • terminal.ansiBlue#6e94b9
  • terminal.ansiBrightBlack#3F5A85
  • terminal.ansiBrightBlue#98b3cd
  • terminal.ansiBrightCyan#abcbd3
  • terminal.ansiBrightGreen#bec8b7
  • terminal.ansiBrightMagenta#ccb3cc
  • terminal.ansiBrightRed#d19498
  • terminal.ansiBrightWhite#fff
  • terminal.ansiBrightYellow#F2EFC7
  • terminal.ansiCyan#8ab6c1
  • terminal.ansiGreen#ADB9A4
  • terminal.ansiMagenta#b18bb1
  • terminal.ansiRed#c6797e
  • terminal.ansiWhite#e3e4e8
  • terminal.ansiYellow#ece7ac
  • terminal.background#172030
  • terminal.foreground#b8bcc6
  • terminalCursor.background#ADB9A4
  • terminalCursor.foreground#ADB9A4
  • textBlockQuote.background#1D293D
  • textBlockQuote.border#c6797e
  • textCodeBlock.background#172030
  • textLink.activeForeground#98b3cd
  • textLink.foreground#6e94b9
  • textPreformat.foreground#bbb
  • textSeparator.foreground#bbb
  • titleBar.activeBackground#172030
  • titleBar.activeForeground#A7ACB9
  • titleBar.inactiveBackground#1E283A
  • titleBar.inactiveForeground#A7ACB9
  • walkThrough.embeddedEditorBackground#1F2A3F
  • welcomePage.buttonBackground#1D293D
  • welcomePage.buttonHoverBackground#293A57
  • widget.shadow#121321

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#bbb
comment, punctuation.definition.comment, unused.comment, wildcard.comment#64727d
constant#eabe9a
entity#F7E3AF
invalid#bbb
keyword#b18bb1
keyword.operator#D0D6B5regular
meta#DB6E8F
meta.brace#D0D6B5
punctuation#D0D6B5
punctuation.definition.template-expression, punctuation.definition.template-expression.begin.js, punctuation.definition.template-expression.begin.ts, punctuation.definition.template-expression.end.ts, punctuation.definition.template-expression.end.js#D0D6B5
storage#b18bb1
storage.type.function.arrow#b18bb1regular
string, punctuation.definition.string#A3B09A
support#F7E3AF
support.variable.property#DB6E8F
support.function, entity.name.function#F9B5AC
variable#C6878F
variable.other.property, variable.other.object.property#DB6E8F
variable.parameter#DB6E8F
punctuation.definition.string.begin, punctuation.definition.string.end#D0D6B5
comment.block.documentation storage, comment.block.documentation variable, comment.block.documentation punctuation, comment.block.documentation meta#64727d
meta.object-literal.key entity, meta.object-literal.key#bbb
source.css entity, source.stylus entity#eabe9a
entity.other.attribute-name.id.css, entity.other.attribute-name.id.css punctuation.definition.entity.css#eabe9a
entity.other.attribute-name.class.css, entity.other.attribute-name.class.css punctuation.definition.entity.css#eabe9a
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css#eabe9a
entity.name.tag#DB6E8F
source.css support, source.stylus support#bbb
source.css support.constant.media, source.stylus support.constant.media#D0D6B5
entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, entity.other.attribute-name.id.css punctuation.definition.entity.css, entity.other.attribute-name.class.css punctuation.definition.entity.css#D0D6B5
source.css constant, source.css support.constant, source.stylus constant, source.stylus support.constant#A3B09A
source.css constant.numeric, source.stylus constant.numeric#F9B5AC
source.css keyword.other.unit, source.stylus keyword.other.unit#A3B09Aregular
source.css string, source.css punctuation.definition.string, source.stylus string, source.stylus punctuation.definition.string#A3B09A
punctuation.definition.keyword#b18bb1
meta.property-value.css, source.stylus meta.property-value#A3B09A
source.css variable, source.stylus variable#C6878F
source.css variable.parameter.url, source.stylus variable.parameter.url#A3B09A
meta.property-list.scss, meta.property-list.css#bbb
meta.property-value.scss, meta.property-value.less#A3B09A
source.css meta.at-rule.keyframes, source.css meta.at-rule.mixin, source.css meta.property-list#D0D6B5
meta.at-rule.each.scss#D0D6B5
text.html.basic entity.name, text.html.basic meta.tag.sgml#DB6E8F
meta.toc-list.id.html#A3B09A
text.html.basic entity.other#F7E3AF
punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.scope.between-tag-pair.html#808080
text.html.basic meta.tag#bbb
constant.name.attribute.tag.jade, args.mixin.jade, string.interpolated.jade, text.jade meta.tag.other, text.jade constant#D0D6B5
entity.other.attribute-name.class.jade, entity.other.attribute-name.id.jade#eabe9a
punctuation.definition.tag.xml, punctuation.definition.tag.begin.xml, punctuation.definition.tag.end.xml, meta.scope.between-tag-pair.xml#808080
meta.tag.xml, meta.tag.preprocessor.xml#bbb
source.js support.class.component, source.jsx support.class.component#DB6E8F
source.js entity.other.attribute-name, source.jsx entity.other.attribute-name#F7E3AF
source.js meta.jsx.children meta.object-literal.key, source.jsx meta.jsx.children meta.object-literal.key#bbb
source.js meta.tag variable.other.readwrite, source.jsx meta.tag variable.other.readwrite#C6878F
punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js#808080
source.js meta.jsx.children, source.jsx meta.jsx.children#bbb
keyword.operator.expression.typeof.js, keyword.operator.expression.instanceof.js#D0D6B5
meta.embedded.block.json#D0D6B5
source.json support, support.json#bbb
support.type.property-name.json#bbb
source.json string.json, source.json punctuation.definition.string.json#A3B09A
punctuation.definition.heading.markdown#D0D6B5
entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#DB6E8Fbold
meta.paragraph.markdown#bbb
meta.paragraph.markdown meta.other#bbb
beginning.punctuation.definition.quote.markdown#D0D6B5
markup.quote.markdown meta.paragraph.markdown#A3B09A
meta.separator.markdown#D0D6B5
markup.fenced_code.block.markdown#bbb
markup.inline.raw.string.markdown#D0D6B5
markup.bold.markdown, markup.bold.markdown punctuation.definition.bold.markdown#bbbbold
markup.italic.markdownitalic
beginning.punctuation.definition.list.markdown#DB6E8F
string.other.link.title.markdown#F9B5AC
string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown#F9B5AC
markup.underline.link.markdown, markup.underline.link.image.markdown#7ea9a9
fenced_code.block.language, markup.inline.raw.markdown#A3B09A
fenced_code.block.language, markup.inline.raw.markdown#A3B09A
constant.other.database-name.sql#bbb
constant.other.table-name.sql#bbb
markup.error#CC565EDF
markup.inserted#9BBA9A
markup.deleted#CC565EDF
markup.changed#FFB86C

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...

Rouge Theme - Coding Theme