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.activeBackground#DDD3BB
  • activityBar.activeBorder#26262600
  • activityBar.background#DFD5B9
  • activityBar.border#26262600
  • activityBar.dropBorder#26262600
  • activityBar.foreground#2A2D33
  • activityBar.inactiveForeground#5E6468
  • activityBarBadge.background#983029
  • activityBarBadge.foreground#DFD5B9
  • badge.background#983029
  • badge.foreground#DFD5B9
  • breadcrumb.activeSelectionForeground#28313A
  • breadcrumb.background#DFD5B9
  • breadcrumb.focusForeground#28313A
  • breadcrumb.foreground#5B6E7D
  • breadcrumbPicker.background#DFD5B9
  • button.background#28313A
  • button.foreground#DDD3BB
  • button.hoverBackground#353F4A
  • button.secondaryBackground#26262608
  • button.secondaryForeground#28313A
  • button.secondaryHoverBackground#26262610
  • charts.blue#465B74
  • charts.foreground#353F4A
  • charts.green#467457
  • charts.lines#D4D0BE
  • charts.orange#865041
  • charts.purple#706652
  • charts.red#9E2F26
  • charts.yellow#8B4E3D
  • commandCenter.activeBackground#D8D1BB
  • commandCenter.activeBorder#26262600
  • commandCenter.activeForeground#28313A
  • commandCenter.background#DDD3BB
  • commandCenter.border#26262600
  • commandCenter.foreground#646664
  • debugExceptionWidget.background#9E2F2615
  • debugExceptionWidget.border#26262600
  • debugToolBar.background#DDD3BB
  • debugToolBar.border#26262600
  • diffEditor.border#26262600
  • diffEditor.diagonalFill#D4D0BE80
  • diffEditor.insertedLineBackground#46745715
  • diffEditor.insertedTextBackground#46745720
  • diffEditor.removedLineBackground#9E2F2615
  • diffEditor.removedTextBackground#9E2F2620
  • disabledForeground#5B6E7D
  • dropdown.background#DFD5B9
  • dropdown.border#26262600
  • dropdown.foreground#4F5B67
  • dropdown.listBackground#DFD5B9
  • editor.background#DFD5B9
  • editor.findMatchBackground#98302925
  • editor.findMatchHighlightBackground#98302912
  • editor.findRangeHighlightBackground#26262610
  • editor.foldBackground#26262608
  • editor.foreground#3A3C3F
  • editor.hoverHighlightBackground#26262610
  • editor.inactiveSelectionBackground#3A413F08
  • editor.lineHighlightBackground#26262605
  • editor.lineHighlightBorder#26262600
  • editor.linkedEditingBackground#26262610
  • editor.rangeHighlightBackground#26262610
  • editor.selectionBackground#3A413F14
  • editor.selectionHighlightBackground#28313A10
  • editor.wordHighlightBackground#26262610
  • editor.wordHighlightStrongBackground#26262610
  • editorBracketHighlight.foreground1#20526F
  • editorBracketHighlight.foreground2#365F4F
  • editorBracketHighlight.foreground3#845438
  • editorBracketHighlight.foreground4#5E6468
  • editorBracketHighlight.foreground5#983029
  • editorBracketHighlight.foreground6#237D90
  • editorBracketHighlight.unexpectedBracket.foreground#9E2F26
  • editorBracketMatch.background#2626260F
  • editorBracketMatch.border#26262600
  • editorBracketPairGuide.activeBackground1#58657050
  • editorBracketPairGuide.activeBackground2#4F5B6750
  • editorBracketPairGuide.activeBackground3#58657050
  • editorBracketPairGuide.activeBackground4#4F5B6750
  • editorBracketPairGuide.activeBackground5#58657050
  • editorBracketPairGuide.activeBackground6#4F5B6750
  • editorBracketPairGuide.background1#26262600
  • editorBracketPairGuide.background2#26262600
  • editorBracketPairGuide.background3#26262600
  • editorBracketPairGuide.background4#26262600
  • editorBracketPairGuide.background5#26262600
  • editorBracketPairGuide.background6#26262600
  • editorCursor.foreground#983029
  • editorError.foreground#9E2F26
  • editorGhostText.foreground#5B6E7D
  • editorGroup.border#26262600
  • editorGroup.dropBackground#26262610
  • editorGroup.emptyBackground#DFD5B9
  • editorGroupHeader.noTabsBackground#DFD5B9
  • editorGroupHeader.tabsBackground#DFD5B9
  • editorGroupHeader.tabsBorder#26262600
  • editorGutter.addedBackground#467457
  • editorGutter.deletedBackground#9E2F26
  • editorGutter.foldingControlForeground#646664
  • editorGutter.modifiedBackground#465B74
  • editorHint.foreground#586570
  • editorHoverWidget.background#DFD5B9
  • editorHoverWidget.border#26262600
  • editorHoverWidget.foreground#4F5B67
  • editorIndentGuide.activeBackground1#58657050
  • editorIndentGuide.background1#26262600
  • editorInfo.foreground#4F5B67
  • editorInlayHint.background#DDD3BB
  • editorInlayHint.foreground#5B6E7D
  • editorInlayHint.parameterBackground#DDD3BB
  • editorInlayHint.parameterForeground#5B6E7D
  • editorInlayHint.typeBackground#DDD3BB
  • editorInlayHint.typeForeground#5B6E7D
  • editorLineHighlightBorder#26262600
  • editorLineNumber.activeForeground#3A3A3A
  • editorLineNumber.foreground#6B6B6B
  • editorLink.activeForeground#28313A
  • editorMarkerNavigation.background#DDD3BB
  • editorMarkerNavigationError.background#9E2F26
  • editorMarkerNavigationInfo.background#4F5B67
  • editorMarkerNavigationWarning.background#8B4E3D
  • editorOverviewRuler.addedForeground#4F5B67
  • editorOverviewRuler.border#26262600
  • editorOverviewRuler.bracketMatchForeground#5B6E7D
  • editorOverviewRuler.deletedForeground#9E2F26
  • editorOverviewRuler.errorForeground#9E2F26
  • editorOverviewRuler.findMatchForeground#9E2F2630
  • editorOverviewRuler.infoForeground#4F5B67
  • editorOverviewRuler.modifiedForeground#4F5B67
  • editorOverviewRuler.rangeHighlightForeground#4F5B6720
  • editorOverviewRuler.selectionHighlightForeground#4F5B6720
  • editorOverviewRuler.warningForeground#8B4E3D
  • editorOverviewRuler.wordHighlightForeground#4F5B6720
  • editorOverviewRuler.wordHighlightStrongForeground#28313A30
  • editorRuler.foreground#26262600
  • editorStickyScroll.background#DDD3BB
  • editorStickyScrollHover.background#26262608
  • editorSuggestWidget.background#DFD5B9
  • editorSuggestWidget.border#26262600
  • editorSuggestWidget.foreground#4F5B67
  • editorSuggestWidget.highlightForeground#9E2F26
  • editorSuggestWidget.selectedBackground#353F4A0D
  • editorUnicodeHighlight.border#26262600
  • editorWarning.foreground#8B4E3D
  • editorWhitespace.foreground#5B6E7D30
  • editorWidget.background#DFD5B9
  • editorWidget.border#26262600
  • editorWidget.foreground#4F5B67
  • editorWidget.resizeBorder#26262600
  • editorWidget.shadow#2626260C
  • errorForeground#983029
  • extensionBadge.remoteBackground#28313A
  • extensionBadge.remoteForeground#DDD3BB
  • extensionButton.prominentBackground#28313A
  • extensionButton.prominentForeground#DDD3BB
  • extensionButton.prominentHoverBackground#353F4A
  • focusBorder#26262600
  • foreground#3A3C3F
  • gitDecoration.addedResourceForeground#365F4F
  • gitDecoration.conflictingResourceForeground#8B4E3D
  • gitDecoration.deletedResourceForeground#983029
  • gitDecoration.ignoredResourceForeground#616C78
  • gitDecoration.modifiedResourceForeground#20526F
  • gitDecoration.renamedResourceForeground#365061
  • gitDecoration.stageDeletedResourceForeground#9E2F26
  • gitDecoration.stageModifiedResourceForeground#465B74
  • gitDecoration.submoduleResourceForeground#706652
  • gitDecoration.untrackedResourceForeground#365F4F
  • input.background#DDD3BB
  • input.border#26262600
  • input.foreground#4F5B67
  • input.placeholderForeground#5B6E7D
  • inputOption.activeBackground#26262610
  • inputOption.activeBorder#26262600
  • inputOption.activeForeground#28313A
  • inputValidation.errorBackground#9E2F2615
  • inputValidation.errorBorder#26262600
  • inputValidation.errorForeground#9E2F26
  • inputValidation.infoBackground#26262610
  • inputValidation.infoBorder#26262600
  • inputValidation.infoForeground#28313A
  • inputValidation.warningBackground#8B4E3D15
  • inputValidation.warningBorder#26262600
  • inputValidation.warningForeground#8B4E3D
  • keybindingLabel.background#D8D1BB
  • keybindingLabel.border#26262600
  • keybindingLabel.bottomBorder#26262600
  • keybindingLabel.foreground#353F4A
  • list.activeSelectionBackground#2626260F
  • list.activeSelectionForeground#2A2D33
  • list.dropBackground#26262610
  • list.errorForeground#9E2F26
  • list.filterMatchBackground#26262610
  • list.filterMatchBorder#26262600
  • list.focusAndSelectionOutline#26262600
  • list.focusBackground#26262610
  • list.focusForeground#28313A
  • list.focusOutline#26262600
  • list.highlightForeground#9E2F26
  • list.hoverBackground#26262604
  • list.hoverForeground#353F4A
  • list.inactiveFocusBackground#26262608
  • list.inactiveSelectionBackground#26262606
  • list.inactiveSelectionForeground#4F5B67
  • list.invalidItemForeground#9E2F26
  • list.warningForeground#8B4E3D
  • listFilterWidget.background#DFD5B9
  • listFilterWidget.noMatchesOutline#26262600
  • listFilterWidget.outline#26262600
  • menu.background#DFD5B9
  • menu.border#26262600
  • menu.foreground#4F5B67
  • menu.selectionBackground#353F4A0D
  • menu.selectionForeground#28313A
  • menu.separatorBackground#26262600
  • menubar.selectionBackground#26262610
  • menubar.selectionForeground#28313A
  • merge.border#26262600
  • merge.commonContentBackground#D4D0BE25
  • merge.commonHeaderBackground#D4D0BE45
  • merge.currentContentBackground#4674571A
  • merge.currentHeaderBackground#46745735
  • merge.incomingContentBackground#465B741A
  • merge.incomingHeaderBackground#465B7435
  • minimap.background#DDD3BB
  • minimap.errorHighlight#9E2F26
  • minimap.findMatchHighlight#9E2F2625
  • minimap.selectionHighlight#26262610
  • minimap.warningHighlight#8B4E3D
  • minimapSlider.activeBackground#28313A10
  • minimapSlider.background#28313A06
  • minimapSlider.hoverBackground#28313A0A
  • notificationCenterHeader.background#DDD3BB
  • notificationCenterHeader.foreground#5B6E7D
  • notificationLink.foreground#353F4A
  • notifications.background#DDD3BB
  • notifications.border#26262600
  • notifications.foreground#4F5B67
  • notificationsErrorIcon.foreground#9E2F26
  • notificationsInfoIcon.foreground#4F5B67
  • notificationsWarningIcon.foreground#8B4E3D
  • panel.background#DFD5B9
  • panel.border#26262600
  • panelInput.border#26262600
  • panelSection.border#26262600
  • panelSectionHeader.background#D8D1BB
  • panelSectionHeader.border#26262600
  • panelSectionHeader.foreground#353F4A
  • panelTitle.activeBorder#26262600
  • panelTitle.activeForeground#28313A
  • panelTitle.inactiveForeground#586570
  • peekView.border#26262600
  • peekViewEditor.background#DFD5B9
  • peekViewEditor.matchHighlightBackground#9E2F2620
  • peekViewEditorGutter.background#26262608
  • peekViewResult.background#DFD5B9
  • peekViewResult.fileForeground#28313A
  • peekViewResult.lineForeground#586570
  • peekViewResult.matchHighlightBackground#9E2F2620
  • peekViewResult.selectionBackground#26262610
  • peekViewResult.selectionForeground#28313A
  • peekViewTitle.background#DFD5B9
  • peekViewTitleDescription.foreground#586570
  • peekViewTitleLabel.foreground#28313A
  • progressBar.background#28313A
  • quickInput.background#DFD5B9
  • quickInput.foreground#4F5B67
  • quickInputList.focusBackground#353F4A0D
  • quickInputList.focusForeground#28313A
  • quickInputList.focusIconForeground#28313A
  • quickInputTitle.background#DFD5B9
  • scrollbar.shadow#26262600
  • scrollbarSlider.activeBackground#26262620
  • scrollbarSlider.background#26262608
  • scrollbarSlider.hoverBackground#26262615
  • selection.background#9E2F2615
  • settings.checkboxBackground#DFD5B9
  • settings.checkboxBorder#26262600
  • settings.checkboxForeground#353F4A
  • settings.dropdownBackground#DFD5B9
  • settings.dropdownBorder#26262600
  • settings.dropdownForeground#353F4A
  • settings.focusedRowBackground#D8D1BB
  • settings.focusedRowBorder#26262600
  • settings.headerForeground#28313A
  • settings.modifiedItemIndicator#465B74
  • settings.numberInputBackground#DFD5B9
  • settings.numberInputBorder#26262600
  • settings.numberInputForeground#353F4A
  • settings.rowHoverBackground#D8D1BB80
  • settings.textInputBackground#DFD5B9
  • settings.textInputBorder#26262600
  • settings.textInputForeground#353F4A
  • sideBar.background#DFD5B9
  • sideBar.border#26262600
  • sideBar.dropBackground#26262610
  • sideBar.foreground#565B5E
  • sideBarSectionHeader.background#DFD5B9
  • sideBarSectionHeader.border#26262600
  • sideBarSectionHeader.foreground#353F4A
  • sideBarTitle.foreground#2A2D33
  • statusBar.background#DFD5B9
  • statusBar.border#26262600
  • statusBar.debuggingBackground#983029
  • statusBar.debuggingForeground#DFD5B9
  • statusBar.foreground#565B5E
  • statusBar.noFolderBackground#DFD5B9
  • statusBar.noFolderForeground#565B5E
  • statusBarItem.activeBackground#26262610
  • statusBarItem.errorBackground#9E2F26
  • statusBarItem.errorForeground#DDD3BB
  • statusBarItem.hoverBackground#26262608
  • statusBarItem.prominentBackground#26262608
  • statusBarItem.prominentHoverBackground#26262610
  • statusBarItem.warningBackground#8B4E3D
  • statusBarItem.warningForeground#DDD3BB
  • tab.activeBackground#DFD5B9
  • tab.activeBorder#26262600
  • tab.activeBorderTop#26262600
  • tab.activeForeground#2A2D33
  • tab.border#26262600
  • tab.hoverBackground#DDD3BB80
  • tab.inactiveBackground#DFD5B9
  • tab.inactiveForeground#5E6468
  • tab.unfocusedActiveBackground#DFD5B9
  • tab.unfocusedActiveForeground#586570
  • tab.unfocusedInactiveBackground#DFD5B9
  • tab.unfocusedInactiveForeground#5B6E7D
  • terminal.ansiBlack#2A2D33
  • terminal.ansiBlue#20526F
  • terminal.ansiBrightBlack#586570
  • terminal.ansiBrightBlue#4F5B67
  • terminal.ansiBrightCyan#353F4A
  • terminal.ansiBrightGreen#353F4A
  • terminal.ansiBrightMagenta#796C50
  • terminal.ansiBrightRed#9E2F26
  • terminal.ansiBrightWhite#DDD3BB
  • terminal.ansiBrightYellow#865041
  • terminal.ansiCyan#237D90
  • terminal.ansiGreen#365F4F
  • terminal.ansiMagenta#845438
  • terminal.ansiRed#983029
  • terminal.ansiWhite#DFD5B9
  • terminal.ansiYellow#956E28
  • terminal.background#DFD5B9
  • terminal.foreground#3A3C3F
  • terminal.selectionBackground#26262610
  • terminalCursor.background#DDD3BB
  • terminalCursor.foreground#28313A
  • testing.iconErrored#9E2F26
  • testing.iconFailed#9E2F26
  • testing.iconPassed#467457
  • testing.iconQueued#8B4E3D
  • testing.iconSkipped#646664
  • testing.iconUnset#646664
  • testing.runAction#465B74
  • textBlockQuote.background#26262608
  • textBlockQuote.border#26262600
  • textCodeBlock.background#26262608
  • textLink.activeForeground#28313A
  • textLink.foreground#353F4A
  • textPreformat.foreground#353F4A
  • textSeparator.foreground#26262600
  • titleBar.activeBackground#DFD5B9
  • titleBar.activeForeground#2A2D33
  • titleBar.border#26262600
  • titleBar.inactiveBackground#DFD5B9
  • titleBar.inactiveForeground#5E6468
  • tree.inactiveIndentGuidesStroke#26262600
  • tree.indentGuidesStroke#26262600
  • widget.border#26262600
  • widget.shadow#2626260C

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#616C78italic
keyword, keyword.operator.new, keyword.operator.expression, keyword.operator.delete, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.void#5E6468
keyword.control, keyword.control.flow, keyword.control.conditional, keyword.control.loop, keyword.control.import, keyword.control.export, keyword.control.from, keyword.control.return, keyword.control.trycatch, keyword.control.exception#983029bold
storage.type, storage.type.function, storage.type.class, storage.type.enum, storage.type.interface, storage.type.ts#2A2D33bold
storage.modifier, storage.type.annotation#2A2D33bold
entity.name.type, entity.name.class, support.type, support.class#2A2D33bold
entity.other.inherited-class#353F4Aitalic
entity.name.function, support.function, meta.function-call.generic, meta.function-call.object#20526F
variable, variable.other, variable.other.readwrite, meta.definition.variable, support.variable#3A3C3F
variable.parameter, meta.function.parameters#565B5Eitalic
variable.other.constant, variable.other.enummember, support.constant#845438
variable.language.this, variable.language.super, variable.language.special, variable.parameter.function.language.special#565B5Eitalic
string, punctuation.definition.string, string punctuation.section.embedded source#3A3A3A
constant.numeric, constant.language, constant.character, constant.escape#845438
keyword.operator, keyword.operator.assignment, keyword.operator.arithmetic, keyword.operator.comparison, keyword.operator.relational, keyword.operator.ternary, keyword.operator.type, keyword.operator.spread#5E6468
punctuation, punctuation.separator, punctuation.terminator, punctuation.definition.parameters, punctuation.definition.array, punctuation.definition.dictionary, punctuation.definition.block, punctuation.definition.tag, meta.brace.round, meta.brace.square#5E6468
entity.name.tag#3A3A3A
entity.name.tag.component, support.class.component, entity.name.tag.html.vue#983029bold
entity.other.attribute-name#5E6468italic
markup.heading, markup.heading entity.name#2A2D33bold
markup.italicitalic
markup.boldbold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.quote#353F4Aitalic
markup.inline.raw, markup.fenced_code.block#353F4A
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#5E6468
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#5E6468
markup.changed, punctuation.definition.changed#5E6468
source.json meta.structure.dictionary.json support.type.property-name.json#4F5B67
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4F5B67
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4F5B67
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4F5B67
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4F5B67
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#4F5B67
storage.modifier.import.java, variable.language.wildcard.java, storage.modifier.package.java#2A2D33bold
meta.method.java entity.name.function.java#20526F
meta.class.java entity.name.type.class.java, meta.interface.java entity.name.type.interface.java#2A2D33bold
meta.annotation.java, meta.annotation.java entity.name.type.class.java, meta.annotation.java punctuation.definition.annotation.java#2A2D33bold
support.type.python, support.class.python#2A2D33bold
meta.function.python entity.name.function.python, meta.function-call.python#20526F
meta.function-call.arguments.python#20526F
meta.member.access.python#353F4A
support.type.exception.python#353F4A
meta.decorator.python, meta.decorator.python entity.name.function.python#20526F
variable.parameter.function.language.special.self.python#565B5Eitalic
string.regexp#365F4F
string.template, punctuation.definition.template-expression#365F4F
entity.name.type.module, support.module, support.node#2A2D33bold
keyword.control.as, keyword.control.default#983029bold
support.type.builtin, support.type.primitive#353F4A
meta.type.annotation, meta.type.parameters#4F5B67
markup.list#353F4A
markup.list.unnumbered.markdown, markup.list.numbered.markdown#465B74
punctuation.definition.tag#5E6468
entity.other.attribute-name.id#353F4A
entity.other.attribute-name.class.css, entity.other.attribute-name.class.mixin.css#353F4A
support.type.property-name.css, support.type.vendored.property-name.css#4F5B67
support.constant.property-value.css, support.constant.font-name, meta.property-value.css#845438
constant.numeric.css, keyword.other.unit.css#2A2D33bold
keyword.other.important.css#2A2D33bold
entity.name.tag.css, entity.name.tag.wildcard.css#3A3A3A
variable.css, variable.argument.css#3A3C3F
source.css.scss keyword.control, source.css.less keyword.control#983029bold
source.go entity.name.function, source.go support.function#20526F
source.go entity.name.type#2A2D33bold
source.go keyword, source.go keyword.control, source.go storage.type#983029bold
source.rust entity.name.function, source.rust support.function#20526F
source.rust entity.name.type, source.rust storage.type.core.rust#2A2D33bold
source.rust entity.name.lifetime#3A3A3A
source.rust meta.attribute.rust#706652italic
source.c keyword, source.cpp keyword, source.c storage.type, source.cpp storage.type#2A2D33bold
source.c entity.name.function, source.cpp entity.name.function#20526F
source.c entity.name.type, source.cpp entity.name.type#2A2D33bold
source.c meta.preprocessor, source.cpp meta.preprocessor#706652italic
source.shell keyword, source.shell keyword.control, source.shell storage.type#983029bold
source.shell entity.name.function, source.shell support.function#20526F
source.shell variable, source.shell variable.other#3A3C3F
meta.embedded.block, source.groovy.embedded#353F4A
source.yaml entity.name.tag, source.yaml punctuation.definition.block.sequence.item#5E6468
source.toml entity.name.tag, source.toml support.type.property-name#3A3A3Abold
source.toml entity.name.section, source.toml entity.name.section.group-title#3A3A3A
source.sql keyword#2A2D33bold
source.sql entity.name#3A3A3A
source.sql support.function#20526F
source.sql constant.other.database-name, source.sql constant.other.table-name#845438
水墨 Theme by wangx - VS Code Theme