Skip to main content
Coding Theme

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#212121
  • activityBar.border#383838
  • activityBar.dropBackground#212121
  • activityBar.foreground#D4D4D4
  • activityBarBadge.background#5986B3
  • activityBarBadge.foreground#D4D4D4
  • badge.background#383838
  • badge.foreground#D4D4D4
  • button.background#A94348
  • button.foreground#D4D4D4
  • button.hoverBackground#E15A60
  • debugExceptionWidget.background#212121
  • debugExceptionWidget.border#383838
  • diffEditor.insertedTextBackground#3D4F3B
  • diffEditor.insertedTextBorder#FFFFFF4D
  • diffEditor.removedTextBackground#5E2629
  • diffEditor.removedTextBorder#FFFFFF4D
  • dropdown.background#3c3c3c
  • dropdown.border#383838
  • dropdown.foreground#D4D4D4
  • editor.background#212121
  • editor.findMatchBackground#FFFFFF3D
  • editor.findMatchHighlightBackground#FFFFFF1F
  • editor.foreground#D4D4D4
  • editor.hoverHighlightBackground#FFFFFF1F
  • editor.inactiveSelectionBackground#FFFFFF1F
  • editor.lineHighlightBackground#FFFFFF0F
  • editor.rangeHighlightBackground#383838
  • editor.selectionBackground#FFFFFF3D
  • editor.wordHighlightBackground#FFFFFF00
  • editor.wordHighlightStrongBackground#FFFFFF00
  • editorBracketMatch.background#FFFFFF00
  • editorBracketMatch.border#FFFFFF4D
  • editorCodeLens.foreground#7F7F7F
  • editorCursor.foreground#ffcc00
  • editorError.border#212121
  • editorError.foreground#E15A60
  • editorGroup.background#212121
  • editorGroup.border#383838
  • editorGroup.dropBackground#383838
  • editorGroupHeader.noTabsBackground#383838
  • editorGroupHeader.tabsBackground#212121
  • editorGroupHeader.tabsBorder#383838
  • editorGutter.addedBackground#99C794
  • editorGutter.background#212121
  • editorGutter.deletedBackground#E15A60
  • editorGutter.modifiedBackground#6699CC
  • editorHoverWidget.background#212121
  • editorHoverWidget.border#383838
  • editorIndentGuide.activeBackground#7F7F7F
  • editorIndentGuide.background#FFFFFF1F
  • editorLineNumber.activeForeground#7F7F7F
  • editorLineNumber.foreground#545454
  • editorLink.activeForeground#6699CC
  • editorMarkerNavigation.background#212121
  • editorMarkerNavigationError.background#E15A60
  • editorMarkerNavigationWarning.background#FAC863
  • editorOverviewRuler.addedForeground#99C794
  • editorOverviewRuler.border#383838
  • editorOverviewRuler.currentContentForeground#A94348
  • editorOverviewRuler.deletedForeground#E15A60
  • editorOverviewRuler.errorForeground#E15A60
  • editorOverviewRuler.findMatchForeground#FFFFFF0F
  • editorOverviewRuler.incomingContentForeground#A94348
  • editorOverviewRuler.infoForeground#6699CC
  • editorOverviewRuler.modifiedForeground#6699CC
  • editorOverviewRuler.rangeHighlightForeground#FFFFFF0F
  • editorOverviewRuler.selectionHighlightForeground#FFFFFF0F
  • editorOverviewRuler.warningForeground#FAC863
  • editorOverviewRuler.wordHighlightForeground#FFFFFF0F
  • editorOverviewRuler.wordHighlightStrongForeground#FFFFFF0F
  • editorRuler.foreground#FFFFFF1F
  • editorSuggestWidget.background#212121
  • editorSuggestWidget.border#383838
  • editorSuggestWidget.foreground#D4D4D4
  • editorSuggestWidget.selectedBackground#383838
  • editorWarning.border#212121
  • editorWarning.foreground#FAC863
  • editorWhitespace.foreground#545454
  • editorWidget.background#212121
  • editorWidget.border#383838
  • errorForeground#E15A60
  • extensionButton.prominentBackground#A94348
  • extensionButton.prominentForeground#D4D4D4
  • extensionButton.prominentHoverBackground#A94348
  • focusBorder#383838
  • foreground#D4D4D4
  • gitDecoration.conflictingResourceForeground#ffcb6b90
  • gitDecoration.deletedResourceForeground#ff537090
  • gitDecoration.ignoredResourceForeground#61616190
  • gitDecoration.modifiedResourceForeground#82aaff90
  • gitDecoration.untrackedResourceForeground#c3e88d90
  • input.background#212121
  • input.border#383838
  • input.foreground#D4D4D4
  • input.placeholderForeground#7F7F7F
  • inputOption.activeBorder#7F7F7F
  • inputValidation.errorBackground#A94348
  • inputValidation.errorBorder#383838
  • inputValidation.infoBackground#A94348
  • inputValidation.infoBorder#383838
  • inputValidation.warningBackground#A94348
  • inputValidation.warningBorder#383838
  • list.activeSelectionBackground#383838
  • list.activeSelectionForeground#D4D4D4
  • list.dropBackground#383838
  • list.errorForeground#E15A60
  • list.focusBackground#383838
  • list.focusForeground#D4D4D4
  • list.highlightForeground#D4D4D4
  • list.hoverBackground#383838
  • list.hoverForeground#D4D4D4
  • list.inactiveSelectionBackground#383838
  • list.inactiveSelectionForeground#D4D4D4
  • list.warningForeground#FAC863
  • merge.border#383838
  • merge.currentContentBackground#1D2325
  • merge.currentHeaderBackground#1D2325
  • merge.incomingContentBackground#1D2325
  • merge.incomingHeaderBackground#1D2325
  • notificationCenter.border#383838
  • notificationCenterHeader.background#1D2325
  • notificationCenterHeader.foreground#D4D4D4
  • notificationLink.foreground#6699CC
  • notifications.background#1D2325
  • notifications.border#383838
  • notifications.foreground#D4D4D4
  • notificationToast.border#383838
  • panel.background#212121
  • panel.border#383838
  • panelTitle.activeBorder#3f3f3f
  • panelTitle.activeForeground#D4D4D4
  • panelTitle.inactiveForeground#7F7F7F
  • peekView.border#383838
  • peekViewEditor.background#1D2325
  • peekViewEditor.matchHighlightBackground#FFFFFF1F
  • peekViewEditorGutter.background#1D2325
  • peekViewResult.background#1D2325
  • peekViewResult.fileForeground#D4D4D4
  • peekViewResult.lineForeground#D4D4D4
  • peekViewResult.matchHighlightBackground#FFFFFF1F
  • peekViewResult.selectionBackground#383838
  • peekViewResult.selectionForeground#D4D4D4
  • peekViewTitle.background#1D2325
  • peekViewTitleDescription.foreground#7F7F7F
  • peekViewTitleLabel.foreground#D4D4D4
  • pickerGroup.border#383838
  • pickerGroup.foreground#7F7F7F
  • progressBar.background#FAC863
  • scrollbar.shadow#FFFFFF00
  • scrollbarSlider.activeBackground#FFFFFF2E
  • scrollbarSlider.background#FFFFFF0F
  • scrollbarSlider.hoverBackground#FFFFFF1F
  • selection.background#FAC863
  • sideBar.background#212121
  • sideBar.border#383838
  • sideBar.foreground#D4D4D4
  • sideBarSectionHeader.background#383838
  • sideBarSectionHeader.foreground#D4D4D4
  • sideBarTitle.foreground#7F7F7F
  • statusBar.background#212121
  • statusBar.border#383838
  • statusBar.debuggingBackground#212121
  • statusBar.debuggingForeground#D4D4D4
  • statusBar.foreground#7F7F7F
  • statusBar.noFolderBackground#212121
  • statusBar.noFolderForeground#7F7F7F
  • statusBarItem.activeBackground#212121
  • statusBarItem.hoverBackground#212121
  • statusBarItem.prominentBackground#242B2E
  • statusBarItem.prominentHoverBackground#242B2E
  • tab.activeBackground#212121
  • tab.activeForeground#D4D4D4
  • tab.border#383838
  • tab.hoverBackground#212121
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#7F7F7F
  • tab.unfocusedActiveForeground#D4D4D4
  • tab.unfocusedHoverBackground#212121
  • tab.unfocusedInactiveForeground#7F7F7F
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#545454
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#2892d7
  • terminal.ansiBrightGreen#c3e88d
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#ff5370
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcb6b
  • terminal.ansiCyan#2892d7
  • terminal.ansiGreen#c3e88d
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#ff5370
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffcb6b
  • terminal.border#383838
  • titleBar.activeBackground#242B2E
  • titleBar.activeForeground#7F7F7F
  • titleBar.border#383838
  • titleBar.inactiveBackground#242B2E
  • titleBar.inactiveForeground#7F7F7F
  • walkThrough.embeddedEditorBackground#1D2325
  • welcomePage.buttonBackground#1D2325
  • welcomePage.buttonHoverBackground#383838
  • widget.shadow#FFFFFF00

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
—#eeffffff—
comment, punctuation.definition.comment#4A4A4Aitalic
variable, string constant.other.placeholder#eeffffff—
constant.other.color#ffffff—
invalid, invalid.illegal, invalid.broken#ffffff—
invalid.unimplemented#ffffff—
invalid.deprecated#ffffff—
keyword, storage.type, storage.modifier#C792EA—
keyword.operator, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#89DDFF—
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f07178—
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method, meta.block-level#82AAFF—
support.other.variable, string.other.link#f07178—
constant.numeric, constant.language, support.constant, constant.character, variable.parameter, keyword.other.unit#F78C6C—
string, constant.other.symbol, constant.other.key, entity.other.inherited-class, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#C3E88Dnormal
entity.name.class, entity.name.type.class, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFCB6B—
source.css support.type, source.sass support.type, source.scss support.type, source.less support.type, source.stylus support.type#B2CCD6—
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370—
variable.language#FF5370italic
entity.name.method.js#82AAFF—
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF—
entity.other.attribute-name#C792EA—
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#FFCB6Bitalic
entity.other.attribute-name.class#FFCB6B—
source.sass keyword.control#82AAFF—
markup.inserted#C3E88D—
markup.deleted#FF5370—
markup.changed#C792EA—
string.regexp#89DDFF—
constant.character.escape#89DDFF—
*url*, *link*, *uri*—underline
constant.numeric.line-number.find-in-files - match#C17E70—
entity.name.filename.find-in-files#C3E88D—
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#C3E88D—
source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#C792EA—
source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#f07178—
source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#82AAFF—
source.json meta meta meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#C17E70—
source.json meta meta meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#FF5370—
source.json meta meta meta meta.structure.dictionary.json string.quoted.double.json - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta meta meta.structure.dictionary.json punctuation.definition.string - meta meta meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#F78C6C—
source.json meta meta.structure.dictionary.json string.quoted.double.json - meta meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta meta.structure.dictionary.json punctuation.definition.string - meta meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#FFCB6B—
source.json meta.structure.dictionary.json string.quoted.double.json - meta.structure.dictionary.json meta.structure.dictionary.value.json string.quoted.double.json, source.json meta.structure.dictionary.json punctuation.definition.string - meta.structure.dictionary.json meta.structure.dictionary.value.json punctuation.definition.string#C792EA—
text.html.markdown, punctuation.definition.list_item.markdown#eeffffff—
text.html.markdown markup.raw.inline#FF5370—
text.html.markdown meta.dummy.line-break#65737e—
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D—
markup.italic#f07178italic
markup.bold#f07178bold
markup.underline#F78C6Cunderline
markup.strike#C17E70strike
markup.quote, punctuation.definition.blockquote.markdown#89DDFFitalic
markup.quote#89DDFFitalic
string.other.link.title.markdown#82AAFFunderline
markup.raw.block#C792EA—
markup.raw.block.fenced.markdown#eeffffff—
punctuation.definition.fenced.markdown, variable.language.fenced.markdown#65737e—
variable.language.fenced.markdown#65737e
meta.separator#65737ebold
markup.table#FF5370—
acejump.label.blue#ffffff—
acejump.label.green#ffffff—
acejump.label.orange#ffffff—
acejump.label.purple#ffffff—
sublimelinter.mark.warning#FFCB6B—
sublimelinter.gutter-mark#ffffff—
sublimelinter.mark.error#FF5370—
sublimelinter.annotations——
markup.ignored.git_gutter#65737e—
markup.untracked.git_gutter#65737e—
markup.inserted.git_gutter#C3E88D—
markup.changed.git_gutter#FFCB6B—
markup.deleted.git_gutter#FF5370—
brackethighlighter.default#B2CCD6—
brackethighlighter.quote#C3E88D—
brackethighlighter.unmatched#FF5370—
token.info-token#6796e6—
token.warn-token#cd9731—
token.error-token#f44747—
token.debug-token#b267e6—
Ruie Dark by Ruie - VS Code Theme