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#ebebed
  • activityBar.activeBorder#007AFF
  • activityBar.activeFocusBorder#007AFF
  • activityBar.background#ebebed
  • activityBar.border#d1d1d6
  • activityBar.dropBorder#007AFF
  • activityBar.foreground#515154
  • activityBar.inactiveForeground#aeaeb2
  • activityBarBadge.background#007AFF
  • activityBarBadge.foreground#ffffff
  • activityBarTop.activeBackground#ebebed
  • activityBarTop.activeBorder#007AFF
  • activityBarTop.background#ebebed
  • activityBarTop.dropBorder#007AFF
  • activityBarTop.foreground#515154
  • activityBarTop.inactiveForeground#aeaeb2
  • badge.background#007AFF
  • badge.foreground#ffffff
  • banner.background#007AFF
  • banner.foreground#ffffff
  • breadcrumb.activeSelectionForeground#1c1c1e
  • breadcrumb.background#f5f5f5
  • breadcrumb.focusForeground#007AFF
  • breadcrumb.foreground#8e8e93
  • breadcrumbPicker.background#ffffff
  • button.background#007AFF
  • button.foreground#ffffff
  • button.hoverBackground#0069d9
  • button.secondaryBackground#e5e5ea
  • button.secondaryForeground#1c1c1e
  • button.secondaryHoverBackground#d1d1d6
  • checkbox.background#ffffff
  • checkbox.border#d1d1d6
  • checkbox.foreground#007AFF
  • debugIcon.breakpointForeground#FF3B30
  • debugIcon.continueForeground#34C759
  • debugIcon.startForeground#34C759
  • debugIcon.stopForeground#FF3B30
  • debugToolBar.background#ffffff
  • debugToolBar.border#d1d1d6
  • descriptionForeground#515154
  • diffEditor.border#d1d1d6
  • diffEditor.insertedLineBackground#34C75918
  • diffEditor.insertedTextBackground#34C75933
  • diffEditor.removedLineBackground#FF3B3012
  • diffEditor.removedTextBackground#FF3B3026
  • disabledForeground#8e8e9380
  • dropdown.background#ffffff
  • dropdown.border#d1d1d6
  • dropdown.foreground#1c1c1e
  • editor.background#f5f5f5
  • editor.findMatchBackground#FF950040
  • editor.findMatchBorder#FF9500cc
  • editor.findMatchHighlightBackground#FF950022
  • editor.findMatchHighlightBorder#FF950066
  • editor.foreground#1c1c1e
  • editor.inactiveSelectionBackground#007AFF1a
  • editor.lineHighlightBackground#f2f2f7
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#007AFF12
  • editor.selectionBackground#007AFF33
  • editor.selectionHighlightBackground#007AFF1f
  • editor.selectionHighlightBorder#007AFF55
  • editor.wordHighlightBackground#007AFF18
  • editor.wordHighlightBorder#007AFF44
  • editor.wordHighlightStrongBackground#007AFF2a
  • editor.wordHighlightStrongBorder#007AFF66
  • editorBracketHighlight.foreground1#ff8512
  • editorBracketHighlight.foreground2#C838C6
  • editorBracketHighlight.foreground3#437AED
  • editorBracketHighlight.foreground4#ff8512
  • editorBracketHighlight.foreground5#C838C6
  • editorBracketHighlight.foreground6#437AED
  • editorBracketMatch.background#007AFF18
  • editorBracketMatch.border#007AFF66
  • editorBracketPairGuide.activeBackground1#FF6D12cc
  • editorBracketPairGuide.activeBackground2#C838C6cc
  • editorBracketPairGuide.activeBackground3#437AEDcc
  • editorBracketPairGuide.activeBackground4#FF6D12cc
  • editorBracketPairGuide.activeBackground5#C838C6cc
  • editorBracketPairGuide.activeBackground6#437AEDcc
  • editorCodeLens.foreground#8e8e93
  • editorCursor.background#f5f5f5
  • editorCursor.foreground#007AFF
  • editorError.background#FF3B3010
  • editorError.foreground#FF3B30
  • editorGroup.border#d1d1d6
  • editorGroup.dropBackground#007AFF18
  • editorGroup.emptyBackground#f5f5f7
  • editorGroup.focusedEmptyBorder#007AFF66
  • editorGroupHeader.border#d1d1d6
  • editorGroupHeader.noTabsBackground#f5f5f7
  • editorGroupHeader.tabsBackground#f0f0f2
  • editorGroupHeader.tabsBorder#d1d1d6
  • editorGutter.addedBackground#34C759
  • editorGutter.background#f5f5f5
  • editorGutter.deletedBackground#FF3B30
  • editorGutter.modifiedBackground#FF9500
  • editorHint.foreground#34C759
  • editorHoverWidget.background#ffffff
  • editorHoverWidget.border#d1d1d6
  • editorHoverWidget.foreground#1c1c1e
  • editorHoverWidget.highlightForeground#007AFF
  • editorHoverWidget.statusBarBackground#f5f5f7
  • editorIndentGuide.activeBackground1#aeaeb2
  • editorIndentGuide.background1#e5e5ea
  • editorInfo.background#007AFF10
  • editorInfo.foreground#007AFF
  • editorLineNumber.activeForeground#515154
  • editorLineNumber.foreground#c7c7cc
  • editorOverviewRuler.addedForeground#34C759bb
  • editorOverviewRuler.border#e5e5ea
  • editorOverviewRuler.bracketMatchForeground#007AFF88
  • editorOverviewRuler.deletedForeground#FF3B30bb
  • editorOverviewRuler.errorForeground#FF3B30cc
  • editorOverviewRuler.findMatchForeground#FF9500aa
  • editorOverviewRuler.infoForeground#007AFFcc
  • editorOverviewRuler.modifiedForeground#FF9500bb
  • editorOverviewRuler.selectionHighlightForeground#007AFF88
  • editorOverviewRuler.warningForeground#FF9500cc
  • editorRuler.foreground#e5e5ea
  • editorStickyScroll.background#f5f5f5ee
  • editorStickyScroll.border#e5e5ea
  • editorStickyScroll.shadow#00000012
  • editorStickyScrollHover.background#f0f0f2ee
  • editorSuggestWidget.background#ffffff
  • editorSuggestWidget.border#d1d1d6
  • editorSuggestWidget.focusHighlightForeground#007AFF
  • editorSuggestWidget.foreground#1c1c1e
  • editorSuggestWidget.highlightForeground#007AFF
  • editorSuggestWidget.selectedBackground#007AFF14
  • editorSuggestWidget.selectedForeground#1c1c1e
  • editorSuggestWidget.selectedIconForeground#007AFF
  • editorUnnecessaryCode.opacity#00000060
  • editorWarning.background#FF950010
  • editorWarning.foreground#FF9500
  • editorWhitespace.foreground#d1d1d6
  • editorWidget.background#f5f5f7
  • editorWidget.border#d1d1d6
  • editorWidget.foreground#1c1c1e
  • editorWidget.resizeBorder#007AFF
  • errorForeground#FF3B30
  • extensionButton.prominentBackground#007AFF
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#0069d9
  • focusBorder#007AFF99
  • foreground#1c1c1e
  • gitDecoration.addedResourceForeground#34C759
  • gitDecoration.conflictingResourceForeground#AF52DE
  • gitDecoration.deletedResourceForeground#FF3B30
  • gitDecoration.ignoredResourceForeground#aeaeb2
  • gitDecoration.modifiedResourceForeground#FF9500
  • gitDecoration.renamedResourceForeground#32ADE6
  • gitDecoration.untrackedResourceForeground#30A64A
  • icon.foreground#515154
  • input.background#ffffff
  • input.border#d1d1d6
  • input.foreground#1c1c1e
  • input.placeholderForeground#aeaeb2
  • inputOption.activeBackground#007AFF22
  • inputOption.activeBorder#007AFF
  • inputOption.activeForeground#007AFF
  • inputOption.hoverBackground#007AFF14
  • inputValidation.errorBackground#fff0ef
  • inputValidation.errorBorder#FF3B30
  • inputValidation.infoBackground#f0f6ff
  • inputValidation.infoBorder#007AFF
  • inputValidation.warningBackground#fff8f0
  • inputValidation.warningBorder#FF9500
  • keybindingLabel.background#f0f0f2
  • keybindingLabel.border#d1d1d6
  • keybindingLabel.foreground#1c1c1e
  • list.activeSelectionBackground#007AFF
  • list.activeSelectionForeground#ffffff
  • list.activeSelectionIconForeground#ffffff
  • list.dropBackground#007AFF22
  • list.errorForeground#FF3B30
  • list.filterMatchBackground#FF950033
  • list.filterMatchBorder#FF950088
  • list.focusBackground#007AFF1a
  • list.focusForeground#1c1c1e
  • list.focusHighlightForeground#007AFF
  • list.focusOutline#007AFF66
  • list.highlightForeground#007AFF
  • list.hoverBackground#e8e8ed
  • list.hoverForeground#1c1c1e
  • list.inactiveSelectionBackground#007AFF1a
  • list.inactiveSelectionForeground#515154
  • list.warningForeground#FF9500
  • menu.background#ffffff
  • menu.border#d1d1d6
  • menu.foreground#1c1c1e
  • menu.selectionBackground#007AFF
  • menu.selectionForeground#ffffff
  • menu.separatorBackground#d1d1d6
  • menubar.selectionBackground#007AFF18
  • menubar.selectionForeground#1c1c1e
  • minimap.background#f0f0f2
  • minimap.errorHighlight#FF3B30aa
  • minimap.findMatchHighlight#FF9500aa
  • minimap.infoHighlight#007AFFaa
  • minimap.selectionHighlight#007AFF44
  • minimapGutter.addedBackground#34C759
  • minimapGutter.deletedBackground#FF3B30
  • minimapGutter.modifiedBackground#FF9500
  • minimapSlider.activeBackground#007AFF33
  • minimapSlider.background#007AFF18
  • minimapSlider.hoverBackground#007AFF22
  • notifications.background#ffffff
  • notifications.border#d1d1d6
  • notifications.foreground#1c1c1e
  • notificationsErrorIcon.foreground#FF3B30
  • notificationsInfoIcon.foreground#007AFF
  • notificationsWarningIcon.foreground#FF9500
  • panel.background#f0f0f2
  • panel.border#d1d1d6
  • panelSection.border#d1d1d6
  • panelSectionHeader.background#ebebed
  • panelSectionHeader.border#d1d1d6
  • panelSectionHeader.foreground#1c1c1e
  • panelTitle.activeBorder#007AFF
  • panelTitle.activeForeground#1c1c1e
  • panelTitle.inactiveForeground#8e8e93
  • peekView.border#007AFF
  • peekViewEditor.background#f0f6ff
  • peekViewEditor.matchHighlightBackground#007AFF33
  • peekViewEditorGutter.background#e8f0fe
  • peekViewResult.background#f5f5f7
  • peekViewResult.fileForeground#1c1c1e
  • peekViewResult.lineForeground#515154
  • peekViewResult.matchHighlightBackground#007AFF2a
  • peekViewResult.selectionBackground#007AFF1a
  • peekViewResult.selectionForeground#1c1c1e
  • peekViewTitle.background#007AFF
  • peekViewTitleDescription.foreground#ffffffcc
  • peekViewTitleLabel.foreground#ffffff
  • pickerGroup.border#d1d1d6
  • pickerGroup.foreground#8e8e93
  • quickInput.background#ffffff
  • quickInput.foreground#1c1c1e
  • quickInputList.focusBackground#007AFF
  • quickInputList.focusForeground#ffffff
  • quickInputList.focusIconForeground#ffffff
  • quickInputTitle.background#f5f5f7
  • sash.hoverBorder#007AFF66
  • scrollbar.shadow#00000014
  • scrollbarSlider.activeBackground#8e8e9366
  • scrollbarSlider.background#aeaeb233
  • scrollbarSlider.hoverBackground#8e8e9344
  • selection.background#007AFF33
  • settings.focusedRowBackground#007AFF0a
  • settings.focusedRowBorder#007AFF44
  • settings.headerForeground#1c1c1e
  • settings.modifiedItemIndicator#FF9500
  • settings.rowHoverBackground#007AFF0a
  • sideBar.background#f5f5f7
  • sideBar.border#d1d1d6
  • sideBar.dropBackground#007AFF18
  • sideBar.foreground#515154
  • sideBarSectionHeader.background#ebebed
  • sideBarSectionHeader.border#d1d1d6
  • sideBarSectionHeader.foreground#1c1c1e
  • sideBarTitle.background#ebebed
  • sideBarTitle.foreground#1c1c1e
  • statusBar.background#ebebed
  • statusBar.border#d1d1d6
  • statusBar.debuggingBackground#FF9500
  • statusBar.debuggingForeground#ffffff
  • statusBar.focusBorder#007AFF
  • statusBar.foreground#515154
  • statusBar.noFolderBackground#f0f0f2
  • statusBar.noFolderForeground#515154
  • statusBarItem.errorBackground#FF3B30
  • statusBarItem.errorForeground#ffffff
  • statusBarItem.hoverBackground#007AFF18
  • statusBarItem.prominentBackground#007AFF
  • statusBarItem.prominentForeground#ffffff
  • statusBarItem.prominentHoverBackground#0069d9
  • statusBarItem.remoteBackground#007AFF
  • statusBarItem.remoteForeground#ffffff
  • statusBarItem.warningBackground#FF9500
  • statusBarItem.warningForeground#ffffff
  • tab.activeBackground#f5f5f5
  • tab.activeBorder#00000000
  • tab.activeBorderTop#007AFF
  • tab.activeForeground#1c1c1e
  • tab.activeModifiedBorder#FF9500
  • tab.border#d1d1d6
  • tab.hoverBackground#f5f5f7
  • tab.hoverForeground#1c1c1e
  • tab.inactiveBackground#f0f0f2
  • tab.inactiveForeground#8e8e93
  • tab.inactiveModifiedBorder#FF950066
  • tab.unfocusedActiveBackground#f5f5f7
  • tab.unfocusedActiveBorderTop#d1d1d6
  • tab.unfocusedActiveForeground#515154
  • tab.unfocusedHoverBackground#ebebed
  • tab.unfocusedInactiveForeground#aeaeb2
  • terminal.ansiBlack#3a3a3c
  • terminal.ansiBlue#007AFF
  • terminal.ansiBrightBlack#6c6c70
  • terminal.ansiBrightBlue#0A84FF
  • terminal.ansiBrightCyan#5AC8FA
  • terminal.ansiBrightGreen#30D158
  • terminal.ansiBrightMagenta#BF5AF2
  • terminal.ansiBrightRed#FF453A
  • terminal.ansiBrightWhite#f5f5f7
  • terminal.ansiBrightYellow#FFD60A
  • terminal.ansiCyan#32ADE6
  • terminal.ansiGreen#34C759
  • terminal.ansiMagenta#AF52DE
  • terminal.ansiRed#FF3B30
  • terminal.ansiWhite#c7c7cc
  • terminal.ansiYellow#FF9500
  • terminal.background#f0f0f2
  • terminal.border#d1d1d6
  • terminal.foreground#1c1c1e
  • terminal.selectionBackground#007AFF33
  • terminalCursor.background#f0f0f2
  • terminalCursor.foreground#007AFF
  • titleBar.activeBackground#ebebed
  • titleBar.activeForeground#1c1c1e
  • titleBar.border#d1d1d6
  • titleBar.inactiveBackground#f0f0f2
  • titleBar.inactiveForeground#8e8e93
  • tree.inactiveIndentGuidesStroke#e5e5ea
  • tree.indentGuidesStroke#d1d1d6
  • tree.tableOddRowsBackground#f9f9fb
  • walkThrough.embeddedEditorBackground#f5f5f7
  • welcomePage.background#f5f5f5
  • welcomePage.tileBackground#f9f9fb
  • welcomePage.tileBorder#d1d1d6
  • welcomePage.tileHoverBackground#f0f0f2
  • widget.border#d1d1d6
  • widget.shadow#00000018

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#AAAAAA
comment.block.preprocessor#AAAAAA
storage.type.namespace.directive#AB47BC
keyword.other.unit.suffix.integer#F44336
variable.other.local#006064
comment.documentation, comment.block.documentation#448C27
invalid.illegal#660000
keyword.operator#9E9D24
keyword, storage#AB47BC
storage.type, support.type#00897B
storage.type.built-in, storage.type.primitive, storage.type.built-in.cpp, storage.type.built-in.primitive.cpp#39960e
variable.other.member, variable.other.property, variable.other.field, variable.other.member.cpp, variable.other.property.cpp, variable.other.field.cpp#e64848
constant.language, support.constant, variable.language#AB47BC
variable, support.variable#1565C0
entity.name.function, support.function#3949ABitalic
entity.name.type, entity.other.inherited-class, entity.name.type.cpp, entity.other.inherited-class.cpp, meta.head.class.cpp, support.class#00897B
entity.name.label#e64848
entity.name.exception#660000
entity.name.sectionbold
constant.numeric, constant.character, constant#eb7221
entity.name.tag.html#1565C0
string#689F38
support.constant.property-value.css#7A3E9D
support.constant.font-name.css#689F38
constant.character.escape#FF5722
string.regexp#4B83CD
keyword.other.unit.exponent.decimal#F44336
variable.parameter#db8700italic
constant.other, entity.name.other.preprocessor.macro.cpp#5361BBbold
support.type.property-name.json.comments#1565C0
constant.language.json.comments#AB47BC
constant.language.true, constant.language.false, constant.language.boolean#AB47BC
storage.type.rust#AB47BC
meta.use.rust#689F38
support.type.property-name.json#1565C0
constant.language.json#AB47BC
entity.name.section.markdown#F57F17bold
punctuation.definition.list.begin.markdown#AB47BC
storage.type.template#AB47BC
constant.character.math.tex#AB47BC
markup.bold.markdown#F57F17bold
markup.italic.markdown#F57F17italic bold
entity.name.function.math.tex#AB47BC
storage.type.class, storage.type.struct, storage.type.enum, storage.type.union, storage.type.struct.cpp, storage.type.enum.cpp, storage.type.union.cpp#AB47BC
storage.type.modifier.access.control.private, storage.type.modifier.access.control.public, storage.type.modifier.access.control.protected, storage.type.modifier.access.private, storage.type.modifier.access.public, storage.type.modifier.access.protected#AB47BC
entity.name.namespace#00897B
constant.other.symbol#AB6526
punctuation#F57F17
storage.type.function.python, storage.type.function.js, storage.type.function.ts#AB47BC
meta.function-call.generic.python#3949AB
meta.indexed-name.python#00897B
storage.type.js, storage.type.ts#AB47BC
keyword.operator.new.js, keyword.operator.new.ts#AB47BC
keyword.other.unit.hexadecimal.cpp, keyword.other.unit.binary.cpp#F44336
meta.tag.sgml.doctype, meta.tag.sgml.doctype string, meta.tag.sgml.doctype entity.name.tag, meta.tag.sgml punctuation.definition.tag.html#AAAAAA
storage.modifier.import.java, storage.modifier.package.java#689F38
meta.tag, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#1565C0
entity.name.tag#4B83CD
meta.tag entity.other.attribute-name, entity.other.attribute-name.html#FB8C00
constant.character.entity, punctuation.definition.entity#AB47BC
meta.selector, meta.selector entity, meta.selector entity punctuation, entity.name.tag.css#7A3E9D
meta.property-name, support.type.property-name#FB8C00
meta.property-value, meta.property-value constant.other, support.constant.property-value#448C27
keyword.other.importantbold
markup.changed#000000
markup.deleted#000000
markup.error#660000
markup.inserted#000000
meta.link#4B83CD
markup.output, markup.raw#777777
markup.prompt#777777
markup.heading#AA3731
markup.boldbold
markup.traceback#660000
markup.underlineunderline
markup.quote#7A3E9D
markup.list#4B83CD
markup.bold, markup.italic#448C27
markup.inline.raw#AB6526
meta.diff.range, meta.diff.index, meta.separator#434343
meta.diff.header.from-file#434343
meta.diff.header.to-file#434343
Haokee Theme by haokee - VS Code Theme