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#3b82f6
  • activityBar.background#131c31
  • activityBar.border#2d3748
  • activityBar.foreground#e2e8f0
  • activityBar.inactiveForeground#94a3b8
  • activityBarBadge.background#3b82f6
  • activityBarBadge.foreground#ffffff
  • badge.background#3b82f6
  • badge.foreground#ffffff
  • breadcrumb.background#0f172a
  • breadcrumb.focusForeground#e2e8f0
  • breadcrumb.foreground#94a3b8
  • breadcrumbPicker.background#1e293b
  • button.background#3b82f6
  • button.foreground#ffffff
  • button.hoverBackground#2563eb
  • button.secondaryBackground#131c31
  • button.secondaryForeground#e2e8f0
  • debugIcon.breakpointDisabledForeground#94a3b8
  • debugIcon.breakpointForeground#f87171
  • debugIcon.continueForeground#34d399
  • debugIcon.disconnectForeground#f87171
  • debugIcon.pauseForeground#fbbf24
  • debugIcon.startForeground#34d399
  • debugIcon.stopForeground#f87171
  • debugToolBar.background#131c31
  • debugToolBar.border#2d3748
  • diffEditor.border#2d3748
  • diffEditor.insertedTextBackground#34d39920
  • diffEditor.removedTextBackground#f8717120
  • dropdown.background#1e293b
  • dropdown.border#3b82f640
  • dropdown.foreground#e2e8f0
  • editor.background#0f172a
  • editor.findMatchBackground#3b82f640
  • editor.findMatchBorder#3b82f6
  • editor.findMatchHighlightBackground#3b82f620
  • editor.findMatchHighlightBorder#3b82f600
  • editor.findRangeHighlightBackground#3b82f610
  • editor.findRangeHighlightBorder#3b82f600
  • editor.foreground#e2e8f0
  • editor.selectionBackground#3b82f640
  • editor.selectionHighlightBackground#3b82f620
  • editor.selectionHighlightBorder#3b82f680
  • editor.wordHighlightBackground#3b82f630
  • editor.wordHighlightStrongBackground#3b82f650
  • editorBracketHighlight.foreground1#7dd3fc
  • editorBracketHighlight.foreground2#34d399
  • editorBracketHighlight.foreground3#fbbf24
  • editorBracketHighlight.foreground4#c084fc
  • editorBracketHighlight.foreground5#3b82f6
  • editorBracketHighlight.foreground6#94a3b8
  • editorBracketHighlight.unexpectedBracket.foreground#f87171
  • editorBracketMatch.background#3b82f630
  • editorBracketMatch.border#3b82f6
  • editorCodeLens.foreground#94a3b8
  • editorCursor.foreground#3b82f6
  • editorError.border#f8717180
  • editorError.foreground#f87171
  • editorGroup.border#2d3748
  • editorGroupHeader.tabsBackground#131c31
  • editorHint.foreground#94a3b8
  • editorHoverWidget.background#252e40
  • editorHoverWidget.border#3b82f640
  • editorHoverWidget.foreground#e2e8f0
  • editorIndentGuide.activeBackground1#3b82f6
  • editorIndentGuide.background1#2d3748
  • editorInfo.foreground#3b82f6
  • editorInlayHint.background#131c3140
  • editorInlayHint.foreground#94a3b8
  • editorInlayHint.parameterForeground#94a3b8
  • editorInlayHint.typeForeground#94a3b8
  • editorLineNumber.activeForeground#e2e8f0
  • editorLineNumber.foreground#94a3b8
  • editorOverviewRuler.addedForeground#34d399
  • editorOverviewRuler.border#2d3748
  • editorOverviewRuler.deletedForeground#f87171
  • editorOverviewRuler.modifiedForeground#fbbf24
  • editorRuler.foreground#2d3748
  • editorSuggestWidget.background#1e293b
  • editorSuggestWidget.border#3b82f640
  • editorSuggestWidget.foreground#e2e8f0
  • editorSuggestWidget.highlightForeground#3b82f6
  • editorSuggestWidget.selectedBackground#2563eb
  • editorWarning.border#fbbf2480
  • editorWarning.foreground#fbbf24
  • editorWhitespace.foreground#2d3748
  • editorWidget.background#1e293b
  • editorWidget.border#3b82f640
  • editorWidget.foreground#e2e8f0
  • extensionButton.prominentBackground#3b82f6
  • extensionButton.prominentForeground#ffffff
  • extensionButton.prominentHoverBackground#2563eb
  • gitDecoration.addedResourceForeground#34d399
  • gitDecoration.conflictingResourceForeground#fbbf24
  • gitDecoration.deletedResourceForeground#f87171
  • gitDecoration.ignoredResourceForeground#2d3748
  • gitDecoration.modifiedResourceForeground#fbbf24
  • gitDecoration.untrackedResourceForeground#94a3b8
  • input.background#1e293b
  • input.border#3b82f640
  • input.foreground#e2e8f0
  • input.placeholderForeground#94a3b8
  • inputOption.activeBackground#3b82f6
  • inputOption.activeForeground#ffffff
  • inputValidation.errorBackground#f87171
  • inputValidation.errorBorder#f87171
  • inputValidation.infoBackground#3b82f6
  • inputValidation.infoBorder#3b82f6
  • inputValidation.warningBackground#fbbf24
  • inputValidation.warningBorder#fbbf24
  • list.activeSelectionBackground#2563eb
  • list.activeSelectionForeground#e2e8f0
  • list.errorForeground#f87171
  • list.focusBackground#2563eb
  • list.focusForeground#e2e8f0
  • list.highlightForeground#3b82f6
  • list.hoverBackground#252e40
  • list.hoverForeground#e2e8f0
  • list.inactiveSelectionBackground#131c31
  • list.inactiveSelectionForeground#94a3b8
  • list.warningForeground#fbbf24
  • menu.background#1e293b
  • menu.border#3b82f640
  • menu.foreground#e2e8f0
  • menu.selectionBackground#3b82f6
  • menu.selectionForeground#ffffff
  • notifications.background#1e293b
  • notifications.border#3b82f640
  • notifications.foreground#e2e8f0
  • panel.background#0f172a
  • panel.border#2d3748
  • panelTitle.activeBorder#3b82f6
  • panelTitle.activeForeground#e2e8f0
  • panelTitle.inactiveForeground#94a3b8
  • pickerGroup.border#2d3748
  • pickerGroup.foreground#94a3b8
  • progressBar.background#3b82f6
  • quickInput.background#1e293b
  • quickInput.foreground#e2e8f0
  • quickInputTitle.background#0f172a
  • scrollbar.shadow#0f172a
  • scrollbarSlider.activeBackground#3b82f6
  • scrollbarSlider.background#3b82f660
  • scrollbarSlider.hoverBackground#3b82f680
  • sideBar.background#131c31
  • sideBar.border#2d3748
  • sideBar.foreground#e2e8f0
  • sideBarSectionHeader.background#0f172a
  • sideBarSectionHeader.foreground#e2e8f0
  • sideBarTitle.foreground#94a3b8
  • statusBar.background#0f172a
  • statusBar.border#2d3748
  • statusBar.debuggingBackground#34d399
  • statusBar.debuggingForeground#0f172a
  • statusBar.foreground#cbd5e1
  • statusBar.noFolderBackground#0f172a
  • statusBar.noFolderForeground#94a3b8
  • statusBarItem.activeBackground#3b82f620
  • statusBarItem.hoverBackground#3b82f610
  • statusBarItem.prominentBackground#131c31
  • statusBarItem.prominentHoverBackground#252e40
  • statusBarItem.remoteBackground#0f172a
  • statusBarItem.remoteForeground#94a3b8
  • tab.activeBackground#0f172a
  • tab.activeBorder#3b82f6
  • tab.activeForeground#e2e8f0
  • tab.border#2d3748
  • tab.hoverBackground#252e40
  • tab.hoverForeground#e2e8f0
  • tab.inactiveBackground#131c31
  • tab.inactiveForeground#94a3b8
  • terminal.ansiBlack#1e293b
  • terminal.ansiBlue#3b82f6
  • terminal.ansiBrightBlack#2d3748
  • terminal.ansiBrightBlue#3b82f6
  • terminal.ansiBrightCyan#22d3ee
  • terminal.ansiBrightGreen#34d399
  • terminal.ansiBrightMagenta#c084fc
  • terminal.ansiBrightRed#f87171
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fbbf24
  • terminal.ansiCyan#22d3ee
  • terminal.ansiGreen#34d399
  • terminal.ansiMagenta#c084fc
  • terminal.ansiRed#f87171
  • terminal.ansiWhite#e2e8f0
  • terminal.ansiYellow#fbbf24
  • terminal.background#0f172a
  • terminal.border#2d3748
  • terminal.foreground#e2e8f0
  • terminal.selectionBackground#3b82f640
  • terminalCursor.foreground#3b82f6
  • titleBar.activeBackground#131c31
  • titleBar.activeForeground#e2e8f0
  • titleBar.border#2d3748
  • titleBar.inactiveBackground#131c31
  • titleBar.inactiveForeground#94a3b8
  • tree.indentGuidesStroke#2d3748

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, expression.embbeded.vue, meta.embedded, meta.function-call entity.name.function, meta.function-call.vue, meta.function.css variable, 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.vue, support.type.property-name.css, variable.css#7dd3fc—
entity.name.package.go, meta.array.element, 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.object-literal.key, meta.object.key, meta.object.key.js, meta.object.key.ts, string.unquoted.key.python, string.unquoted.label, text.html.basic, text.html.derivative, text.html.vue text, variable.other.destructuring#cbd5e1—
entity.name.function, entity.name.function.macro.rust, entity.name.function.support.builtin.go, entity.name.function.support.go, meta.function-call, meta.function-call.generic.python, meta.function-call.python, meta.macro.invocation.rust entity.name.function, meta.macro.rust entity.name.function, support.function, support.function.builtin.python, support.function.python, support.macro.rust, variable.function#87cefa—
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#e2e8f0—
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#87cefabold
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#3b82f6bold
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#34d399—
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#22d3ee—
meta.method-call meta.method-call meta.method-call entity.name.function, meta.object.key meta.object.key, meta.object.key.nested, meta.struct.field.go, punctuation.definition.block.tag.jsdoc, punctuation.definition.bracket.curly.jsdoc, variable.language.fenced.markdown, variable.other.member, variable.other.property, variable.other.property.go#94a3b8—
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#fbbf24bold
entity.name.label.go, entity.name.tag, invalid, invalid.illegal, markup.deleted, meta.tag.sgml, meta.tag.vue, text.html.vue entity.name.tag#f87171—
keyword.operator, meta.brace, punctuation, punctuation.accessor, punctuation.separator.dot, punctuation.separator.key-value, punctuation.separator.mapping.key-value#475569—
constant.language, constant.numeric, entity.name.type, markup.changed, support.class, support.constant, support.type#fbbf24—
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#c084fcitalic
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#3b82f6—
comment.hack, entity.other.attribute-name.html.vue, meta.directive.vue, punctuation.definition.directive.vue#c084fcbold
*link*, *uri*, *url*—underline
markup.italic, variable.other.parameter, variable.parameter#cbd5e1italic
meta.object.key constant, meta.object.key constant.other, variable.other.global.go#e2e8f0bold
comment.note, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css#7dd3fcitalic
meta.function.rust variable.parameter, variable.parameter.receiver.go, variable.parameter.rust#cbd5e1italic
comment, punctuation.definition.comment#a5b4cbitalic
entity.name.tag.doctype.html, meta.tag.sgml.html#2d3748—
entity.name.type.instance.jsdoc variable, variable.other.jsdoc#34d399italic
markdown.heading, markup.heading#34d399bold
entity.name.lifetime.rust, punctuation.definition.lifetime.rust#22d3eeitalic
storage.type.pointer.go#22d3eeunderline
variable.other.err.go#f87171italic
constant.other.blank.go#94a3b8italic
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#c084fc—
markup.bold#e2e8f0bold
comment.fixme#f87171bold italic
comment.bug#f87171bold underline
Moongate Theme by yuelinghuashu - VS Code Theme