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.activeBackground#d1431400
  • activityBar.activeBorder#d14414
  • activityBar.activeFocusBorder#3a3939
  • activityBar.background#FFF5E3
  • activityBar.border#d143144a
  • activityBar.dropBorder#ff7676
  • activityBar.foreground#d14414
  • activityBar.inactiveForeground#58585A
  • activityBarBadge.background#d14414
  • activityBarBadge.foreground#FFF5E3
  • badge.background#EEE5E9
  • badge.foreground#d14414
  • button.background#FFF5E3
  • button.border#D14414
  • button.foreground#D14414
  • button.hoverBackground#FFF
  • contrastActiveBorder#0000ff00
  • contrastBorder#1D1F21
  • dropdown.background#FFF5e3
  • dropdown.border#d14414
  • dropdown.foreground#58585a
  • editor.background#1D1F21
  • editor.findMatchBackground#75d3ff7e
  • editor.findMatchHighlightBackground#75d3ff7e
  • editor.foreground#FFF
  • editor.hoverHighlightBackground#212121
  • editor.lineHighlightBackground#2a2a2a
  • editor.lineHighlightBorder#313131
  • editor.selectionBackground#47c8e86c
  • editor.selectionForeground#fff
  • editor.wordHighlightBackground#212121
  • editorBracketMatch.border#ff660078
  • editorCursor.foreground#d14414
  • editorGroup.border#000000
  • editorGroup.dropBackground#212121
  • editorGroupHeader.border#1D1F21
  • editorGroupHeader.tabsBorder#000000
  • editorHoverWidget.background#1d1f21
  • editorHoverWidget.border#FFF5e3
  • editorHoverWidget.foreground#FFF5e3
  • editorLightBulb.foreground#E8C547
  • editorLineNumber.activeForeground#d14114
  • editorLineNumber.foreground#FFF5e3
  • editorWidget.background#1d1f21e3
  • editorWidget.border#FFF5e3
  • editorWidget.foreground#FFF5e3
  • focusBorder#FFF5e3
  • foreground#FFF5E3
  • icon.foreground#d14414
  • input.background#d1431402
  • input.border#363636
  • input.foreground#FFF5e3
  • input.placeholderForeground#c7c7c7
  • inputOption.activeBorder#212121
  • list.activeSelectionBackground#FFF5E3
  • list.activeSelectionForeground#D14414
  • list.activeSelectionIconForeground#D14414
  • list.dropBackground#d14414
  • list.focusHighlightForeground#FFF5e3
  • list.focusOutline#212121
  • list.highlightForeground#d14414
  • list.hoverBackground#FFF5E3
  • list.hoverForeground#d14414
  • minimap.background#1f1f1f
  • minimap.errorHighlight#ff0000
  • panel.background#1D1F21
  • panel.border#000000
  • panel.dropBorder#FFF
  • panelSectionHeader.foreground#ff0000
  • panelTitle.activeBorder#d14414
  • panelTitle.activeForeground#CDD1C4
  • panelTitle.inactiveForeground#767676
  • sash.hoverBorder#ffffff
  • scrollbar.shadow#111
  • scrollbarSlider.activeBackground#d1441486
  • scrollbarSlider.background#3a3939
  • scrollbarSlider.hoverBackground#d1441466
  • searchEditor.textInputBorder#3a3939
  • selection.background#FFF5E3
  • settings.checkboxBackground#d14414
  • settings.checkboxForeground#Fff5e3
  • settings.dropdownBackground#fff5e3
  • settings.dropdownForeground#d14414
  • settings.focusedRowBackground#212121
  • settings.focusedRowBorder#313133
  • settings.headerForeground#d14414
  • settings.modifiedItemIndicator#d14414
  • settings.numberInputBackground#FFF5e3
  • settings.numberInputForeground#58585a
  • settings.rowHoverBackground#212121
  • settings.textInputBackground#FFF5e3
  • settings.textInputForeground#58585a
  • sideBar.background#1D1F21
  • sideBar.border#000000
  • sideBar.foreground#fff5e3
  • sideBarSectionHeader.background#212121
  • sideBarSectionHeader.border#000000
  • sideBarSectionHeader.foreground#fff5e3
  • sideBarTitle.foreground#FFF5e3
  • statusBar.background#FFF5E3
  • statusBar.border#000000
  • statusBar.debuggingBackground#FFF5E3
  • statusBar.foreground#D14414
  • statusBar.noFolderBackground#FFF5E3
  • statusBar.noFolderBorder#000000
  • symbolIcon.folderForeground#C5C8C6
  • tab.activeBackground#242424
  • tab.activeBorder#d14414
  • tab.activeBorderTop#1D1F21
  • tab.activeForeground#C5C8C6
  • tab.activeModifiedBorder#212121
  • tab.border#1D1F21
  • tab.hoverBackground#1D1F21
  • tab.hoverBorder#d14414
  • tab.hoverForeground#d14414
  • tab.inactiveBackground#212121
  • tab.inactiveForeground#9b9b9b
  • tab.unfocusedActiveBackground#1D1F21
  • tab.unfocusedActiveBorder#212121
  • tab.unfocusedHoverBackground#1D1F21
  • tab.unfocusedHoverForeground#FFF
  • tab.unfocusedInactiveBackground#212121
  • tab.unfocusedInactiveForeground#9b9b9b
  • terminal.ansiBlack#1D1F21
  • terminal.ansiBlue#4e81ee
  • terminal.ansiBrightBlack#969896
  • terminal.ansiBrightBlue#4e81ee
  • terminal.ansiBrightCyan#4e81ee
  • terminal.ansiBrightGreen#198844
  • terminal.ansiBrightMagenta#A36AC7
  • terminal.ansiBrightRed#e06c75
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#FBA922
  • terminal.ansiCyan#4e81ee
  • terminal.ansiGreen#45c476
  • terminal.ansiMagenta#A36AC7
  • terminal.ansiRed#e06c75
  • terminal.ansiWhite#C5C8C6
  • terminal.ansiYellow#FBA922
  • terminal.background#1D1F21
  • terminal.foreground#C5C8C6
  • terminal.selectionBackground#47c8e86c
  • terminal.tab.activeBorder#000000
  • terminalCursor.background#C5C8C6
  • terminalCursor.foreground#C5C8C6
  • textLink.activeForeground#FD862E
  • textLink.foreground#d14414
  • titleBar.activeBackground#212121
  • titleBar.activeForeground#FFF5E3
  • titleBar.border#000
  • titleBar.inactiveBackground#1D1F21
  • toolbar.activeBackground#d15d14
  • toolbar.hoverBackground#3a3939
  • welcomePage.progress.background#686868
  • welcomePage.tileBackground#1d1f21
  • welcomePage.tileHoverBackground#313131
  • welcomePage.tileShadow.#FFF5E3
  • widget.shadow#000
  • window.activeBorder#21212100
  • window.inactiveBorder#00000000

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, string.comment#676f7d
string, string.template#e5c07b
constant.numeric#ddc278
string.embedded.begin, string.embedded.end, punctuation.definition.template-expression, punctuation.section.embedded#78a4dd
punctuation.section.embedded.begin.js, punctuation.section.embedded.end.js, punctuation.section.embedded.begin.erb, punctuation.section.embedded.end.erb, source.elixir.embedded, punctuation.separator, punctuation.accessor, meta.brace#abb2bf
constant.language#56b6c2
constant.character, constant.other#56b6c2
variable.language#e06c75
keyword, keyword.operator.logical, keyword.operator.constructor#e06c75
keyword.operator#e06c75
storage#e06c75
storage.type#56b6c2
entity.name.class, entity.name.module, entity.name.type, storage.identifier, support.class#61afef
variable.other.object, variable.other.constant, variable.other.global, variable.other.readwrite.class, variable.other.readwrite.instance, variable.other.readwrite.batchfile, variable.readwrite, variable.readwrite.other.block#61afef
variable.other, variable.other.property, variable.other.block#abb2bf
entity.other.inherited-class#78dd86
storage.modifier.import, storage.modifier.package#61afef
entity.name.function, support.function#e1e2a2
variable.parameter, entity.name.variable.parameter, parameter.variable#d19a66italic
entity.name.function-call#abb2bf
function.support.builtin, function.support.core#ddc278
entity.name.tag, entity.name.tag.class.js#e06c75
entity.name.tag.class, entity.name.tag.id#56b6c2
entity.other.attribute-name#78dd96
support.constant#56b6c2
support.type, support.variable#56b6c2
support.dictionary.json#56b6c2
support.type.property-name.css, support.type.property-name.scss, support.type.property-name.less, support.type.property-name.sass#abb2bf
entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-class.scss, entity.other.attribute-name.pseudo-class.less, entity.other.attribute-name.pseudo-class.sass, entity.other.attribute-name.pseudo-element.css, entity.other.attribute-name.pseudo-element.scss, entity.other.attribute-name.pseudo-element.less, entity.other.attribute-name.pseudo-element.sass#56b6c2
support.constant.css, support.constant.scss, support.constant.less, support.constant.sass#ddc278
variable.css, variable.scss, variable.less, variable.sass#56b6c2
variable.css.string, variable.scss.string, variable.less.string, variable.sass.string#e5c07b
unit.css, unit.scss, unit.less, unit.sass#c678dd
function.css, function.scss, function.less, function.sass#56b6c2
support.other.variable
invalid#F8F8F0
invalid.deprecated#F8F8F0
support.type.property-name.json#56b6c2
string.detected-link#61afef
meta.diff, meta.diff.header#75715E
markup.deleted#e06c75
markup.inserted#ddc278
markup.changed#e5c07b
constant.numeric.line-number.find-in-files - match#56b6c2A0
entity.name.filename.find-in-files#e5c07b
markup.italic, markup.italic.markdownitalic
punctuation.definition.italic.markdown, punctuation.definition.bold.markdown, punctuation.definition.heading.markdown#676f7d
punctuation.definition.italic.markdownitalic
markup.underline.link.markdown#61afef
markup.bold.markdownbold
markup.heading.markdown#e06c75bold
markup.quote.markdown#ddc278
meta.separator.markdown#c678ddbold
markup.raw.inline.markdown, markup.raw.block.markdown#56b6c2
punctuation.definition.list_item.markdown#ffffffbold

Shiki preview

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

Loading...

NuTheme - Coding Theme