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#0284c7
  • activityBar.background#ffffff
  • activityBar.border#cbd5e1
  • activityBar.foreground#0f172a
  • activityBar.inactiveForeground#94a3b8
  • activityBarBadge.background#0284c7
  • activityBarBadge.foreground#ffffff
  • badge.background#0284c7
  • badge.foreground#ffffff
  • breadcrumb.background#f9fafb
  • breadcrumb.focusForeground#0f172a
  • breadcrumb.foreground#94a3b8
  • breadcrumbPicker.background#f1f5f9
  • button.background#0284c7
  • button.foreground#ffffff
  • button.hoverBackground#0284c7
  • button.secondaryBackground#ffffff
  • button.secondaryForeground#0f172a
  • debugIcon.breakpointDisabledForeground#94a3b8
  • debugIcon.breakpointForeground#b91c1c
  • debugIcon.continueForeground#059669
  • debugIcon.disconnectForeground#b91c1c
  • debugIcon.pauseForeground#b45309
  • debugIcon.startForeground#059669
  • debugIcon.stopForeground#b91c1c
  • debugToolBar.background#ffffff
  • debugToolBar.border#cbd5e1
  • diffEditor.border#cbd5e1
  • diffEditor.insertedTextBackground#05966920
  • diffEditor.removedTextBackground#b91c1c20
  • dropdown.background#f1f5f9
  • dropdown.border#0284c780
  • dropdown.foreground#0f172a
  • editor.background#f9fafb
  • editor.findMatchBackground#0284c740
  • editor.findMatchBorder#0284c7
  • editor.findMatchHighlightBackground#0284c720
  • editor.findMatchHighlightBorder#0284c700
  • editor.findRangeHighlightBackground#0284c710
  • editor.findRangeHighlightBorder#0284c700
  • editor.foreground#0f172a
  • editor.selectionBackground#0284c740
  • editor.selectionHighlightBackground#0284c720
  • editor.selectionHighlightBorder#0284c780
  • editor.wordHighlightBackground#0284c730
  • editor.wordHighlightStrongBackground#0284c750
  • editorBracketHighlight.foreground1#0284c7
  • editorBracketHighlight.foreground2#059669
  • editorBracketHighlight.foreground3#b45309
  • editorBracketHighlight.foreground4#7e22ce
  • editorBracketHighlight.foreground5#0e7490
  • editorBracketHighlight.foreground6#94a3b8
  • editorBracketHighlight.unexpectedBracket.foreground#b91c1c
  • editorBracketMatch.background#0284c730
  • editorBracketMatch.border#0284c7
  • editorCodeLens.foreground#94a3b8
  • editorCursor.foreground#0284c7
  • editorError.border#b91c1c80
  • editorError.foreground#b91c1c
  • editorGroup.border#cbd5e1
  • editorGroupHeader.tabsBackground#ffffff
  • editorHint.foreground#94a3b8
  • editorHoverWidget.background#e2e8f0
  • editorHoverWidget.border#0284c780
  • editorHoverWidget.foreground#0f172a
  • editorIndentGuide.activeBackground1#0284c7
  • editorIndentGuide.background1#cbd5e1
  • editorInfo.foreground#0284c7
  • editorInlayHint.background#ffffff40
  • editorInlayHint.foreground#94a3b8
  • editorInlayHint.parameterForeground#94a3b8
  • editorInlayHint.typeForeground#94a3b8
  • editorLineNumber.activeForeground#0f172a
  • editorLineNumber.foreground#94a3b8
  • editorOverviewRuler.addedForeground#059669
  • editorOverviewRuler.border#cbd5e1
  • editorOverviewRuler.deletedForeground#b91c1c
  • editorOverviewRuler.modifiedForeground#b45309
  • editorRuler.foreground#cbd5e1
  • editorSuggestWidget.background#f1f5f9
  • editorSuggestWidget.border#0284c780
  • editorSuggestWidget.foreground#0f172a
  • editorSuggestWidget.highlightForeground#0284c7
  • editorSuggestWidget.selectedBackground#cbd5e1
  • editorWarning.border#b4530980
  • editorWarning.foreground#b45309
  • editorWhitespace.foreground#cbd5e1
  • editorWidget.background#f1f5f9
  • editorWidget.border#0284c780
  • editorWidget.foreground#0f172a
  • extensionButton.prominentBackground#0284c7
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#0284c7
  • gitDecoration.addedResourceForeground#059669
  • gitDecoration.conflictingResourceForeground#b45309
  • gitDecoration.deletedResourceForeground#b91c1c
  • gitDecoration.ignoredResourceForeground#94a3b8
  • gitDecoration.modifiedResourceForeground#b45309
  • gitDecoration.untrackedResourceForeground#94a3b8
  • input.background#f1f5f9
  • input.border#0284c780
  • input.foreground#0f172a
  • input.placeholderForeground#94a3b8
  • inputOption.activeBackground#0284c7
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#b91c1c
  • inputValidation.errorBorder#b91c1c
  • inputValidation.infoBackground#0284c7
  • inputValidation.infoBorder#0284c7
  • inputValidation.warningBackground#b45309
  • inputValidation.warningBorder#b45309
  • list.activeSelectionBackground#cbd5e1
  • list.activeSelectionForeground#0f172a
  • list.errorForeground#b91c1c
  • list.focusBackground#cbd5e1
  • list.focusForeground#0f172a
  • list.highlightForeground#0284c7
  • list.hoverBackground#f1f5f9
  • list.hoverForeground#0f172a
  • list.inactiveSelectionBackground#ffffff
  • list.inactiveSelectionForeground#94a3b8
  • list.warningForeground#b45309
  • menu.background#f1f5f9
  • menu.border#0284c780
  • menu.foreground#0f172a
  • menu.selectionBackground#0284c7
  • menu.selectionForeground#ffffff
  • notifications.background#f1f5f9
  • notifications.border#0284c780
  • notifications.foreground#0f172a
  • panel.background#f9fafb
  • panel.border#cbd5e1
  • panelTitle.activeBorder#0284c7
  • panelTitle.activeForeground#0f172a
  • panelTitle.inactiveForeground#94a3b8
  • pickerGroup.border#cbd5e1
  • pickerGroup.foreground#94a3b8
  • progressBar.background#0284c7
  • quickInput.background#f1f5f9
  • quickInput.foreground#0f172a
  • quickInputTitle.background#f9fafb
  • scrollbar.shadow#f9fafb
  • scrollbarSlider.activeBackground#0284c7
  • scrollbarSlider.background#0284c760
  • scrollbarSlider.hoverBackground#0284c780
  • sideBar.background#ffffff
  • sideBar.border#cbd5e1
  • sideBar.foreground#0f172a
  • sideBarSectionHeader.background#f9fafb
  • sideBarSectionHeader.foreground#0f172a
  • sideBarTitle.foreground#94a3b8
  • statusBar.background#f9fafb
  • statusBar.border#cbd5e1
  • statusBar.debuggingBackground#059669
  • statusBar.debuggingForeground#f9fafb
  • statusBar.foreground#475569
  • statusBar.noFolderBackground#f9fafb
  • statusBar.noFolderForeground#94a3b8
  • statusBarItem.activeBackground#0284c715
  • statusBarItem.hoverBackground#0284c710
  • statusBarItem.prominentBackground#ffffff
  • statusBarItem.prominentHoverBackground#f1f5f9
  • statusBarItem.remoteBackground#f9fafb
  • statusBarItem.remoteForeground#94a3b8
  • tab.activeBackground#f9fafb
  • tab.activeBorder#0284c7
  • tab.activeForeground#0f172a
  • tab.border#cbd5e1
  • tab.hoverBackground#f1f5f9
  • tab.hoverForeground#0f172a
  • tab.inactiveBackground#ffffff
  • tab.inactiveForeground#94a3b8
  • terminal.ansiBlack#0f172a
  • terminal.ansiBlue#0284c7
  • terminal.ansiBrightBlack#94a3b8
  • terminal.ansiBrightBlue#2563eb
  • terminal.ansiBrightCyan#22d3ee
  • terminal.ansiBrightGreen#34d399
  • terminal.ansiBrightMagenta#c084fc
  • terminal.ansiBrightRed#f87171
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fbbf24
  • terminal.ansiCyan#0e7490
  • terminal.ansiGreen#059669
  • terminal.ansiMagenta#7e22ce
  • terminal.ansiRed#b91c1c
  • terminal.ansiWhite#e2e8f0
  • terminal.ansiYellow#b45309
  • terminal.background#f9fafb
  • terminal.border#cbd5e1
  • terminal.foreground#0f172a
  • terminal.selectionBackground#0284c740
  • terminalCursor.foreground#0284c7
  • titleBar.activeBackground#ffffff
  • titleBar.activeForeground#0f172a
  • titleBar.border#cbd5e1
  • titleBar.inactiveBackground#ffffff
  • titleBar.inactiveForeground#94a3b8
  • tree.indentGuidesStroke#cbd5e1

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment.block.documentation entity.name.type, comment.block.documentation storage.type, constant.other.placeholder.go, constant.other.placeholder.rust, entity.name.function, entity.name.function.macro.rust, entity.name.function.support.builtin.go, entity.name.function.support.go, expression.embbeded.vue, meta.embedded, meta.function-call, meta.function-call entity.name.function, meta.function-call.generic.python, meta.function-call.python, meta.function-call.vue, meta.function.css variable, meta.macro.invocation.rust entity.name.function, meta.macro.rust entity.name.function, meta.method-call entity.name.function, meta.property-list.css variable, meta.property-name.css, punctuation.definition.expression.vue, punctuation.definition.placeholder.go, punctuation.definition.placeholder.rust, source.css variable, source.js.embedded, string.other.link.title.markdown, string.template meta.template.expression, support.constant.property-value.css, support.function, support.function.builtin.python, support.function.python, support.function.vue, support.macro.rust, support.type.property-name.css, variable.css, variable.function#0369a1—
entity.name.package.go, keyword.operator, meta.array.element, meta.brace, meta.chain entity.name.function, meta.function-call meta.function-call entity.name.function, meta.mapping.key.python, meta.method-call meta.method-call entity.name.function, meta.method-call meta.method-call meta.method-call entity.name.function, meta.object-literal.key, meta.object.key, meta.object.key meta.object.key, meta.object.key.js, meta.object.key.nested, meta.object.key.ts, meta.struct.field.go, punctuation, punctuation.accessor, punctuation.separator.dot, punctuation.separator.key-value, punctuation.separator.mapping.key-value, string.unquoted.key.python, string.unquoted.label, text.html.basic, text.html.derivative, text.html.vue text, variable.language.fenced.markdown, variable.other.destructuring, variable.other.member, variable.other.property, variable.other.property.go#475569—
meta.function.closure.rust variable.other, source.css.embedded.html, source.js.embedded.html, variable.other.binding.rust, variable.other.constant, variable.other.global, variable.other.local, variable.other.mutable.rust, variable.other.readwrite, variable.other.readwrite.global, variable.other.readwrite.local, variable.other.rust#0f172a—
entity.name.function.definition.rust, entity.name.function.go, entity.name.function.python, entity.name.function.rust, meta.function.call.rust entity.name.function, meta.function.closure.rust entity.name.function, meta.function.definition.rust entity.name.function, meta.function.go entity.name.function, meta.function.literal.go entity.name.function.go, meta.function.python entity.name.function, meta.function.rust entity.name.function#0369a1bold
comment.block.documentation keyword.other.documentation, entity.name.type.instance.jsdoc, entity.name.type.interface.go, keyword, storage.modifier, storage.type, storage.type.class.jsdoc, support.interface.go, support.self.rust, variable.language.self.rust#0284c7bold
markup.inserted, string, string.quoted.double, string.quoted.double.go meta.import.go, string.quoted.double.go meta.import.path.go, string.quoted.double.html, string.quoted.rune.go, string.quoted.single, string.quoted.single.html, text.html.vue string#059669—
entity.name.type.alias.go, entity.name.type.generic.rust, keyword.operator.channel.go, meta.generic.rust entity.name.type, meta.generic.rust support.type, source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json, storage.type.array.go, storage.type.map.go, storage.type.slice.go, string.regexp#0e7490—
comment.block.todo, comment.block.todo.rust, comment.line.double-slash.todo.rust, comment.line.todo, comment.todo, comment.xxx, constant.language.nil.go, constant.other.caps.rust, constant.other.rust#b45309bold
entity.name.label.go, entity.name.tag, invalid, invalid.illegal, markup.deleted, meta.tag.sgml, meta.tag.vue, text.html.vue entity.name.tag#b91c1c—
constant.language, constant.numeric, entity.name.type, markup.changed, support.class, support.constant, support.type#b45309—
entity.name.attribute.rust, entity.name.function.decorator.python, fenced_code.block.language.markdown, meta.attribute.rust, meta.decorator.python, punctuation.definition.attribute.rust, support.function.vue.lifecycle#7e22ceitalic
comment, markup.italic, punctuation.definition.comment, variable.other.parameter, variable.parameter#475569italic
entity.other.attribute-name, markup.raw.block, source.json meta.structure.dictionary.json support.type.property-name.json, text.html.vue entity.other.attribute-name#0284c7—
constant.other.blank.go, meta.function.rust variable.parameter, variable.parameter.receiver.go, variable.parameter.rust#475569italic
comment.hack, entity.other.attribute-name.html.vue, meta.directive.vue, punctuation.definition.directive.vue#7e22cebold
*link*, *uri*, *url*—underline
meta.object.key constant, meta.object.key constant.other, variable.other.global.go#0f172abold
comment.note, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#0369a1italic
entity.name.tag.doctype.html, meta.tag.sgml.html#cbd5e1—
entity.name.type.instance.jsdoc variable, variable.other.jsdoc#059669italic
punctuation.definition.block.tag.jsdoc, punctuation.definition.bracket.curly.jsdoc#94a3b8—
markdown.heading, markup.heading#059669bold
entity.name.lifetime.rust, punctuation.definition.lifetime.rust#0e7490italic
storage.type.pointer.go#0e7490underline
variable.other.err.go#b91c1citalic
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#7e22ce—
markup.bold#0f172abold
comment.fixme#b91c1cbold italic
comment.bug#b91c1cbold underline
Moongate Theme by yuelinghuashu - VS Code Theme