Skip to main content
CodingTheme

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.background#F3F3F3
  • activityBar.foreground#141414AD
  • activityBarBadge.background#206595
  • activityBarBadge.foreground#F3F3F3
  • badge.background#F3F3F3
  • badge.foreground#1414148D
  • breadcrumb.activeSelectionForeground#141414AD
  • breadcrumb.background#FCFCFC
  • breadcrumb.focusForeground#141414EB
  • breadcrumb.foreground#141414AD
  • breadcrumbPicker.background#F3F3F3
  • button.background#3C7CAB
  • button.foreground#FCFCFC
  • button.hoverBackground#055180
  • button.secondaryBackground#1414141E
  • button.secondaryForeground#141414EB
  • button.secondaryHoverBackground#14141430
  • chart.axis#14141413
  • chart.guide#141414AD
  • chart.line#14141413
  • charts.blue#6299C3
  • charts.foreground#141414AD
  • charts.green#55A583
  • charts.lines#141414AD
  • charts.orange#DB704B
  • charts.purple#9E94D5
  • charts.red#E75E78
  • charts.yellow#C08532
  • commandCenter.activeBackground#1414141E
  • commandCenter.activeBorder#1414141C
  • commandCenter.activeForeground#141414AD
  • commandCenter.background#14141411
  • commandCenter.border#14141413
  • commandCenter.debuggingBackground#1414141E
  • commandCenter.foreground#141414AD
  • commandCenter.inactiveBorder#14141413
  • commandCenter.inactiveForeground#1414147A
  • debugExceptionWidget.background#FCFCFC
  • debugExceptionWidget.border#F3F3F3
  • debugToolBar.background#F3F3F3
  • descriptionForeground#141414AD
  • diffEditor.insertedLineBackground#1F8A651F
  • diffEditor.insertedTextBackground#1F8A6524
  • diffEditor.removedLineBackground#CF2D5614
  • diffEditor.removedTextBackground#CF2D561F
  • diffEditor.unchangedCodeBackground#FCFCFC00
  • dropdown.background#FCFCFC
  • dropdown.border#14141413
  • dropdown.foreground#141414EB
  • editor.background#FCFCFC
  • editor.findMatchBackground#6F9BA65C
  • editor.findMatchHighlightBackground#6F9BA62E
  • editor.findRangeHighlightBackground#14141411
  • editor.foreground#141414EB
  • editor.hoverHighlightBackground#1414141E
  • editor.inactiveSelectionBackground#14141411
  • editor.lineHighlightBackground#EDEDED
  • editor.lineHighlightBorder#EDEDED
  • editor.rangeHighlightBackground#6F9BA629
  • editor.selectionBackground#1414141E
  • editor.selectionHighlightBackground#14141411
  • editor.snippetFinalTabstopHighlightBorder#1414141C
  • editor.snippetTabstopHighlightBackground#1414141E
  • editor.wordHighlightBackground#1414141E
  • editor.wordHighlightStrongBackground#1414140A
  • editorBracketHighlight.foreground1#055180
  • editorBracketHighlight.foreground2#3C7CAB
  • editorBracketHighlight.foreground3#6299C3
  • editorBracketHighlight.foreground4#A02673
  • editorBracketHighlight.foreground5#D06BA6
  • editorBracketHighlight.foreground6#DEA0C3
  • editorBracketHighlight.unexpectedBracket.foreground#CF2D56
  • editorBracketMatch.background#1414141E
  • editorBracketMatch.border#FCFCFC00
  • editorCodeLens.foreground#141414AD
  • editorCursor.foreground#141414EB
  • editorError.border#CF2D5600
  • editorError.foreground#CF2D56
  • editorGroup.border#14141413
  • editorGroup.dropBackground#14141411
  • editorGroup.emptyBackground#F3F3F3
  • editorGroupHeader.noTabsBackground#F3F3F3
  • editorGroupHeader.tabsBackground#F3F3F3
  • editorGroupHeader.tabsBorder#14141413
  • editorGutter.addedBackground#1F8A65
  • editorGutter.background#FCFCFC
  • editorGutter.deletedBackground#CF2D56
  • editorGutter.modifiedBackground#C08532
  • editorHoverWidget.background#FCFCFC
  • editorHoverWidget.border#1414141C
  • editorHoverWidget.foreground#141414EB
  • editorIndentGuide.activeBackground1#14141426
  • editorIndentGuide.background1#14141413
  • editorInlayHint.background#FCFCFC00
  • editorInlayHint.foreground#141414AD
  • editorInlayHint.parameterBackground#FCFCFC00
  • editorInlayHint.parameterForeground#1414147A
  • editorInlayHint.typeBackground#FCFCFC00
  • editorInlayHint.typeForeground#1414147A
  • editorLineNumber.activeForeground#141414AD
  • editorLineNumber.foreground#1414147A
  • editorLink.activeForeground#141414EB
  • editorMarkerNavigation.background#14141461
  • editorMarkerNavigationError.background#CF2D56C0
  • editorMarkerNavigationWarning.background#141414AD
  • editorOverviewRuler.border#FCFCFC00
  • editorRuler.foreground#14141426
  • editorStickyScroll.border#14141413
  • editorSuggestWidget.background#F3F3F3
  • editorSuggestWidget.border#14141413
  • editorSuggestWidget.foreground#141414AD
  • editorSuggestWidget.highlightForeground#141414EB
  • editorSuggestWidget.selectedBackground#14141411
  • editorUnnecessaryCode.opacity#0000007F
  • editorWarning.border#FCFCFC00
  • editorWarning.foreground#DB704B
  • editorWhitespace.foreground#1414145E
  • editorWidget.background#F3F3F3
  • editorWidget.foreground#141414AD
  • editorWidget.resizeBorder#14141426
  • errorForeground#CF2D56
  • extensionButton.prominentBackground#14141411
  • extensionButton.prominentForeground#FCFCFC
  • extensionButton.prominentHoverBackground#1414141E
  • focusBorder#14141426
  • foreground#141414EB
  • git.blame.editorDecorationForeground#141414AD
  • gitDecoration.addedResourceForeground#1F8A65
  • gitDecoration.deletedResourceForeground#CF2D56
  • gitDecoration.ignoredResourceForeground#1414147A
  • gitDecoration.modifiedResourceForeground#C08532
  • gitDecoration.untrackedResourceForeground#4C7F8C
  • gitlens.trailingLineForegroundColor#1414147A
  • icon.foreground#1414145E
  • input.background#FCFCFC
  • input.border#14141426
  • input.foreground#141414EB
  • input.placeholderForeground#1414147A
  • inputOption.activeBackground#1414141E
  • inputOption.activeBorder#14141400
  • inputValidation.errorBackground#FFD0D6
  • inputValidation.errorBorder#E75E78
  • inputValidation.errorForeground#CF2D56
  • inputValidation.infoBackground#D2E1E5
  • inputValidation.infoBorder#6F9BA6
  • inputValidation.infoForeground#4C7F8C
  • inputValidation.warningBackground#F0DAC1
  • inputValidation.warningBorder#C08532
  • inputValidation.warningForeground#A16900
  • list.activeSelectionBackground#14141411
  • list.activeSelectionForeground#141414EB
  • list.deemphasizedForeground#141414AD
  • list.dropBackground#14141411
  • list.errorForeground#CF2D56
  • list.focusBackground#1414141E
  • list.focusForeground#141414EB
  • list.highlightForeground#6F9BA6
  • list.hoverBackground#14141411
  • list.hoverForeground#141414EB
  • list.inactiveSelectionBackground#14141411
  • list.inactiveSelectionForeground#141414EB
  • list.invalidItemForeground#1414147A
  • list.warningForeground#C34A14
  • menu.background#F3F3F3
  • menu.foreground#141414AD
  • menu.separatorBackground#14141413
  • menubar.selectionBackground#14141411
  • merge.border#FCFCFC00
  • merge.currentContentBackground#9E94D55C
  • merge.currentHeaderBackground#9E94D57A
  • merge.incomingContentBackground#6F9BA65C
  • merge.incomingHeaderBackground#6F9BA67A
  • minimap.background#FCFCFC
  • minimap.errorHighlight#CF2D56
  • minimap.findMatchHighlight#6F9BA65C
  • minimap.foregroundOpacity#141414EB
  • minimap.selectionHighlight#14141411
  • minimap.selectionOccurrenceHighlight#14141411
  • minimap.warningHighlight#C08532
  • minimapGutter.addedBackground#96C2AC
  • minimapGutter.deletedBackground#EE9BA6
  • minimapGutter.modifiedBackground#C08532
  • minimapSlider.activeBackground#1414141E
  • minimapSlider.background#1414140A
  • minimapSlider.hoverBackground#14141411
  • notificationLink.foreground#6F9BA6
  • notifications.background#F3F3F3
  • notifications.border#14141413
  • notifications.foreground#141414EB
  • notificationsErrorIcon.foreground#CF2D56
  • notificationsInfoIcon.foreground#206595
  • notificationsWarningIcon.foreground#DB704B
  • panel.background#F3F3F3
  • panel.border#14141413
  • panelStickyScroll.border#14141413
  • panelTitle.activeBorder#0B0B2D00
  • panelTitle.activeForeground#141414EB
  • panelTitle.inactiveForeground#141414AD
  • peekView.border#1414141C
  • peekViewEditor.background#F3F3F3
  • peekViewEditor.matchHighlightBackground#6F9BA62E
  • peekViewEditorGutter.background#F3F3F3
  • peekViewResult.background#F3F3F3
  • peekViewResult.fileForeground#141414EB
  • peekViewResult.lineForeground#14141461
  • peekViewResult.matchHighlightBackground#6F9BA62E
  • peekViewResult.selectionBackground#F3F3F3
  • peekViewResult.selectionForeground#141414EB
  • peekViewTitle.background#F3F3F3
  • peekViewTitleDescription.foreground#141414AD
  • peekViewTitleLabel.foreground#141414EB
  • pickerGroup.border#1414141C
  • pickerGroup.foreground#141414EB
  • progressBar.background#1F8A65
  • sash.hoverBorder#1414141C
  • scrollbar.shadow#14141411
  • scrollbarSlider.activeBackground#14141430
  • scrollbarSlider.background#1414141E
  • scrollbarSlider.hoverBackground#14141430
  • selection.background#14141411
  • sideBar.background#F3F3F3
  • sideBar.border#14141413
  • sideBar.foreground#141414AD
  • sideBarSectionHeader.background#F3F3F3
  • sideBarSectionHeader.foreground#141414AD
  • sideBarStickyScroll.border#14141413
  • sideBarTitle.foreground#141414AD
  • statusBar.background#F3F3F3
  • statusBar.border#14141413
  • statusBar.debuggingBackground#F3F3F3
  • statusBar.debuggingForeground#1414147A
  • statusBar.foreground#1414147A
  • statusBar.noFolderBackground#F3F3F3
  • statusBar.noFolderForeground#1414147A
  • statusBarItem.activeBackground#1414141E
  • statusBarItem.hoverBackground#14141411
  • statusBarItem.prominentBackground#14141411
  • statusBarItem.prominentHoverBackground#1414141E
  • statusBarItem.remoteBackground#F3F3F3
  • statusBarItem.remoteForeground#141414AD
  • tab.activeBackground#FCFCFC
  • tab.activeBorder#FCFCFC
  • tab.activeBorderTop#FCFCFC00
  • tab.activeForeground#141414EB
  • tab.border#1414141C
  • tab.hoverBackground#14141411
  • tab.inactiveBackground#F3F3F3
  • tab.inactiveForeground#141414AD
  • tab.unfocusedActiveBorder#FCFCFC
  • tab.unfocusedActiveForeground#141414AD
  • tab.unfocusedHoverBackground#14141400
  • tab.unfocusedHoverBorder#14141413
  • tab.unfocusedInactiveForeground#141414AD
  • terminal.ansiBlack#141414EB
  • terminal.ansiBlue#3C7CAB
  • terminal.ansiBrightBlack#141414AD
  • terminal.ansiBrightBlue#6299C3
  • terminal.ansiBrightCyan#6F9BA6
  • terminal.ansiBrightGreen#55A583
  • terminal.ansiBrightMagenta#D06BA6
  • terminal.ansiBrightRed#E75E78
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#C08532
  • terminal.ansiCyan#4C7F8C
  • terminal.ansiGreen#1F8A65
  • terminal.ansiMagenta#B8448B
  • terminal.ansiRed#CF2D56
  • terminal.ansiWhite#FCFCFC
  • terminal.ansiYellow#A16900
  • terminal.background#F3F3F3
  • terminal.foreground#141414EB
  • terminal.selectionBackground#1414141E
  • terminalCursor.background#F3F3F3
  • terminalCursor.foreground#141414EB
  • terminalStickyScroll.border#14141413
  • textLink.activeForeground#3C7CAB
  • textLink.foreground#3C7CAB
  • textPreformat.foreground#6F9BA6
  • textSeparator.foreground#6F9BA6
  • titleBar.activeBackground#F3F3F3
  • titleBar.activeForeground#1414148D
  • titleBar.border#14141413
  • titleBar.inactiveBackground#F3F3F3
  • titleBar.inactiveForeground#1414145E
  • tree.inactiveIndentGuidesStroke#14141413
  • tree.indentGuidesStroke#14141426
  • walkThrough.embeddedEditorBackground#F3F3F3
  • widget.border#1414141C
  • widget.shadow#1414141E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#141414ADitalic
string, string punctuation.section.embedded source#9E94D5
punctuation.definition.string.begin,punctuation.definition.string.end#9E94D5
string variable#206595
punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded#141414AD
source.regexp, string.regexp#3C7CAB
string.regexp constant.character.escape#1F8A65
keyword.operator.quantifier.regexp, keyword.operator.negation.regexp, keyword.operator.alternation.regexp, keyword.operator.or.regexp, keyword.control.anchor.regexp#A33900
punctuation.definition.group.regexp, punctuation.definition.group.assertion.regexp, punctuation.definition.character-class.regexp, punctuation.character.set.begin.regexp, punctuation.character.set.end.regexp, support.other.parenthesis.regexp#DB704B
constant.other.placeholder, constant.character#B3003F
constant, entity.name.constant, variable.other.constant, variable.language#206595
constant.numeric#B8448B
support.constant#206595
variable.language#CF2D56
support.variable#206595
variable.other.readwrite#206595
keyword#B3003F
storage, storage.type#B3003F
keyword.control.directive#1F8A65
entity.name.function#DB704B
meta.require, support.function, variable.function#DB704B
keyword.other.special-method#6049B3
meta.export.default#DB704B
support.class, entity.name.type.class, entity.name.type.namespace, entity.name.type, entity.name.namespace#206595
entity.name.class#206595
keyword.operator.assignment, keyword.operator.assignment.compound, keyword.operator.assignment.c, keyword.operator.assignment.cpp, keyword.operator.assignment.go, keyword.operator.assignment.java, keyword.operator.assignment.js, keyword.operator.assignment.ts, keyword.operator.assignment.python#141414EB
keyword.operator.comparison, keyword.operator.relational, keyword.operator.comparison.c, keyword.operator.comparison.cpp, keyword.operator.comparison.java, keyword.operator.comparison.js, keyword.operator.comparison.ts, keyword.operator.comparison.python#B3003F
keyword.operator.arithmetic, keyword.operator.increment, keyword.operator.decrement, keyword.operator.arithmetic.c, keyword.operator.increment.c, keyword.operator.decrement.c, keyword.operator.arithmetic.cpp, keyword.operator.increment.cpp, keyword.operator.decrement.cpp, keyword.operator.arithmetic.go, keyword.operator.arithmetic.java, keyword.operator.arithmetic.js, keyword.operator.arithmetic.ts, keyword.operator.arithmetic.python#141414EB
keyword.operator.bitwise, keyword.operator.bitwise.shift, keyword.operator.bitwise.shift.c, keyword.operator.bitwise.shift.cpp, keyword.operator.bitwise.java, keyword.operator.bitwise.js, keyword.operator.bitwise.ts, keyword.operator.bitwise.python#B3003F
keyword.operator.logical, keyword.operator.logical.python, keyword.operator.logical.java, keyword.operator.logical.js, keyword.operator.logical.ts, keyword.operator.logical.c, keyword.operator.logical.cpp#B3003F
keyword.operator.new, keyword.operator.delete, keyword.operator.typeof, keyword.operator.instanceof, keyword.operator.in, keyword.operator.of, keyword.operator.sizeof, keyword.operator.address, keyword.operator.ternary, keyword.operator.optional, keyword.operator.expression.instanceof, keyword.operator.expression.typeof, keyword.operator.expression.delete, keyword.operator.expression.in, keyword.operator.expression.of, keyword.operator.expression.void, keyword.operator.expression.keyof, keyword.operator.sizeof.c, keyword.operator.sizeof.cpp, keyword.operator.address.go, keyword.operator.module, keyword.operator.instanceof.java, keyword.operator.less, keyword.operator.c, keyword.operator.cpp#206595
entity.name.tag, support.class.component#1F8A65
entity.name.tag.html#206595
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.definition.tag.begin.xml, punctuation.definition.tag.end.xml, punctuation.definition.tag#141414AD
entity.other.attribute-name#6049B3
entity.other.attribute-name.id#6049B3
entity.other.attribute-name.class.css#206595
support.type.property-name.css#9E94D5
meta.property-value.css#055180
meta.selector#6F9BA6
keyword.other.unit#D06BA6
constant.other.color#B8448B
punctuation.definition.constant.css#D06BA6
storage, storage.type#B3003F
support.module.node,support.type.object.module#B3003F
entity.name.type.module#B3003F
support.constant.json#DB704B
support.variable.property.process#DB704B
support.variable.dom,support.variable.property.dom#6049B3
support.type.type.flowtype#6049B3
support.type.primitive#B3003F
meta.property.object#6049B3
support.variable.property, variable.other.property, variable.other.property.ts, meta.definition.property.ts#6049B3
keyword.other.template.begin#9E94D5
keyword.other.template.end#9E94D5
keyword.other.substitution.begin#9E94D5
keyword.other.substitution.end#9E94D5
meta.function.decorator.python, punctuation.definition.decorator.python, entity.name.function.decorator.python#1F8A65
support.type.python#6F9BA6
string.quoted.binary.single.python#1F8A65
constant.other.ellipsis.python#141414EB
support.variable.magic.python#141414EB
punctuation.separator.period.python,punctuation.separator.element.python,punctuation.parenthesis.begin.python,punctuation.parenthesis.end.python#141414EB
variable.parameter.function.language.special.self.python#B8448B
variable.parameter.function.language.python#DB704B
variable.parameter.function.python#DB704B
punctuation.definition.arguments.begin.python,punctuation.definition.arguments.end.python,punctuation.separator.arguments.python,punctuation.definition.list.begin.python,punctuation.definition.list.end.python#141414EB
meta.function-call.generic.python#6049B3
constant.character.format.placeholder.other.python#DB704B
keyword.control.import.python,keyword.control.flow.pythonitalic
storage.type.c, storage.type.cpp, support.type.posix-reserved.c, support.type.posix-reserved.cpp#206595
constant.language.false.cpp, constant.language.true.cpp#6F9BA6
variable.language.this.cpp#6F9BA6
storage.modifier.reference, storage.modifier.pointer#141414EB
variable.c#141414EB
keyword.control.directive.include.cpp#1F8A65
punctuation.separator.c,punctuation.separator.cpp#6F9BA6
storage.modifier.package, storage.modifier.import, storage.type.java#141414EB
variable.parameter.java#141414EB
storage.modifier.import.java#B3003F
storage.type.annotation.java, storage.type.object.array.java#206595
source.java#141414EB
storage.modifier.import.java,storage.type.java,storage.type.generic.java#B3003F
storage.type.java#206595
support.type.property-name.json#1F8A65
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#9E94D5
markup.heading, markup.heading entity.name#206595
entity.name.section.markdown, punctuation.definition.heading.markdown, markup.heading.setext#141414EB
markup.quote#141414AD
markup.italicitalic
markup.boldbold
markup.underlineunderline
markup.strikethrough, punctuation.definition.strikethrough#1414147Astrikethrough
markup.inline.raw#1F8A65
markup.underline.link.markdown, markup.underline.link.image.markdown#141414AD
markup.heading punctuation.definition.heading, entity.name.section#141414AD
punctuation.definition.list.begin.markdown#141414AD
punctuation.definition.list.markdown#141414EB
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#141414EB
beginning.punctuation.definition.list.markdown#141414EB
markup.underline.link.markdown,markup.underline.link.image.markdown#206595
string.other.link.title.markdown,string.other.link.description.markdown#141414AD
punctuation.definition.bold, punctuation.definition.italic, punctuation.definition.underline#141414AD
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#B3003F
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#1F8A65
markup.changed, punctuation.definition.changed#DB704B
markup.ignored, markup.untracked#1414147A
meta.diff.range#6049B3
meta.diff.header#206595
entity.name.tag.template, entity.name.tag.script, entity.name.tag.style#6049B3
entity.name.package.go#B3003F
punctuation.definition.block.sequence.item.yaml#141414EB
constant.language.symbol.elixir#141414EB
invalid.broken, invalid.deprecated, invalid.illegal, invalid.unimplemented#B3003Fitalic
carriage-return#1414140Aitalic underline
message.error#B3003F
meta.module-reference#206595
constant.character.escape#141414AD
punctuation.section.embedded.begin,punctuation.section.embedded.end#6F9BA6
meta.separator#206595
meta.output#206595
constant.other.reference.link#206595
control.elements#DB704B
punctuation.definition.constant#DB704B
meta.tag#C08532
punctuation.separator.delimiter#141414EB
support.constant.edge#6F9BA6
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#141414AD
brackethighlighter.unmatched#B3003F

Shiki preview

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

Loading...

Cursor Midnight by Mohd Zaid - VS Code Theme