Skip to main content
CodingTheme

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#0a0435
  • activityBar.border#00000000
  • activityBar.dropBackground#3dd8ff55
  • activityBar.foreground#3dd8ff55
  • activityBarBadge.background#3dd8ff
  • activityBarBadge.foreground#0a0435
  • badge.background#3dd8ff
  • badge.foreground#0a0435
  • button.background#3dd8ff
  • button.foreground#0a0435
  • button.hoverBackground#f293ff
  • contrastBorder#0a0435
  • debugExceptionWidget.background#0a0435
  • debugExceptionWidget.border#f293ff
  • debugToolBar.background#0a0435
  • diffEditor.insertedTextBackground#5bffa544
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#ff8dc644
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#0a0435
  • dropdown.border#00000000
  • dropdown.foreground#f3f7ff
  • editor.background#0a0435
  • editor.findMatchHighlightBackground#5bffa544
  • editor.findRangeHighlightBackground#f3f7ff22
  • editor.foreground#f3f7ff
  • editor.hoverHighlightBackground#f3f7ff11
  • editor.inactiveSelectionBackground#f3f7ff11
  • editor.lineHighlightBackground#f3f7ff11
  • editor.lineHighlightBorder#00000000
  • editor.rangeHighlightBackground#f3f7ff22
  • editor.selectionBackground#27224e
  • editor.selectionHighlightBackground#f3f7ff0a
  • editor.wordHighlightBackground#27224e
  • editor.wordHighlightStrongBackground#1b1644
  • editorCursor.foreground#7f7e9a
  • editorError.foreground#ff8dc6
  • editorGroupHeader.tabsBackground#0a0435
  • editorGroupHeader.tabsBorder#0a0435
  • editorGutter.addedBackground#5bffa544
  • editorGutter.deletedBackground#ff8dc644
  • editorGutter.modifiedBackground#3dd8ff44
  • editorHoverWidget.background#1b1644
  • editorHoverWidget.border#3dd8ff
  • editorIndentGuide.activeBackground#504d72
  • editorIndentGuide.background#27224e
  • editorLineNumber.foreground#7f7e9a
  • editorMarkerNavigation.background#0a0435
  • editorMarkerNavigationError.background#ff8dc6
  • editorMarkerNavigationWarning.background#ff8dc6
  • editorOverviewRuler.commonContentForeground#f293ff
  • editorOverviewRuler.currentContentForeground#f293ff
  • editorOverviewRuler.incomingContentForeground#f293ff
  • editorRuler.foreground#7f7e9a
  • editorSuggestWidget.background#1b1644
  • editorSuggestWidget.border#504d72
  • editorSuggestWidget.foreground#f3f7ff
  • editorWarning.foreground#ff8dc6
  • editorWidget.background#0a0435
  • errorForeground#ff8dc6
  • extensionButton.prominentBackground#f293ff
  • extensionButton.prominentForeground#0a0435
  • extensionButton.prominentHoverBackground#f293ff
  • focusBorder#00000000
  • foreground#f3f7ff
  • gitDecoration.conflictingResourceForeground#ff8dc6
  • gitDecoration.ignoredResourceForeground#7f7e9a
  • gitDecoration.modifiedResourceForeground#3dd8ff
  • gitDecoration.untrackedResourceForeground#5bffa5
  • input.background#1b1644
  • input.border#3dd8ff44
  • input.foreground#f3f7ff
  • input.placeholderForeground#7f7e9a
  • inputOption.activeBorder#f3f7ff
  • inputValidation.errorBackground#ff8dc6
  • inputValidation.errorBorder#ff8dc6
  • inputValidation.infoBackground#f293ff
  • inputValidation.infoBorder#f293ff
  • inputValidation.warningBackground#ff8dc644
  • inputValidation.warningBorder#ff8dc644
  • list.activeSelectionBackground#27224e
  • list.activeSelectionForeground#f3f7ff
  • list.errorForeground#ff8dc6
  • list.focusBackground#39355d
  • list.focusForeground#f3f7ff
  • list.highlightForeground#f3f7ff
  • list.hoverBackground#1b1644
  • list.hoverForeground#f3f7ff
  • list.inactiveFocusBackground#27224e
  • list.inactiveSelectionBackground#27224e
  • list.inactiveSelectionForeground#f3f7ff
  • list.invalidItemForeground#ff8dc6
  • list.warningForeground#ff8dc6
  • merge.currentHeaderBackground#f293ff
  • merge.incomingHeaderBackground#f293ff
  • panel.background#0a0435
  • panel.border#27224e
  • panelTitle.activeBorder#3dd8ff
  • panelTitle.activeForeground#f3f7ff
  • panelTitle.inactiveForeground#7f7e9a
  • peekView.border#f293ff
  • peekViewEditor.matchHighlightBackground#5bffa544
  • peekViewResult.fileForeground#f3f7ff
  • peekViewResult.lineForeground#f3f7ff
  • peekViewResult.matchHighlightBackground#5bffa544
  • peekViewResult.selectionForeground#f3f7ff
  • peekViewTitle.background#0a0435
  • peekViewTitleLabel.foreground#f3f7ff
  • pickerGroup.foreground#f293ff
  • progressBar.background#f293ff
  • scrollbarSlider.activeBackground#27224e
  • scrollbarSlider.background#39355d
  • scrollbarSlider.hoverBackground#27224e
  • settings.checkboxBackground#27224e
  • settings.checkboxBorder#00000000
  • settings.checkboxForeground#f3f7ff
  • settings.dropdownBackground#27224e
  • settings.dropdownBorder#00000000
  • settings.inactiveSelectedItemBorder#3dd8ff
  • settings.modifiedItemForeground#3dd8ff
  • settings.numberInputBackground#27224e
  • settings.numberInputBorder#00000000
  • settings.textInputBackground#27224e
  • settings.textInputBorder#00000000
  • sideBar.background#130d3d
  • sideBar.border#00000000
  • sideBar.foreground#f3f7ff
  • sideBarSectionHeader.background#0a0435
  • sideBarSectionHeader.foreground#7f7e9a
  • sideBarTitle.foreground#f3f7ff
  • statusBar.background#0a0435
  • statusBar.border#0a0435
  • statusBar.debuggingBackground#ff8dc644
  • statusBar.foreground#f3f7ff88
  • statusBar.noFolderBackground#0a0435
  • tab.activeBackground#27224e
  • tab.activeBorder#3dd8ff
  • tab.activeForeground#f3f7ff
  • tab.border#0a0435
  • tab.inactiveBackground#1b1644
  • tab.inactiveForeground#7f7e9a
  • tab.unfocusedActiveBorder#0a0435
  • terminal.ansiBlack#adaec2
  • terminal.ansiBrightBlack#adaec2
  • terminal.ansiBrightBlue#f293ff
  • terminal.ansiBrightCyan#f293ff
  • terminal.ansiBrightGreen#5bffa5
  • terminal.ansiBrightMagenta#5bffa5
  • terminal.ansiBrightRed#ff8dc6
  • terminal.ansiBrightWhite#f3f7ff
  • terminal.ansiBrightYellow#3dd8ff
  • terminal.ansiCyan#f293ff
  • terminal.ansiGreen#5bffa5
  • terminal.ansiMagenta#7284ff
  • terminal.ansiRed#ff8dc6
  • terminal.ansiWhite#f3f7ff
  • terminal.ansiYellow#3dd8ff
  • textLink.activeForeground#7284ff
  • titleBar.activeBackground#0a0435
  • titleBar.activeForeground#7f7e9a
  • titleBar.inactiveForeground#7f7e9a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#f3f7ff
comment#504d72
comment.block#7f7e9a
string, string.quoted#f293ff
string.regexp, string.regexp keyword.other, punctuation.definition.template-expression#3dd8ff
string.template meta.template.expression, string.template.js#7284ff
constant.language.boolean#7284ff
support.constant.math#3dd8ff
constant.language, punctuation.definition.constant, variable.other.constant, source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#adaec2
constant.character, constant.other#3dd8ff
support.constant, keyword.other.special-method, keyword.other.new#7284ff
support.constant.json#3dd8ff
constant.character.escape#f293ff
constant.numeric, constant.character.numeric#3dd8ff
variable#3dd8ff
punctuation.accessor, keyword#adaec2
keyword.other.unit#5bffa5
keyword.operator#5bffa5
storage#5bffa5
constant.language.null#7f7e9a
storage.type, meta.var.expr storage.type, meta.class meta.method.declaration meta.var.expr storage.type.js#7284ff
entity.name.class, meta.class entity.name.type.class#3dd8ff
entity.other.inherited-class#f293ff
entity.name.function#3dd8ff
variable.parameter#f293ff
punctuation.definition.tag, meta.tag#f3f7ff
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#f3f7ff
variable.other.jsdoc, variable.other.phpdoc#f293ff
support.class.component, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, meta.tag.js, meta.tag.tsx, meta.tag.html#5bffa5
meta.tag.structure.body entity.name.tag, meta.tag.structure.head entity.name.tag, meta.tag.structure.html entity.name.tag, meta.tag.metadata.style entity.name.tag, meta.tag.structure.html punctuation.definition.tag, meta.tag.structure.head punctuation.definition.tag, meta.tag.structure.body punctuation.definition.tag, meta.tag.metadata.style punctuation.definition.tagbold
entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, punctuation.definition.tag#f293ff
meta.tag.metadata.script entity.name.tag, meta.tag.metadata.script punctuation.definition.tag#7284ff
punctuation.definition.tag.html#7284ff
entity.other.attribute-name#3dd8ff
meta.attribute string.quoted#7284ff
entity.other.attribute-name.id.html, meta.attribute.id.html entity.other.attribute-name, meta.attribute.name.html entity.other.attribute-name, meta.attribute.href.html entity.other.attribute-name, meta.attribute.src.html entity.other.attribute-name#5bffa5
entity.name.tag.custom#3dd8ff
constant.character.entity.named#7284ff
meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, meta.tag.metadata.doctype.html entity.name.tag.html, meta.tag.metadata.doctype.html entity.other.attribute-name.html, meta.tag.metadata.doctype.html punctuation.definition.tag#5bffa599italic
support.constant#f293ff
support.constant.meta.property-value#7284ff
support.type, support.class#3dd8ff
support.variable.dom#3dd8ff
keyword.operator.relational#5bffa5
keyword.operator.assignment#5bffa5
meta.brace#f3f7ff
meta.delimiter.period#5bffa5
object.comma#f3f7ff
variable.parameter.function#7284ff
support.type.vendored.property-name, support.constant.vendored.property-value, support.type.property-name, meta.property-list entity.name.tag#f293ff
meta.property-list entity.name.tag.reference#7284ff
constant.other.color.rgb-value punctuation.definition.constant, constant.other.color.rgb-value.hex.css#7284ff
constant.other.color#5bffa5
meta.selector#5bffa5
entity.other.attribute-name.id#f293ff
meta.property-name#f293ff
punctuation.definition.parameters#f3f7ff
keyword.control.operator#7284ff
keyword.operator.logical#5bffa5
variable.instance, variable.other.instance, variable.reaedwrite.instance, variable.other.readwrite.instance#7284ff
variable.language#7284ff
variable.other.property#5bffa5
variable.other.object.property#f3f7ff
entity.name.function#3dd8ff
keyword.operator.comparison#5bffa5
support.function#f3f7ff
invalid, invalid.deprecated#ff8dc6
invalid.broken#ff8dc6
invalid.unimplemented#ff8dc6
invalid.illegal#ff8dc6
support.variable.property#7284ff
support.variable.property.dom.js#f293ff
variable.function#f3f7ff
variable.interpolation#7284ff
meta.function-call#3dd8ff
punctuation.section.embedded#7284ff
italic#5bffa5italic
bold#3dd8ffbold
quote#f293ff
raw#f293ff
variable.assignment.coffee#7284ff
variable.parameter.function.coffee#f3f7ff
variable.assignment.coffee#7284ff
variable.other.readwrite.cs#f3f7ff
entity.name.type.class.cs, storage.type.cs#3dd8ff
entity.name.type.namespace.cs#5bffa5
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css#7284ff
keyword.control.at-rule, keyword.control.at-rule punctuation.definitionbold
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass, keyword.operator.combinator.cssbold
source.css keyword.other.unit, source.css constant.numeric#5bffa5
meta.attribute-selector.css entity.other.attribute-name.attribute#7284ff
support.type.property-name.css#f3f7ff
meta.property-value.scss, meta.property-value.scss support.type.property-name.css#3dd8ff
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#3dd8ff
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#7284ff
entity.name.tag.scss, entity.name.tag.sass#7284ff
keyword.other.unit.scss, keyword.other.unit.sass#5bffa5
support.function.misc.scss, support.function.misc.sass#f293ff
meta.directive.vue entity.other.attribute-name#5bffa5
source.directive.vue variable.other.readwrite.js, source.directive.vue punctuation.definition.string#7284ff
meta.directive.vue string.quoted.single.js#7284ff
source.vue meta.tag string.quoted#f3f7ff
source.vue entity.name.tag.template.htmlbold
source.vue entity.name.tag.script.htmlbold
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#3dd8ff
source.elixir entity.name.function#3dd8ff
source.elixir punctuation.definition.string#f293ff
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#3dd8ff
source.elixir .punctuation.binary.elixir#5bffa5
source.go meta.function-call.go#3dd8ff
meta.class entity.name.type.class.js#3dd8ff
meta.method.declaration storage.type.js#3dd8ff
terminator.js#f3f7ff
meta.js punctuation.definition.js#f3f7ff
variable.other.meta.import.js, meta.import.js variable.other#5bffa5
source.js keyword.control#7284ff
support.type.object.module.js#3dd8ff99
source.js keyword.control.conditional#7284ff
constant.numeric.hex.js#3dd8ff
variable.parameter.function.js#f293ff
variable.other.readwrite.js#f3f7ff
string.quoted.double.js meta.object-literal.key#5bffa5
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#f3f7ff
meta.jsx entity.name.tag.js, meta.jsx punctuation.definition.tag#f3f7ff
variable.js, variable.other.js#f3f7ff
entity.name.type.js, entity.name.type.module.js#3dd8ff
support.class.js#f3f7ff
meta.object-literal.key.js string.quoted, meta.object-literal.key.js#5bffa5
support.type.property-name.json#7284ff
string.quoted.double.json meta.structure.dictionary.value.json, string.quoted.double.json punctuation.definition.string.json#f293ff
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#7284ff
variable.other.ruby#f3f7ff
constant.language.symbol.hashkey.ruby#7284ff
entity.name.tag.less#7284ff
meta.attribute-selector.less entity.other.attribute-name.attribute#7284ff
markup.heading.markdown#3dd8ff
markup.italic.markdown#7284ffitalic
markup.bold.markdown#f3f7ffbold
markup.quote.markdown#f293ffitalic
markup.inline.raw.markdown#f293ff
markup.underline.link.markdown, markup.underline.link.image.markdown#f293ff
string.other.link.title.markdown, string.other.link.description.markdown#f3f7ff
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#3dd8ff
punctuation.definition.metadata.markdown#7284ff
beginning.punctuation.definition.list.markdown#5bffa5
support.class.php#3dd8ff
meta.function-call.php punctuation#f3f7ff
variable.other.global.php#3dd8ff
variable.other.global.php punctuation.definition.variable#3dd8ff
constant.language.python#7284ff
variable.parameter.function.python, meta.function-call.arguments.python#f293ff
punctuation.python#f3f7ff
entity.name.function.decorator.python#3dd8ff
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#f3f7ff
entity.name.type.ts, entity.name.type.tsx#3dd8ff
support.class.node.ts, support.class.node.tsx#3dd8ff
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#f3f7ff
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block#f3f7ff
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#3dd8ff
meta.jsx.children.tsx, meta.tag.js meta.jsx.children.tsx#3dd8ff
entity.name.tag.yaml#7284ff
comment.block.javadoc keyword.other.documentation#5bffa590
comment.block.javadoc entity.name.type.class#3dd8ff90
comment.block.javadoc variable.parameter#f293ff90
punctuation.separator#adaec2
string.quoted.double.java#3dd8ff
storage.type.generic.java#7284ff
variable.other.object.java#f3f7ff
meta.method-call.java entity.name.function.java#f293ff
storage.modifier.import.java, meta.import.java storage.modifier.java#5bffa599
keyword.other.import.java#f293ff99
meta.import.java punctuation#f3f7ff99
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, keyword.other.unit, keyword.operator.logical, keyword.operator.arithmetic, keyword.operator.bitwise, keyword.operator.increment, keyword.operator.ternary, keyword.operator.comparison, keyword.operator.assignment, keyword.operator.operator, keyword.control.ternary, keyword.operator.or.regexp, punctuation.definintion.string, punctuation
meta.import.ts meta.block.ts variable.other.readwrite.alias.ts, meta.import.tsx meta.block.tsx variable.other.readwrite.alias.tsx, meta.import.js variable.other, entity.name.function.ts, entity.name.function.tsx, support.type.primitive, entity.name.tag.yaml, meta.tag.sgml.doctype.html, entity.name.tag.doctype, meta.tag.sgml.doctype, entity.other.attribute-name, entity.name.tag.custom, source.js.jsx keyword.control.flow.js, support.type.property.css, support.function.basic_functions, variable.assignment.coffee, support.function.basic_functions, keyword.operator.expression.typeof, keyword.operator.type.annotation, assignment.coffee, entity.name.type.ts, support.constant.math, meta.object-literal.key, meta.var.expr storage.type, parameter, italic, quote, keyword, storage, language, type .function, type.function, storage.type.class, type.var, meta.parameter, variable.parameter, meta.parameters, keyword.control, modifier, this, commentitalic
token.info-token#7284ff
token.warn-token#ff8dc6
token.error-token#ff8dc6
token.debug-token#f293ff

Shiki preview

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

Loading...

Thetis Theme by Kenzie Bottoms - VS Code Theme