Skip to main content
Coding Theme

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#190231
  • activityBar.border#FF910A44
  • activityBar.foreground#C597F7
  • activityBarBadge.background#330066
  • activityBarBadge.foreground#FF910A
  • badge.background#FF910A
  • badge.foreground#8D50CE
  • button.background#230245
  • button.foreground#8D50CE
  • button.hoverBackground#FF910A
  • contrastActiveBorder#281240
  • contrastBorder#281240
  • debugExceptionWidget.background#190231
  • debugToolBar.background#230245
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.insertedTextBorder#addb6733
  • diffEditor.removedTextBackground#14032633
  • diffEditor.removedTextBorder#1403264d
  • editor.background#190231
  • editor.findMatchHighlightBackground#371060
  • editor.foreground#BEA6F7
  • editor.hoverHighlightBackground#4D0C92
  • editor.inactiveSelectionBackground#1E07365a
  • editor.lineHighlightBackground#FF910A13
  • editor.rangeHighlightBackground#371060
  • editor.selectionBackground#4B12873a
  • editor.selectionHighlightBackground#4B12873a
  • editor.wordHighlightBackground#371060
  • editor.wordHighlightStrongBackground#371060
  • editorBracketHighlight.foreground1#A64DFF
  • editorBracketHighlight.foreground2#5900B2
  • editorBracketHighlight.foreground3#7F00FF
  • editorBracketMatch.background#FF910A4d
  • editorCursor.foreground#FF910A
  • editorError.foreground#FF910A
  • editorGroup.border#FF910A44
  • editorGroupHeader.tabsBackground#190231
  • editorGutter.background#190231
  • editorHoverWidget.background#190231
  • editorHoverWidget.border#795E97
  • editorIndentGuide.activeBackground#C792EA
  • editorIndentGuide.background#280E44
  • editorLineNumber.activeForeground#FF910A
  • editorLineNumber.foreground#2E025A
  • editorOverviewRuler.commonContentForeground#1E0736
  • editorOverviewRuler.currentContentForeground#1E0736
  • editorOverviewRuler.incomingContentForeground#1E0736
  • editorSuggestWidget.background#442C38
  • editorSuggestWidget.border#402B36
  • editorSuggestWidget.foreground#7600F5
  • editorSuggestWidget.highlightForeground#8D50CE
  • editorSuggestWidget.selectedBackground#795E97
  • editorWarning.foreground#ffca28
  • editorWhitespace.foreground#3B3A32
  • editorWidget.background#250B41
  • editorWidget.border#3A2731
  • errorForeground#ff0000
  • foreground#7600F5
  • gitDecoration.modifiedResourceForeground#A142FF
  • gitDecoration.untrackedResourceForeground#F7A6F0
  • input.background#140326
  • input.border#795E97
  • input.foreground#8D50CEcc
  • input.placeholderForeground#795E97
  • inputOption.activeBorder#8D50CE
  • inputValidation.errorBackground#F7A6F0
  • inputValidation.errorBorder#F7A6F0
  • inputValidation.infoBackground#FF910A
  • inputValidation.infoBorder#FF910A
  • inputValidation.warningBackground#D5B6F7
  • inputValidation.warningBorder#D5B6F7
  • inputValidation.warningForeground#000000
  • list.activeSelectionBackground#34006B
  • list.dropBackground#190231
  • list.focusBackground#230245
  • list.focusForeground#8D50CE
  • list.highlightForeground#8D50CE
  • list.hoverBackground#190231
  • list.hoverForeground#FF910A
  • list.inactiveSelectionBackground#250E3F
  • list.inactiveSelectionForeground#795E97
  • list.invalidItemForeground#795E97
  • notificationLink.foreground#AB80CB
  • notifications.background#190231
  • notifications.foreground#8D50CEcc
  • notificationToast.border#FF910A44
  • panel.background#190231
  • panel.border#FF910A
  • panelTitle.activeBorder#795E97
  • panelTitle.activeForeground#FF910A
  • panelTitle.inactiveForeground#795E97
  • peekView.border#D5B6F7
  • peekViewEditor.background#190231
  • peekViewEditor.matchHighlightBackground#1E07365a
  • peekViewResult.background#190231
  • peekViewResult.matchHighlightBackground#1E07365a
  • peekViewResult.selectionBackground#402F51
  • peekViewResult.selectionForeground#cecece
  • peekViewTitle.background#190231
  • peekViewTitleDescription.foreground#886798
  • peekViewTitleLabel.foreground#cecece
  • pickerGroup.border#FF910A44
  • quickInputList.focusBackground#FF910A
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#25045380
  • scrollbarSlider.background#25045380
  • scrollbarSlider.hoverBackground#25045380
  • selection.background#8042C2
  • sideBar.background#190231
  • sideBar.border#FF910A44
  • sideBar.foreground#9877BB
  • sideBarSectionHeader.background#190231
  • sideBarSectionHeader.foreground#9877BB
  • sideBarTitle.foreground#9877BB
  • statusBar.background#330066
  • statusBar.debuggingBackground#8359B1
  • statusBar.noFolderBackground#190231
  • statusBarItem.activeBackground#230245
  • statusBarItem.hoverBackground#230245
  • statusBarItem.prominentBackground#230245
  • statusBarItem.prominentHoverBackground#230245
  • tab.activeBackground#250B41
  • tab.activeBorderTop#FF910A
  • tab.activeForeground#DBD1E6
  • tab.inactiveBackground#0C0118
  • tab.inactiveForeground#795E97
  • terminal.ansiBlack#190231
  • textLink.activeForeground#211131
  • textLink.foreground#FF910A
  • titleBar.activeBackground#211131
  • titleBar.activeForeground#F7F0FF
  • titleBar.border#303030
  • titleBar.inactiveBackground#07000F
  • walkThrough.embeddedEditorBackground#0A000F
  • widget.shadow#330066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#DDBDFF
meta.paragraph.markdown, string.other.link.description.title.markdown#FAF0FF
entity.name.section.markdown, punctuation.definition.heading.markdown#905BBE
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, markup.quote.markdown#BD80FF
markup.quote.markdown#BD80FF
markup.bold.markdown, punctuation.definition.bold.markdown#A857FFbold
markup.italic.markdown, punctuation.definition.italic.markdown#C792EA
markup.inline.raw.string.markdown, markup.fenced_code.block.markdown#D5B6F7
punctuation.definition.metadata.markdown#E7B9F3
markup.underline.link.image.markdown, markup.underline.link.markdown#B06BFA
comment#36036D
punctuation.definition.string#9942F5
string#DFC2FF
string.quoted, variable.other.readwrite.js#DFC2FF
constant.numeric#FF910A
constant.language.boolean#FF910A
constant#A170C6
constant.language, punctuation.definition.constant, variable.other.constant#6300CC
constant.character, constant.other#BD80FF
variable#C8A5EE
variable.other.object.js#8BEF3E
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#8BEF3E
meta.class entity.name.type.class.tsx#d29ffcff
entity.name.type.tsx, entity.name.type.module.tsx#d29ffcff
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#C3A2E6
variable.other.object.property#D5B6F7
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#AC80DB
variable.other.readwrite.js, variable.parameter#E0D7DE
string.template meta.template.expression#8740D4
string.template punctuation.definition.string#4B2277
storage#B06BFA
keyword, storage.type, storage.modifier, variable.language.this#4B2277
keyword.operator#CC99FF
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts#c792ea
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#DFC2FF
entity.name.class#D5B6F7
entity.other.inherited-class#824FD8
variable.other.readwrites, meta.definition.variable#D5B6F7
support.variable.property#AC80DB
entity.name.function#BB86F4
variable.parameter#E0D7DE
support.function, entity.name.function, meta.function-call, meta.function, meta.method.declaration, meta.function-call support, meta.decorator meta.definition.method entity.name.function, meta.decorator meta.method.declaration entity.name.function, variable.language.super.ts, source.directive, meta.function-call.generic, meta.method-call.static.php, meta.method-call.php, meta.class storage.type, meta.method.groovy, meta.bracket.square.access, entity.name.function-call.elixir, punctuation.output.liquid support.variable.liquid, meta.function.echo.edge source.js keyword.operator.error-control.js#8BEF3E
entity.name.tag#B06BFAbold
entity.name.type#d29ffc
entity.other.attribute-name#D5B6F7
punctuation.decorator#D5B6F7
meta.tag.sgml.doctype.html, punctuation.definition.tag, meta.tag.block.any, meta.tag.block.any.html, meta.tag.inline.any, source.css-ignored-vscode, meta.tag.metadata.style.end.html, text.html.vue invalid.illegal.character-not-allowed-here.html, meta.tag.inline.i.start.html, meta.tag.structure.div.start.html, punctuation.definition.tag.end.html.vue, invalid.illegal.character-not-allowed-here.html#8D50CE
support.function#D5B6F7
support.constant#C39CEC
support.type, support.class#8BEF3E
support.other.variable#CBCDD2
invalid#B06BFA bold underline
invalid.deprecated#B06BFA bold underline
support.type.property-name.json#B490DA
support.constant.json#addb67
meta.structure.dictionary.value.json string.quoted.double#e0aff5
string.quoted.double.json punctuation.definition.string.json#AB80CB
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#C7A1F2
source.json support#B06BFA
source.json string, source.json punctuation.definition.string#ece7cd
markup.list#B06BFA
markup.heading punctuation.definition.heading, entity.name.section#824FD8
text.html.markdown meta.paragraph meta.link.inline, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.begin.markdown, text.html.markdown meta.paragraph meta.link.inline punctuation.definition.string.end.markdown#78bd65
meta.paragraph.markdown#8D50CE
markup.quote#78bd65
meta.link#78BD65
source.dockerfile#C597F7
beginning.punctuation, entity.name.section.group-title, entity.other.attribute-name.class, entity.other.attribute-name.id, keyword.const, keyword.control, keyword.function, keyword.import, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.decrement, keyword.operator.expression, keyword.operator.increment, keyword.operator.increment-decrement, keyword.operator.logical, keyword.operator.misc, keyword.operator.new, keyword.operator.other, keyword.operator.ternary, keyword.other.fn, keyword.other.rust, keyword.other.special-method, keyword.other.where, keyword.package, keyword.type, keyword.var, markup.heading, meta.tag.sgml.doctype.html, punctuation.separator.key-value, storage.modifier, storage.type.class, storage.type.enum, storage.type.function, storage.type.import, storage.type.interface, storage.type.js, storage.type.namespace, storage.type.property, storage.type.rust, storage.type.string.python, storage.type.ts, storage.type.tsx, storage.type.type, support.type.object.modulebold
danica by dani - VS Code Theme