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.background#0E131B
  • activityBarBadge.background#8BE9FD
  • activityBarBadge.foreground#0E131B
  • badge.background#EBF85B
  • badge.foreground#0E131B
  • button.background#0E131B
  • debugConsole.errorForeground#FF3EAC
  • debugConsole.infoForeground#2FA4FF
  • debugConsole.warningForeground#FFD36E
  • debugConsoleInputIcon.foreground#C678DD
  • debugIcon.continueForeground#C678DD
  • debugIcon.pauseForeground#C678DD
  • debugIcon.restartForeground#FFD36E
  • debugIcon.stepBackForeground#C678DD
  • debugIcon.stepIntoForeground#C678DD
  • debugIcon.stepOutForeground#C678DD
  • debugIcon.stepOverForeground#C678DD
  • debugIcon.stopForeground#FF3EAC
  • debugToolBar.background#0E131B
  • debugToolBar.border#b38098
  • diffEditor.insertedTextBackground#00809B33
  • dropdown.background#131c2a
  • dropdown.border#181A1F
  • editor.background#0E131B
  • editor.findMatchBackground#f386bf55
  • editor.findMatchHighlightBackground#f386bf33
  • editor.foreground#c8d1df
  • editor.lineHighlightBackground#131c2a
  • editor.selectionBackground#2a3b5a
  • editor.selectionHighlightBackground#2a3b5a
  • editor.wordHighlightBackground#484e5b
  • editor.wordHighlightBorder#7f848e
  • editor.wordHighlightStrongBackground#abb2bf26
  • editor.wordHighlightStrongBorder#7f848e
  • editorBracketHighlight.foreground1#FA163F
  • editorBracketHighlight.foreground2#12CAD6
  • editorBracketHighlight.foreground3#F1FA3C
  • editorBracketHighlight.foreground4#2F89FC
  • editorBracketHighlight.foreground5#32FF6A
  • editorBracketHighlight.foreground6#EAEAEA
  • editorBracketMatch.background#131c2a
  • editorBracketMatch.border#6c8093c5
  • editorCursor.background#c8d1df
  • editorCursor.foreground#88abf9
  • editorError.foreground#e16ba0
  • editorGroup.border#181A1F
  • editorGroup.emptyBackground#0E131B
  • editorGroupHeader.tabsBackground#111722
  • editorGutter.addedBackground#0aad82
  • editorGutter.deletedBackground#FF3EAC
  • editorGutter.modifiedBackground#2FA4FF
  • editorHoverWidget.background#0E131B
  • editorHoverWidget.border#6c8093
  • editorIndentGuide.activeBackground#6c8093
  • editorIndentGuide.background#1e293e
  • editorLightBulb.foreground#88abf9
  • editorLightBulbAutoFix.foreground#e8c37d
  • editorLineNumber.activeForeground#a8b6cc
  • editorLineNumber.foreground#6c809370
  • editorMarkerNavigation.background#0E131B
  • editorOverviewRuler.border#1e293e
  • editorRuler.foreground#1e293e
  • editorSuggestWidget.background#0E131B
  • editorSuggestWidget.border#6c8093
  • editorSuggestWidget.foreground#a8b6cc
  • editorSuggestWidget.highlightForeground#88abf9
  • editorSuggestWidget.selectedBackground#1e293e
  • editorUnnecessaryCode.opacity#000000b2
  • editorWarning.foreground#e0c084d5
  • editorWhitespace.foreground#6c809370
  • editorWidget.background#0E131B
  • focusBorder#6c8093
  • gitDecoration.addedResourceForeground#88abf9d5
  • gitDecoration.conflictingResourceForeground#e16ba0
  • gitDecoration.deletedResourceForeground#88abf9d5
  • gitDecoration.ignoredResourceForeground#6c80939d
  • gitDecoration.modifiedResourceForeground#88abf9d5
  • gitDecoration.submoduleResourceForeground#6c8093
  • gitDecoration.untrackedResourceForeground#98c379
  • icon.foreground#6c8093
  • input.background#131c2a
  • list.activeSelectionBackground#1e293e
  • list.activeSelectionForeground#c8d1df
  • list.dropBackground#1e293e
  • list.errorForeground#ba7bcc
  • list.focusBackground#292d35
  • list.highlightForeground#C5C5C5
  • list.hoverBackground#111722
  • list.hoverForeground#c8d1df
  • list.inactiveSelectionBackground#131c2a
  • list.inactiveSelectionForeground#c8d1df
  • list.warningForeground#e8c37d
  • panel.border#1e293e
  • peekViewEditor.matchHighlightBackground#131c2a
  • problemsErrorIcon.foreground#FF3EAC
  • problemsInfoIcon.foreground#2FA4FF
  • problemsWarningIcon.foreground#FFD36E
  • sash.hoverBorder#2a3b5a
  • scrollbarSlider.activeBackground#2a3b5a
  • scrollbarSlider.background#1e293e
  • scrollbarSlider.hoverBackground#24324c
  • settings.checkboxBorder#c8d1df
  • settings.checkboxForeground#ba7bcc
  • settings.modifiedItemIndicator#88abf9
  • sideBar.background#0b1212
  • sideBar.border#1e293e
  • sideBar.foreground#6c8093
  • sideBarSectionHeader.background#131c2a
  • statusBar.background#0b1212
  • statusBar.debuggingBackground#0FF5B8
  • statusBar.debuggingBorder#0E131B
  • statusBar.debuggingForeground#0E131B
  • statusBar.foreground#ABB2BF
  • statusBar.noFolderBackground#0E131B
  • statusBarItem.hoverBackground#5c6e6c
  • tab.activeBackground#0E131B
  • tab.activeBorderTop#88abf9
  • tab.activeForeground#c8d1df
  • tab.border#0E131B
  • tab.inactiveBackground#131c2a
  • tab.inactiveForeground#6c8093
  • terminal.ansiBlack#0E131B
  • terminal.ansiBlue#7ecec6
  • terminal.ansiGreen#98c379
  • terminal.ansiYellow#e8c37d
  • terminal.background#0E131B
  • terminal.foreground#ba7bcc
  • textBlockQuote.background#131c2a
  • titleBar.activeBackground#0E131B
  • titleBar.activeForeground#c8d1df
  • titleBar.inactiveBackground#0E131B
  • titleBar.inactiveForeground#6B717D

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
support.function.idl-procedure-method#ff79c6bold
entity.name.function.idl-method#f1fa8cbold
support.function.idl-procedure, entity.name.procedure.idlbold
support.function.idl-function, entity.name.function.idlbold
parameter.definition.keyword.idl, parameter.usage.keyword.idlbold
constant.language.idlbold
keyword.control.idlbold
comment.line.semicolon.idl#2fa4ff
string.quoted.single.idl, string.quoted.double.idl#50fa7b
constant.numeric.idlbold
entity.name.tag.idlitalic
entity.name.type.idlbold
comment, comment.block#2fa4ff
variable.other.readwrite.ts.idl, variable.parameter.idl#C8D1DF
comment markup.link#5C6370
entity.name.type#ffd36e
entity.other.inherited-class#50FA7B
keyword#C678DD
keyword.control#8be9fd
keyword.operator#0FF5B8
keyword.other.special-method#61AFEF
keyword.other.unit#fff56d
storage#C678DD
storage.type.annotation, storage.type.primitive#C678DD
storage.modifier.package, storage.modifier.import#ABB2BF
constant#fff56d
constant.variable#FF9A3B
constant.character.escape#8BE9FDbold
constant.numeric#7FFF00
constant.other.color#94DAFF
constant.other.symbol#94DAFF
variable#0ff5b8
variable.interpolation#BE5046
variable.parameter#ABB2BF
string#50FA7B
string.regexp#94DAFF
string.regexp source.ruby.embedded#ffd36e
string.other.link#0ff5b8
punctuation.definition.comment#2fa4ff
punctuation.definition.method-parameters, punctuation.definition.function-parameters, punctuation.definition.parameters, punctuation.definition.separator, punctuation.definition.seperator, punctuation.definition.array#ABB2BF
punctuation.definition.heading, punctuation.definition.identity#61AFEF
punctuation.definition.bold#ffd36ebold
punctuation.definition.italic#C678DDitalic
punctuation.section.embedded#BE5046
punctuation.section.method, punctuation.section.class, punctuation.section.inner-class#ABB2BF
support.class#ffd36e
support.type#94DAFF
support.function#ff3eac
support.function.any-method#ebf85b
entity.name.function#ebf85b
entity.name.class, entity.name.type.class#ffd36e
entity.name.section#61AFEF
entity.name.tag#FF3EAC
entity.other.attribute-name#0FF5B8
entity.other.attribute-name.id#61AFEF
meta.class#ffd36e
meta.class.body#ABB2BF
meta.method-call, meta.method#ABB2BF
meta.definition.variable#0ff5b8
meta.link#fff56d
meta.require#61AFEF
meta.selector#C678DD
meta.separator#ABB2BF
meta.tag#ABB2BF
underline
none#ABB2BF
invalid.deprecated#523D14
invalid.illegalwhite
markup.bold#fff56dbold
markup.changed#C678DD
markup.deleted#0ff5b8
markup.italic#C678DDitalic
markup.heading#0ff5b8
markup.heading punctuation.definition.heading#61AFEF
markup.link#C678DD
markup.inserted#50FA7B
markup.quote#fff56d
markup.raw#50FA7B
source.c keyword.operator#C678DD
source.cpp keyword.operator#C678DD
source.cs keyword.operator#C678DD
source.css property-name, source.css property-value#828997
source.css property-name.support, source.css property-value.support#ABB2BF
source.gfm markup
source.gfm link entity#61AFEF
source.go storage.type.string#C678DD
source.ini keyword.other.definition.ini#0ff5b8
source.java storage.modifier.import#ffd36e
source.java storage.type#ffd36e
source.java keyword.operator.instanceof#C678DD
source.java-properties meta.key-pair#0ff5b8
source.java-properties meta.key-pair > punctuation#ABB2BF
source.js keyword.operator#94DAFF
source.js keyword.operator.delete, source.js keyword.operator.in, source.js keyword.operator.of, source.js keyword.operator.instanceof, source.js keyword.operator.new, source.js keyword.operator.typeof, source.js keyword.operator.void#C678DD
source.json meta.structure.dictionary.json > string.quoted.json#0ff5b8
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#0ff5b8
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#50FA7B
source.json meta.structure.dictionary.json > constant.language.json, source.json meta.structure.array.json > constant.language.json#94DAFF
source.ruby constant.other.symbol > punctuationinherit
source.python keyword.operator.logical.python#C678DD
source.python variable.parameter#fff56d
meta.attribute.rust#BCC199
storage.modifier.lifetime.rust, entity.name.lifetime.rust#33E8EC
keyword.unsafe.rust#CC6B73
customrule#ABB2BF
support.type.property-name#FF3EAC
string.quoted.double punctuation#50FA7B
support.constant#fff56d
support.type.property-name.json#FF3EAC
support.type.property-name.json punctuation#FF3EAC
punctuation.separator.key-value.ts, punctuation.separator.key-value.js, punctuation.separator.key-value.tsx#94DAFF
source.js.embedded.html keyword.operator, source.ts.embedded.html keyword.operator#94DAFF
variable.other.readwrite.js, variable.other.readwrite.ts, variable.other.readwrite.tsx#ABB2BF
support.variable.dom.js, support.variable.dom.ts#0ff5b8
support.variable.property.dom.js, support.variable.property.dom.ts#0ff5b8
meta.template.expression.js punctuation.definition, meta.template.expression.ts punctuation.definition#BE5046
source.ts punctuation.definition.typeparameters, source.js punctuation.definition.typeparameters, source.tsx punctuation.definition.typeparameters#ABB2BF
source.ts punctuation.definition.block, source.js punctuation.definition.block, source.tsx punctuation.definition.block#ABB2BF
source.ts punctuation.separator.comma, source.js punctuation.separator.comma, source.tsx punctuation.separator.comma#ABB2BF
support.variable.property.js, support.variable.property.ts, support.variable.property.tsx#0ff5b8
keyword.control.default.js, keyword.control.default.ts, keyword.control.default.tsx#0ff5b8
keyword.operator.expression.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#C678DD
keyword.operator.expression.of.js, keyword.operator.expression.of.ts, keyword.operator.expression.of.tsx#C678DD
meta.brace.round.js, meta.array-binding-pattern-variable.js, meta.brace.square.js, meta.brace.round.ts, meta.array-binding-pattern-variable.ts, meta.brace.square.ts, meta.brace.round.tsx, meta.array-binding-pattern-variable.tsx, meta.brace.square.tsx#ABB2BF
source.js punctuation.accessor, source.ts punctuation.accessor, source.tsx punctuation.accessor#ABB2BF
punctuation.terminator.statement.js, punctuation.terminator.statement.ts, punctuation.terminator.statement.tsx#ABB2BF
meta.array-binding-pattern-variable.js variable.other.readwrite.js, meta.array-binding-pattern-variable.ts variable.other.readwrite.ts, meta.array-binding-pattern-variable.tsx variable.other.readwrite.tsx#fff56d
source.js support.variable, source.ts support.variable, source.tsx support.variable#0ff5b8
variable.other.constant.property.js, variable.other.constant.property.ts, variable.other.constant.property.tsx#fff56d
keyword.operator.new.ts, keyword.operator.new.j, keyword.operator.new.tsx#C678DD
source.ts keyword.operator, source.tsx keyword.operator#94DAFF
punctuation.separator.parameter.js, punctuation.separator.parameter.ts, punctuation.separator.parameter.tsx #ABB2BF
constant.language.import-export-all.js, constant.language.import-export-all.ts#0ff5b8
constant.language.import-export-all.jsx, constant.language.import-export-all.tsx#94DAFF
keyword.control.as.js, keyword.control.as.ts, keyword.control.as.jsx, keyword.control.as.tsx#ABB2BF
variable.other.readwrite.alias.js, variable.other.readwrite.alias.ts, variable.other.readwrite.alias.jsx, variable.other.readwrite.alias.tsx#0ff5b8
variable.other.constant.js, variable.other.constant.ts, variable.other.constant.jsx, variable.other.constant.tsx#fff56d
meta.export.default.js variable.other.readwrite.js, meta.export.default.ts variable.other.readwrite.ts#0ff5b8
source.js meta.template.expression.js punctuation.accessor, source.ts meta.template.expression.ts punctuation.accessor, source.tsx meta.template.expression.tsx punctuation.accessor#50FA7B
source.js meta.import-equals.external.js keyword.operator, source.jsx meta.import-equals.external.jsx keyword.operator, source.ts meta.import-equals.external.ts keyword.operator, source.tsx meta.import-equals.external.tsx keyword.operator#ABB2BF
entity.name.type.module.js,entity.name.type.module.ts,entity.name.type.module.jsx,entity.name.type.module.tsx#50FA7B
meta.class.js,meta.class.ts,meta.class.jsx,meta.class.tsx#ABB2BF
meta.definition.property.js variable, meta.definition.property.ts variable, meta.definition.property.jsx variable, meta.definition.property.tsx variable#ABB2BF
meta.type.parameters.js support.type, meta.type.parameters.jsx support.type, meta.type.parameters.ts support.type, meta.type.parameters.tsx support.type#ABB2BF
source.js meta.tag.js keyword.operator, source.jsx meta.tag.jsx keyword.operator, source.ts meta.tag.ts keyword.operator, source.tsx meta.tag.tsx keyword.operator#ABB2BF
meta.tag.js punctuation.section.embedded, meta.tag.jsx punctuation.section.embedded, meta.tag.ts punctuation.section.embedded, meta.tag.tsx punctuation.section.embedded#ABB2BF
meta.array.literal.js variable, meta.array.literal.jsx variable, meta.array.literal.ts variable, meta.array.literal.tsx variable#ffd36e
support.type.object.module.js, support.type.object.module.jsx, support.type.object.module.ts, support.type.object.module.tsx#0ff5b8
constant.language.json#94DAFF
variable.other.constant.object.js, variable.other.constant.object.jsx, variable.other.constant.object.ts, variable.other.constant.object.tsx#fff56d
storage.type.property.js, storage.type.property.jsx, storage.type.property.ts, storage.type.property.tsx#94DAFF
meta.template.expression.js string.quoted punctuation.definition, meta.template.expression.jsx string.quoted punctuation.definition, meta.template.expression.ts string.quoted punctuation.definition, meta.template.expression.tsx string.quoted punctuation.definition#50FA7B
meta.template.expression.js string.template punctuation.definition.string.template, meta.template.expression.jsx string.template punctuation.definition.string.template, meta.template.expression.ts string.template punctuation.definition.string.template, meta.template.expression.tsx string.template punctuation.definition.string.template#50FA7B
keyword.operator.expression.in.js, keyword.operator.expression.in.jsx, keyword.operator.expression.in.ts, keyword.operator.expression.in.tsx#C678DD
source.python constant.other#ABB2BF
source.python constant#fff56d
constant.character.format.placeholder.other.python storage#fff56d
support.variable.magic.python#0ff5b8
meta.function.parameters.python#fff56d
punctuation.separator.annotation.python#ABB2BF
punctuation.separator.parameters.python#ABB2BF
entity.name.variable.field.cs#0ff5b8
source.cs keyword.operator#ABB2BF
variable.other.readwrite.cs#ABB2BF
variable.other.object.cs#ABB2BF
variable.other.object.property.cs#ABB2BF
entity.name.variable.property.cs#61AFEF
storage.type.cs#ffd36e
keyword.other.unsafe.rust#0ff5b8
markup.raw.block.markdown#ABB2BF
punctuation.definition.variable.shell#0ff5b8
support.constant.property-value.css#ABB2BF
punctuation.definition.constant.css#fff56d
punctuation.separator.key-value.scss#0ff5b8
punctuation.definition.constant.scss#fff56d
meta.property-list.scss punctuation.separator.key-value.scss#ABB2BF
storage.type.primitive.array.java#ffd36e
entity.name.section.markdown#0ff5b8
punctuation.definition.heading.markdown#0ff5b8
markup.heading.setext#ABB2BF
punctuation.definition.bold.markdown#fff56d
markup.inline.raw.markdown#50FA7B
beginning.punctuation.definition.list.markdown#0ff5b8
markup.quote.markdown#5C6370italic
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, punctuation.definition.metadata.markdown#ABB2BF
punctuation.definition.metadata.markdown#C678DD
markup.underline.link.markdown, markup.underline.link.image.markdown#C678DD
string.other.link.title.markdown, string.other.link.description.markdown#61AFEF
punctuation.separator.variable.ruby#0ff5b8
variable.other.constant.ruby#fff56d
keyword.operator.other.ruby#50FA7B
punctuation.definition.variable.php#0ff5b8
meta.class.php#ABB2BF
IDL for VSCode by NV5 Geospatial Software - VS Code Theme