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.activeBorder#f0883e
  • activityBar.background#25211d
  • activityBar.border#3f3b36e6
  • activityBar.foreground#d7cfc7
  • activityBar.inactiveForeground#7d8590
  • activityBarBadge.background#1f6feb
  • activityBarBadge.foreground#ffffff
  • badge.background#1f6feb
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#7d8590
  • breadcrumb.focusForeground#d7cfc7
  • breadcrumb.foreground#7d8590
  • breadcrumbPicker.background#2b2723
  • button.background#238636
  • button.foreground#ffffff
  • button.hoverBackground#2ea043
  • button.secondaryBackground#282e33
  • button.secondaryForeground#c9d1d9
  • button.secondaryHoverBackground#30363d
  • checkbox.background#2b2723
  • checkbox.border#3f3b36e6
  • debugConsole.errorForeground#ffa198
  • debugConsole.infoForeground#8b949e
  • debugConsole.sourceForeground#e3b341
  • debugConsole.warningForeground#d29922
  • debugConsoleInputIcon.foreground#bc8cff
  • debugIcon.breakpointForeground#f85149
  • debugTokenExpression.boolean#d29922
  • debugTokenExpression.error#f778ba
  • debugTokenExpression.name#79c0ff
  • debugTokenExpression.number#d29922
  • debugTokenExpression.string#a5d6ff
  • debugTokenExpression.value#a5d6ff
  • debugToolBar.background#2b2723
  • descriptionForeground#7d8590
  • diffEditor.insertedLineBackground#23863626
  • diffEditor.insertedTextBackground#3fb9504d
  • diffEditor.removedLineBackground#da363326
  • diffEditor.removedTextBackground#ff7b724d
  • dropdown.background#2b2723
  • dropdown.border#3f3b36e6
  • dropdown.foreground#d7cfc7
  • dropdown.listBackground#2b2723
  • editor.background#25211d
  • editor.findMatchBackground#9e6a03
  • editor.findMatchHighlightBackground#f2cc6080
  • editor.focusedStackFrameHighlightBackground#2ea04366
  • editor.foldBackground#302b27
  • editor.foreground#d7cfc7
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#264f7880
  • editor.lineHighlightBackground#302b27
  • editor.linkedEditingBackground#2f81f712
  • editor.selectionBackground#264f78
  • editor.selectionHighlightBackground#bb800940
  • editor.stackFrameHighlightBackground#bb800966
  • editor.wordHighlightBackground#34302c
  • editor.wordHighlightBorder#7e746a99
  • editor.wordHighlightStrongBackground#7e746a4d
  • editor.wordHighlightStrongBorder#7e746a99
  • editorBracketHighlight.foreground1#79c0ff
  • editorBracketHighlight.foreground2#d29922
  • editorBracketHighlight.foreground3#ffa198
  • editorBracketHighlight.foreground4#f778ba
  • editorBracketHighlight.foreground5#ffa28b
  • editorBracketHighlight.foreground6#bc8cff
  • editorBracketHighlight.unexpectedBracket.foreground#7d8590
  • editorBracketMatch.background#bb800940
  • editorBracketMatch.border#bb800999
  • editorCursor.foreground#2f81f7
  • editorGroup.border#3f3b36e6
  • editorGroupHeader.tabsBackground#2b2723
  • editorGroupHeader.tabsBorder#3f3b36e6
  • editorGutter.addedBackground#2ea04366
  • editorGutter.deletedBackground#f8514966
  • editorGutter.modifiedBackground#bb800966
  • editorHoverWidget.border#3f3b36
  • editorIndentGuide.activeBackground#d7cfc73d
  • editorIndentGuide.background#d7cfc71f
  • editorInlayHint.background#9b918833
  • editorInlayHint.foreground#7d8590
  • editorInlayHint.paramBackground#9b918833
  • editorInlayHint.paramForeground#7d8590
  • editorInlayHint.typeBackground#9b918833
  • editorInlayHint.typeForeground#7d8590
  • editorLineNumber.activeForeground#d7cfc7
  • editorLineNumber.foreground#7e746a
  • editorOverviewRuler.border#3f3b36
  • editorWhitespace.foreground#554d45
  • editorWidget.background#2b2723
  • editorWidget.border#3f3b36
  • errorForeground#f85149
  • focusBorder#1f6feb
  • foreground#d7cfc7
  • gitDecoration.addedResourceForeground#3fb950
  • gitDecoration.conflictingResourceForeground#db6d28
  • gitDecoration.deletedResourceForeground#f85149
  • gitDecoration.ignoredResourceForeground#6e7681
  • gitDecoration.modifiedResourceForeground#d29922
  • gitDecoration.renamedResourceForeground#3fb950
  • gitDecoration.stageDeletedResourceForeground#f85149
  • gitDecoration.stageModifiedResourceForeground#d29922
  • gitDecoration.submoduleResourceForeground#7d8590
  • gitDecoration.untrackedResourceForeground#3fb950
  • icon.foreground#7d8590
  • inlineChat.border#3f3b36
  • inlineChat.regionHighlight#264f7840
  • inlineChatInput.border#3f3b36
  • input.background#25211d
  • input.border#3f3b36e6
  • input.foreground#d7cfc7
  • input.placeholderForeground#7e746a
  • inputOption.activeForeground#d7cfc7
  • inputValidation.errorBackground#5a1d1d
  • inputValidation.errorBorder#be1100
  • inputValidation.infoBackground#063b49
  • inputValidation.infoBorder#007acc
  • inputValidation.warningBackground#352a05
  • inputValidation.warningBorder#b89500
  • keybindingLabel.background#dddddd26
  • keybindingLabel.border#cccccc26
  • keybindingLabel.bottomBorder#bbbbbb26
  • keybindingLabel.foreground#d7cfc7
  • keybindingTable.headerBackground#d7cfc70a
  • keybindingTable.rowsBackground#d7cfc70a
  • list.activeSelectionBackground#34302c
  • list.activeSelectionForeground#d7cfc7
  • list.errorForeground#f85149
  • list.focusBackground#388bfd26
  • list.focusForeground#d7cfc7
  • list.highlightForeground#2f81f7
  • list.hoverBackground#34302c
  • list.hoverForeground#d7cfc7
  • list.inactiveFocusBackground#388bfd26
  • list.inactiveSelectionBackground#34302c
  • list.inactiveSelectionForeground#d7cfc7
  • list.warningForeground#d29922
  • minimap.selectionHighlight#264f78
  • minimapSlider.activeBackground#9b918847
  • minimapSlider.background#9b918833
  • minimapSlider.hoverBackground#9b91883d
  • notificationCenterHeader.background#2b2723
  • notificationCenterHeader.foreground#7d8590
  • notifications.background#2b2723
  • notifications.border#3f3b36e6
  • notifications.foreground#d7cfc7
  • notificationsErrorIcon.foreground#f85149
  • notificationsInfoIcon.foreground#2f81f7
  • notificationsWarningIcon.foreground#d29922
  • panel.background#2b2723
  • panel.border#3f3b36e6
  • panelInput.border#3f3b36e6
  • panelTitle.activeBorder#f0883e
  • panelTitle.activeForeground#d7cfc7
  • panelTitle.inactiveForeground#7d8590
  • peekView.border#3f3b36
  • peekViewEditor.background#2b2723
  • peekViewEditor.matchHighlightBackground#bb800966
  • peekViewResult.background#302b27
  • peekViewResult.fileForeground#d7cfc7
  • peekViewResult.lineForeground#b1bac4
  • peekViewResult.matchHighlightBackground#bb800966
  • peekViewResult.selectionForeground#d7cfc7
  • peekViewTitle.background#34302c
  • peekViewTitleDescription.foreground#b1bac4
  • peekViewTitleLabel.foreground#d7cfc7
  • pickerGroup.border#3f3b36e6
  • pickerGroup.foreground#7d8590
  • progressBar.background#1f6feb
  • quickInput.background#2b2723
  • quickInput.foreground#d7cfc7
  • quickInputList.focusBackground#34302c
  • quickInputList.focusForeground#e3b341
  • quickInputList.focusIconForeground#e3b341
  • scm.providerBorder#3f3b36
  • scrollbar.shadow#554d4533
  • scrollbarSlider.activeBackground#9b918847
  • scrollbarSlider.background#9b918833
  • scrollbarSlider.hoverBackground#9b91883d
  • settings.dropdownListBorder#3f3b36
  • settings.headerForeground#d7cfc7
  • settings.modifiedItemIndicator#f8514966
  • sideBar.background#2b2723
  • sideBar.border#3f3b36e6
  • sideBar.foreground#d7cfc7
  • sideBarSectionHeader.background#2b2723
  • sideBarSectionHeader.border#3f3b36e6
  • sideBarSectionHeader.foreground#d7cfc7
  • sideBarTitle.foreground#d7cfc7
  • statusBar.background#25211d
  • statusBar.border#3f3b36e6
  • statusBar.debuggingBackground#9e3670
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#1f6feb80
  • statusBar.foreground#7d8590
  • statusBar.noFolderBackground#25211d
  • statusBarItem.activeBackground#d7cfc71f
  • statusBarItem.focusBorder#1f6feb
  • statusBarItem.hoverBackground#d7cfc714
  • statusBarItem.prominentBackground#7e746a66
  • statusBarItem.remoteBackground#25211d
  • statusBarItem.remoteForeground#d7cfc7
  • symbolIcon.arrayForeground#f0883e
  • symbolIcon.booleanForeground#58a6ff
  • symbolIcon.classForeground#f0883e
  • symbolIcon.colorForeground#79c0ff
  • symbolIcon.constantForeground#f2cc60#e3b341#d29922#bb8009#9e6a03#845306#693e00#4b2900#341a00#341a00
  • symbolIcon.constructorForeground#d2a8ff
  • symbolIcon.enumeratorForeground#f0883e
  • symbolIcon.enumeratorMemberForeground#58a6ff
  • symbolIcon.eventForeground#6e7681
  • symbolIcon.fieldForeground#f0883e
  • symbolIcon.fileForeground#d29922
  • symbolIcon.folderForeground#d29922
  • symbolIcon.functionForeground#bc8cff
  • symbolIcon.interfaceForeground#f0883e
  • symbolIcon.keyForeground#58a6ff
  • symbolIcon.keywordForeground#ff7b72
  • symbolIcon.methodForeground#bc8cff
  • symbolIcon.moduleForeground#ff7b72
  • symbolIcon.namespaceForeground#ff7b72
  • symbolIcon.nullForeground#58a6ff
  • symbolIcon.numberForeground#3fb950
  • symbolIcon.objectForeground#f0883e
  • symbolIcon.operatorForeground#79c0ff
  • symbolIcon.packageForeground#f0883e
  • symbolIcon.propertyForeground#f0883e
  • symbolIcon.referenceForeground#58a6ff
  • symbolIcon.snippetForeground#58a6ff
  • symbolIcon.stringForeground#79c0ff
  • symbolIcon.structForeground#f0883e
  • symbolIcon.textForeground#79c0ff
  • symbolIcon.typeParameterForeground#79c0ff
  • symbolIcon.unitForeground#58a6ff
  • symbolIcon.variableForeground#f0883e
  • tab.activeBackground#25211d
  • tab.activeBorder#25211d
  • tab.activeBorderTop#f0883e
  • tab.activeForeground#d7cfc7
  • tab.border#3f3b36e6
  • tab.hoverBackground#25211d
  • tab.inactiveBackground#2b2723
  • tab.inactiveForeground#7d8590
  • tab.unfocusedActiveBorder#25211d
  • tab.unfocusedActiveBorderTop#3f3b36e6
  • tab.unfocusedHoverBackground#34302c
  • terminal.ansiBlack#484f58
  • terminal.ansiBlue#58a6ff
  • terminal.ansiBrightBlack#6e7681
  • terminal.ansiBrightBlue#79c0ff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#56d364
  • terminal.ansiBrightMagenta#d2a8ff
  • terminal.ansiBrightRed#ffa198
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#e3b341
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#3fb950
  • terminal.ansiMagenta#bc8cff
  • terminal.ansiRed#ff7b72
  • terminal.ansiWhite#b1bac4
  • terminal.ansiYellow#d29922
  • terminal.foreground#d7cfc7
  • terminal.hoverHighlightBackground#264f7820
  • terminal.inactiveSelectionBackground#264f7880
  • terminal.selectionBackground#264f78
  • textBlockQuote.background#2b2723
  • textBlockQuote.border#3f3b36e6
  • textCodeBlock.background#7e746a66
  • textLink.activeForeground#2f81f7
  • textLink.foreground#2f81f7
  • textPreformat.background#7e746a66
  • textPreformat.foreground#7d8590
  • textSeparator.foreground#2b251e
  • titleBar.activeBackground#25211d
  • titleBar.activeForeground#7d8590
  • titleBar.border#3f3b36e6
  • titleBar.inactiveBackground#2b2723
  • titleBar.inactiveForeground#7d8590
  • tree.indentGuidesStroke#2b251e
  • welcomePage.buttonBackground#2b2723
  • welcomePage.buttonHoverBackground#3b342e
  • welcomePage.tileBackground#302b27
  • welcomePage.tileHoverBackground#383430

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#2ea043
constant.other.placeholder, constant.character#db61a2
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language, entity#79c0ff
entity.name, meta.export.default, meta.definition.variable#b1bac4
variable.parameter.function, meta.jsx.children, meta.block, meta.tag.attributes, entity.name.constant, meta.object.member, meta.embedded.expression#d7cfc7
entity.name.function#bc8cff
entity.name.tag, support.class.component#e3b341
keyword#db61a2
storage, storage.type#db61a2
storage.modifier.package, storage.modifier.import, storage.type.java#d7cfc7
string, string punctuation.section.embedded source#a5d6ff
support#79c0ff
meta.property-name#79c0ff
variable#b1bac4
variable.other#d7cfc7
invalid.broken#f778baitalic
invalid.deprecated#f778baitalic
invalid.illegal#f778baitalic
invalid.unimplemented#f778baitalic
carriage-return#faf4eeitalic underline
message.error#f778ba
string variable#79c0ff
source.regexp, string.regexp#a5d6ff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#a5d6ff
string.regexp constant.character.escape#e3b341bold
support.constant#79c0ff
support.variable#79c0ff
support.type.property-name.json#e3b341
meta.module-reference#79c0ff
punctuation.definition.list.begin.markdown#b1bac4
markup.heading, markup.heading entity.name#79c0ffbold
markup.quote#e3b341
markup.italic#d7cfc7italic
markup.bold#d7cfc7bold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#79c0ff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#f778ba
punctuation.section.embedded#db61a2
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#e3b341
markup.changed, punctuation.definition.changed#b1bac4
markup.ignored, markup.untracked#201a13
meta.diff.range#bc8cffbold
meta.diff.header#79c0ff
meta.separator#79c0ffbold
meta.output#79c0ff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#9b9188
brackethighlighter.unmatched#f778ba
constant.other.reference.link, string.other.link#a5d6ff
punctuation.definition.string.end, punctuation.definition.string.begin#a5d6ffcc
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#e3b341cc

Shiki preview

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

Loading...

Nushu - Coding Theme