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#101e2c
  • activityBar.dropBackground#1e4667
  • activityBar.foreground#7ba5cf
  • activityBar.inactiveForeground#305a84
  • activityBarBadge.background#9cd9ff
  • activityBarBadge.foreground#101e2c
  • badge.background#9cd9ff
  • badge.foreground#101e2c
  • breadcrumb.activeSelectionForeground#9cd9ff
  • breadcrumb.focusForeground#9cd9ff
  • breadcrumb.foreground#64b4Fa
  • breadcrumbPicker.background#14283c
  • button.background#14283c
  • button.foreground#ffffff
  • debugExceptionWidget.background#101e2c
  • debugExceptionWidget.border#1b324a
  • debugToolBar.background#14283c
  • descriptionForeground#bdd2e7
  • diffEditor.insertedTextBackground#14332e
  • diffEditor.removedTextBackground#1e131c
  • dropdown.background#14283c
  • dropdown.border#14283c
  • dropdown.foreground#bdd2e7
  • dropdown.listBackground#14283c
  • editor.background#101e2c
  • editor.findMatchBackground#305a84
  • editor.findMatchHighlightBackground#1b324a
  • editor.foreground#bdd2e7
  • editor.hoverHighlightBackground#1b324a
  • editor.inactiveSelectionBackground#1e4667
  • editor.lineHighlightBackground#14283c
  • editor.rangeHighlightBackground#1e4667
  • editor.rangeHighlightForeground#bdd2e7
  • editor.selectionBackground#1e4667
  • editor.selectionForeground#bdd2e7
  • editor.selectionHighlightBackground#1b324a
  • editor.wordHighlightBackground#1b324a
  • editor.wordHighlightStrongBackground#1b324a
  • editorBracketMatch.background#14283c
  • editorBracketMatch.border#5f82a5
  • editorCodeLens.foreground#9cd9ff
  • editorError.foreground#f05050
  • editorGroup.border#1b324a
  • editorGroup.dropBackground#15466540
  • editorGroupHeader.tabsBackground#101e2c
  • editorGroupHeader.tabsBorder#1b324a
  • editorGutter.addedBackground#6eb450
  • editorGutter.background#101e2c
  • editorGutter.deletedBackground#f05050
  • editorGutter.modifiedBackground#ffc828
  • editorHoverWidget.background#14283c
  • editorHoverWidget.border#1b324a
  • editorIndentGuide.activeBackground#305a84
  • editorIndentGuide.background#1b324a
  • editorLineNumber.activeForeground#7ba5cd
  • editorLineNumber.foreground#1e4667
  • editorMarkerNavigation.background#14283c
  • editorMarkerNavigationError.background#f05050
  • editorMarkerNavigationInfo.background#64b4fa
  • editorMarkerNavigationWarning.background#ffc828
  • editorOverviewRuler.addedForeground#a1d884
  • editorOverviewRuler.bracketMatchForeground#1e4667
  • editorOverviewRuler.commonContentForeground#ff50ff
  • editorOverviewRuler.currentContentForeground#ff50ff
  • editorOverviewRuler.deletedForeground#f05050
  • editorOverviewRuler.errorForeground#f05050
  • editorOverviewRuler.findMatchForeground#1b324a
  • editorOverviewRuler.incomingContentForeground#ff50ff
  • editorOverviewRuler.infoForeground#64b4fa
  • editorOverviewRuler.modifiedForeground#ffe39c
  • editorOverviewRuler.rangeHighlightForeground#305a84
  • editorOverviewRuler.selectionHighlightForeground#1e4667
  • editorOverviewRuler.warningForeground#ffC828
  • editorOverviewRuler.wordHighlightForeground#5f82a5
  • editorOverviewRuler.wordHighlightStrongForeground#5f82a5
  • editorRuler.foreground#101e2c
  • editorSuggestWidget.background#14283c
  • editorSuggestWidget.border#1b324a
  • editorSuggestWidget.foreground#7ba5cf
  • editorSuggestWidget.highlightForeground#bdd2e7
  • editorSuggestWidget.selectedBackground#1b324a
  • editorWarning.foreground#ffc828
  • editorWhitespace.foreground#1b324a
  • editorWidget.background#1b324a
  • editorWidget.border#1e4667
  • editorWidget.resizeBorder#9cd9ff
  • errorForeground#f05050
  • extensionButton.prominentBackground#14283c
  • extensionButton.prominentForeground#ffffff
  • focusBorder#101e2c
  • foreground#bdd2e7
  • gitDecoration.addedResourceForeground#a1d884
  • gitDecoration.conflictingResourceForeground#f05050
  • gitDecoration.deletedResourceForeground#d88282
  • gitDecoration.ignoredResourceForeground#223f5c
  • gitDecoration.modifiedResourceForeground#ffe39c
  • gitDecoration.untrackedResourceForeground#a1d884
  • input.background#101e2c
  • input.border#1b324a
  • input.foreground#bdd2e7
  • input.placeholderForeground#305A84
  • inputOption.activeBorder#7ba5cf
  • inputValidation.errorBackground#392020
  • inputValidation.errorBorder#f05050
  • inputValidation.infoBackground#284864
  • inputValidation.infoBorder#64b4Fa
  • inputValidation.warningBackground#665010
  • inputValidation.warningBorder#ffc828
  • list.activeSelectionBackground#1e4667
  • list.activeSelectionForeground#bdd2e7
  • list.dropBackground#15466540
  • list.errorForeground#f05050
  • list.focusBackground#14283c
  • list.focusForeground#7ba5cf
  • list.highlightForeground#7ba5cf
  • list.hoverBackground#14283c
  • list.hoverForeground#7ba5cf
  • list.inactiveSelectionBackground#1b324a
  • list.inactiveSelectionForeground#bdd2e7
  • list.invalidItemForeground#960096
  • list.warningForeground#ffe39C
  • menu.background#14283c
  • menu.foreground#7ba5cf
  • menu.selectionBackground#1b324a
  • menu.selectionForeground#bdd2e7
  • menu.separatorBackground#1b324a
  • menubar.selectionBackground#1b324a
  • menubar.selectionForeground#bdd2e7
  • merge.commonContentBackground#ffe39c50
  • merge.currentHeaderBackground#a1d88450
  • merge.incomingHeaderBackground#9cd9ff50
  • notificationCenter.border#1B324A
  • notificationCenterHeader.background#14283c
  • notificationCenterHeader.foreground#7ba5cf
  • notifications.background#101e2c
  • notifications.border#1b324a
  • notifications.foreground#bdd2e7
  • notificationToast.border#1b324a
  • panel.background#101e2c
  • panel.border#1b324a
  • panelTitle.activeForeground#bdd2e7
  • panelTitle.inactiveForeground#5f82a5
  • peekView.border#9cd9ff
  • peekViewEditor.background#101e2c
  • peekViewEditor.matchHighlightBackground#1e4667
  • peekViewResult.background#14283c
  • peekViewResult.fileForeground#bdd2e7
  • peekViewResult.lineForeground#bdd2e7
  • peekViewResult.matchHighlightBackground#1e4667
  • peekViewResult.selectionBackground#1b324a
  • peekViewResult.selectionForeground#bdd2e7
  • peekViewTitle.background#14283c
  • peekViewTitleDescription.foreground#bdd2e7
  • peekViewTitleLabel.foreground#bdd2e7
  • pickerGroup.border#1b324a
  • pickerGroup.foreground#bdd2e7
  • scrollbarSlider.activeBackground#305a8450
  • scrollbarSlider.background#305a8450
  • scrollbarSlider.hoverBackground#305a8480
  • selection.background#64b4fa
  • sideBar.background#101e2c
  • sideBar.border#1b324a
  • sideBar.foreground#7ba5cf
  • sideBarSectionHeader.background#101e2c
  • sideBarSectionHeader.foreground#7ba5cf
  • sideBarTitle.foreground#7ba5cf
  • statusBar.background#101e2c
  • statusBar.border#1b324a
  • statusBar.debuggingBackground#ffc828
  • statusBar.debuggingBorder#ffc828
  • statusBar.debuggingForeground#101e2c
  • statusBar.foreground#7ba5cf
  • statusBar.noFolderBackground#101e2c
  • statusBarItem.activeBackground#14283c
  • statusBarItem.hoverBackground#1b324a
  • statusBarItem.prominentBackground#305a84
  • statusBarItem.prominentForeground#bdd2e7
  • statusBarItem.prominentHoverBackground#305a84
  • tab.activeBackground#14283c
  • tab.activeForeground#bdd2e7
  • tab.border#1b324a
  • tab.inactiveBackground#101e2c
  • tab.inactiveForeground#bdd2e7
  • tab.unfocusedActiveBorder#1b324a
  • tab.unfocusedActiveForeground#bdd2e7
  • tab.unfocusedInactiveForeground#bdd2e7
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#00b1ff
  • terminal.ansiBrightBlack#5f82a5
  • terminal.ansiBrightBlue#00b1ff
  • terminal.ansiBrightCyan#00dcdc
  • terminal.ansiBrightGreen#aae682
  • terminal.ansiBrightMagenta#ff50ff
  • terminal.ansiBrightRed#ff7878
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffdc96
  • terminal.ansiCyan#00dcdc
  • terminal.ansiGreen#aae682
  • terminal.ansiMagenta#ff50ff
  • terminal.ansiRed#ff7878
  • terminal.ansiWhite#bdd2e7
  • terminal.ansiYellow#ffdc96
  • textBlockQuote.background#14283c
  • textBlockQuote.border#5f82a5
  • textCodeBlock.background#14283c
  • textLink.activeForeground#007cb3
  • textLink.foreground#00b1ff
  • textPreformat.foreground#bdd2e7
  • textSeparator.foreground#14283c
  • titleBar.activeBackground#101e2c
  • titleBar.activeForeground#7ba5cf
  • titleBar.inactiveBackground#101e2c
  • titleBar.inactiveForeground#305a84
  • walkThrough.embeddedEditorBackground#101e2c
  • welcomePage.buttonBackground#14283c
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#bdd2e7
keyword.operator.assignment, keyword.operator.comparison, keyword.operator.expression.in, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.relational, keyword.operator.type, keyword.operator, keyword, meta.brace, meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.sass variable.sass, meta.property-list.scss variable.scss, punctuation.definintion.string, punctuation, source.css, storage.type, string.quoted, variable.other.readwrite.jsnormal
markup.changed, meta.diff.header.from-file, meta.diff.header.git, meta.diff.header.to-file#9cd9ffitalic
markup.deleted.diff#f05050italic
markup.inserted.diff#a1d884italic
variable.language#00b1ff
constant.character.escape#aae682
meta.tag, punctuation.definition.tag#bdd2e7
entity.other.attribute-name#9696ffitalic
entity.other.attribute-name.class.pug#ffdc96italic
support.variable.property#00dcdc
invalid.deprecated#f05050
constant.character.control.regexp, constant.character.escape.backslash.regexp, constant.other.character-class.set.regexp, string.regexp keyword.other, string.regexp punctuation.definition.string, string.regexp#dbd4ba
constant.other.color#bdd2e7
italicitalic
bold#aae682bold
quote#aae682italic
invalid#FFFFFF
entity.name.type.class, support.class, support.type, support.variable#9696ff
support.constant, support.function#9696ffitalic
variable.other.object.property#bdd2e7italic
variable.instance, variable.other.instance, variable.other.property, variable.other.readwrite.instance, variable.readwrite.instance#ffb482
support.constant.math#ff7878
meta.method.declaration storage.type.js, meta.method.declaration, punctuation.definition.block.tag, storage.type#00b1ffitalic
storage.type.interface#00b1ff
meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx, storage#00b1ffitalic
entity.name.tag.custom#dc8Cff
meta.delimiter.period#dc8Cffitalic
meta.selector#dc8Cffitalic
entity.name.tag.doctype, meta.tag.sgml.doctype#dc8Cffitalic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#dc8Cffnormal
keyword.control.loop#dc8Cff
keyword.control#9696ff
variable.parameter.function#00dcdcnormal
meta.function-callitalic
meta.property-name#00dcdc
keyword.control.operator#00dcdc
entity.name.function, entity.name.type.class.cpp, entity.name.type.inherited.cpp, entity.other.inherited-class.js, meta.class entity.name.type.class.js, meta.class entity.name.type.class.tsx#00dcdc
keyword.other.debugger, keyword.other.new, keyword.other.special-method, support.constant#00dcdc
meta.object-literal.key, meta.var.expr#bdd2e7normal
variable#ffdc96normal
punctuation.definition.constant, variable.other.constant, constant.language#ffdc96
constant.character, constant.other#ffdc96
entity.name.class, meta.class entity.name.type.class#ffdc96
entity.other.inherited-class#ffdc96
string#aae682
string.quoted.single.js, variable.other.readwrite.js, string.quoted#aae682
string.template punctuation.definition.string#aae682
punctuation.definition.string#aae682
meta.property-list.css.sass, punctuation.accessor, punctuation.accessor, punctuation.separator, punctuation#bdd2e7
meta.array, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, punctuation.terminator.expression#bdd2e7
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.definition.list, punctuation.separator.arguments#bdd2e7
meta.link.inline.markdown punctuation.definition.string, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.string.markdown#bdd2e7
meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block, meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block#bdd2e7
punctuation.definition.parameters, meta.brace, punctuation.definition#bdd2e7
punctuation.definition.template-expression#ff7878
keyword.operator#ff7878normal
keyword.operator.expression#ff7878
keyword.operator.assignment#ff7878
keyword.operator.arithmetic#ff7878
keyword.operator.bitwise#ff7878
keyword.operator.decrement, keyword.operator.increment#ff7878
keyword.operator.ternary#ff7878
keyword.operator.logical#dc8Cffnormal
keyword.operator.comparison#dc8Cff
keyword.operator.relational#dc8Cffitalic
comment, comment.block.documentation punctuation.definition.bracket.curly#647882italic
comment.line.double-slash, punctuation.definition.comment, punctuation.whitespace.comment, string.comment.buffered.block.pug#647882
comment.block.documentation entity.name.type.instance.jsdoc, comment.block.documentation entity.name.type.instance.phpdoc#9696ff80
comment.block.documentation variable.other.jsdoc, comment.block.documentation variable.other.phpdoc#ffdc9680
comment.block.documentation punctuation.definition.block.tag.jsdoc, comment.block.documentation storage.type.class.jsdoc#00b1ff80
constant.character.numeric, constant.numeric#ffb482normal
constant.language.null, constant.language.undefined#ff7878
constant.language.boolean#ff7878
entity.name.type#ffdc96
variable.parameter.sass, variable.parameter.scss, variable.sass, variable.scss#ffdc96
entity.other.attribute-name.id.css punctuation.definition.entity.css, entity.other.attribute-name.id.css.sass, entity.other.attribute-name.id.css, entity.other.attribute-name.id.scss, entity.other.attribute-name.id#00b1ff
source.sass entity.name.function, support.function.name.sass.library#00b1ff
entity.other.attribute-name.class.css punctuation.definition.entity.css, entity.other.attribute-name.class.css.sass, entity.other.attribute-name.class.css, entity.other.attribute-name.class.scss#ffdc96
entity.name.tag.css.sass, entity.name.tag.css, entity.name.tag.custom.css, entity.name.tag.less, entity.name.tag.reference.scss#ff7878normal
entity.other.attribute-name.pseudo-class.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-class.css, entity.other.attribute-name.pseudo-element.css punctuation.definition.entity.css, entity.other.attribute-name.pseudo-element.css, entity.other.pseudo-class.css.sass#dc8Cffnormal
support.type.property-name.css, support.type.property-name.css.sass#00dcdc
support.constant.property-value.css#ffb482
constant.numeric.css.sass, constant.numeric.css, keyword.other.unit.css.sass, keyword.other.unit.css, keyword.other.unit.scss, keyword.other.unit, punctuation.definition.constant.css#ffb482
meta.property-list entity.name.tag, support.constant.vendor.property-value, support.type.property-name, support.type.vendor.property-name#9696ffnormal
keyword.other.important.css, keyword.other.important.scss#ff7878italic
meta.at-rule.keyframes.body.css, source.css.scss meta.at-rule.keyframes.scss entity.other.attribute-name.scss#dc8Cffitalic
entity.name.tag.custom.css, entity.name.tag.custom.sass, entity.name.tag.custom.scss, entity.name.tag.reference, keyword.control.at-rule.css.sass, keyword.control.at-rule, keyword.control.interpolation.sass, keyword.operator.css.sass, keyword.other.reserved.sass, punctuation.definition.keyword, support.function.sass#9696ffitalic
punctuation.separator.key-value.css.sass, punctuation.separator.key-value.css, punctuation.separator.key-value.less, punctuation.separator.key-value.scss#bdd2e7
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.sass, entity.name.tag.wildcard.scss#00dcdc
entity.other.attribute-name.css.sass, entity.other.attribute-selector.sass, keyword.operator.attribute-selector.css.sass, meta.attribute-selector.css entity.other.attribute-name, meta.attribute-selector.css keyword.operator.pattern.css, meta.attribute-selector.css punctuation.definition.entity.begin.bracket.square.css, meta.attribute-selector.css punctuation.definition.entity.end.bracket.square.css, meta.attribute-selector.css, meta.attribute-selector.less entity.other.attribute-name.attribute, meta.attribute-selector.scss keyword.operator.scss, meta.attribute-selector.scss punctuation.definition.attribute-selector.begin.bracket.square.scss, meta.attribute-selector.scss punctuation.definition.attribute-selector.end.bracket.square.scss, meta.attribute-selector.scss punctuation.definition.string.begin.scss, meta.attribute-selector.scss punctuation.definition.string.end.scss, meta.attribute-selector.scss, meta.attribute-selector, source.css.scss entity.other.attribute-name.attribute#aae682
punctuation.definition.interpolation.begin.bracket.curly.scss, punctuation.definition.interpolation.end.bracket.curly.scss, support.function.interpolation.sass#ff7878
entity.other.inherited-class.js, meta.class entity.name.type.class.js, meta.class entity.name.type.class.tsxunderline
support.variable.property.js#9696ffitalic
storage.type.function.arrow.jsnormal
variable.language.this.js#ff7878
meta.object.member.js meta.object-literal.key.js, variable.other.property.js#bdd2e7
meta.export.js variable.other, meta.import.js variable.other, variable.other.meta.export.js, variable.other.meta.import.js#ffdc96
meta.function-call.js entity.name.function.jsitalic
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#bdd2e7
variable.object.property.ts, variable.object.property.tsx, variable.other.object.ts, variable.other.object.tsx, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.ts, variable.other.tsx, variable.ts, variable.tsx#ffdc96
entity.name.type.ts, entity.name.type.tsx#ffdc96
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#7ba5cf
variable.other.readwrite.js, variable.parameter#ffdc96
support.class.component.js, support.class.component.tsx#ff7878normal
punctuation.decorator.js#00dcdc
meta.jsx.children.js, meta.jsx.children.tsx, meta.jsx.children#bdd2e7
punctuation.section.embedded#bdd2e7
entity.name.type.tsx, entity.name.type.module.tsx#9696ffnormal
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#00b1ff
variable.object.property.js, variable.object.property.jsx, variable.other.object.js, variable.other.object.jsx#ffdc96
variable.js, variable.other.js#ffdc96
entity.name.type.js, entity.name.type.module.js#9696ffnormal
support.class.js#ffdc96
keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx#9696ffitalic
entity.name.tag.js, entity.name.tag.tsx, entity.name.tag, entity.name.tag, meta.tag.html, meta.tag.js, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, meta.tag.tsx#ff7878normal
punctuation.definition.tag.html, punctuation.separator.key-value.html#bdd2e7
support.type.property-name.json#ffdc96
support.constant.json#ff7878
meta.structure.dictionary.value.json string.quoted.double#aae682
string.quoted.double.json punctuation.definition.string.json#aae682
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#ff7878
constant.language.python#ff7878
variable.parameter.function.python, meta.function-call.arguments.python#9696ffitalic
meta.function-call.python, meta.function-call.generic.python#00dcdcitalic
punctuation.python#bdd2e7
entity.name.function.decorator.python#ff7878
source.python variable.language.special#ffdc96
variable.assignment.coffee#ffdc96
variable.parameter.function.coffee#00dcdc
meta.arguments.coffee, variable.parameter.function.coffee#ffdc96
variable.other.readwrite.cs#ffdc96
entity.name.type.class.cs, storage.type.cs#9696ff
entity.name.type.namespace.cs#ffdc96
source.elixir meta.module.elixir entity.name.class.elixir, source.elixir support.type.elixir#9696ff
source.elixir entity.name.function#00dcdc
source.elixir constant.other.keywords.elixir, source.elixir constant.other.symbol.elixir#9696ff
source.elixir punctuation.definition.string#aae682
source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir, source.elixir variable.other.readwrite.module.elixir#aae682
source.elixir .punctuation.binary.elixir#dc8Cffitalic
markup.heading.markdown#9696ffbold
markup.italic.markdown#ffb482italic
markup.bold.markdown#ffb482bold
markup.quote.markdown#aae682italic
markup.underline.link.image.markdown, markup.underline.link.markdown#ffdc96
string.other.link.description.markdown, string.other.link.title.markdown#ffdc96
punctuation.definition.metadata.markdown#bdd2e7
beginning.punctuation.definition.list.markdown#aae682
markup.inline.raw.string.markdown#aae682
source.go keyword.channel.go, source.go keyword.const.go, source.go keyword.control.go, source.go keyword.function.go, source.go keyword.import.go, source.go keyword.interface.go, source.go keyword.map.go, source.go keyword.package.go, source.go keyword.struct.go, source.go keyword.type.go, source.go keyword.var.go#dc8Cffitalic
source.go constant.language.go, source.go constant.other.placeholder.go#ff7878
punctuation.section.embedded.begin.php, punctuation.section.embedded.end.php#ff7878
keyword.other.namespace.php, keyword.other.use-as.php, keyword.other.use.php, storage.modifier.php#9696ff
entity.name.type.namespace.php punctuation.separator.inheritance.php, entity.name.type.namespace.php, meta.use.php punctuation.separator.inheritance.php, meta.use.php#ffb482
entity.other.alias.php, punctuation.definition.variable.php, support.class.php, variable.other.php, variable.other.property.php#ffdc96
meta.function-call.php punctuation#bdd2e7italic
keyword.blade#9696ff
keyword.control.directive.include.cpp punctuation.definition.directive.cpp#9696ff

Shiki preview

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

Loading...

Night Howl by Matia - VS Code Theme