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.activeBackground#382f5e
  • activityBar.background#382f5e
  • activityBar.foreground#5ed378
  • activityBarBadge.background#463b75
  • badge.background#d8d7dd
  • badge.foreground#382f5e
  • breadcrumb.activeSelectionForeground#5ed378
  • breadcrumb.background#382f5e
  • breadcrumbPicker.background#382f5e
  • button.background#382f5e
  • button.foreground#5ed378
  • button.hoverBackground#382f5e
  • button.secondaryBackground#382f5e
  • button.secondaryForeground#5ed378
  • button.secondaryHoverBackground#382f5e
  • checkbox.background#382f5e
  • debugExceptionWidget.background#382f5e
  • debugIcon.stepBackForeground#382f5e
  • debugToolBar.background#382f5e
  • debugView.exceptionLabelBackground#382f5e
  • debugView.stateLabelBackground#382f5e
  • diffEditor.insertedTextBackground#382f5e
  • diffEditor.removedTextBackground#382f5e
  • dropdown.background#382f5e
  • dropdown.listBackground#382f5e
  • editor.background#1b1b33
  • editor.findMatchBackground#382f5e
  • editor.findMatchHighlightBackground#382f5e
  • editor.findRangeHighlightBackground#382f5e
  • editor.focusedStackFrameHighlightBackground#382f5e
  • editor.foldBackground#382f5e
  • editor.foreground#5ed378
  • editor.hoverHighlightBackground#382f5e
  • editor.inactiveSelectionBackground#382f5e
  • editor.lineHighlightBackground#1b1b33
  • editor.linkedEditingBackground#382f5e
  • editor.rangeHighlightBackground#382f5e
  • editor.selectionBackground#382f5e
  • editor.selectionHighlightBackground#382f5e
  • editor.snippetFinalTabstopHighlightBackground#382f5e
  • editor.snippetTabstopHighlightBackground#382f5e
  • editor.stackFrameHighlightBackground#382f5e
  • editor.symbolHighlightBackground#382f5e
  • editor.wordHighlightBackground#382f5e
  • editor.wordHighlightStrongBackground#382f5e
  • editorBracketMatch.background#463b75
  • editorCodeLens.foreground#382f5e
  • editorCursor.background#463b75
  • editorError.background#463b75
  • editorError.foreground#bb54a1
  • editorGroup.dropBackground#463b75
  • editorGroup.emptyBackground#463b75
  • editorGroupHeader.noTabsBackground#463b75
  • editorGroupHeader.tabsBackground#463b75
  • editorGutter.addedBackground#463b75
  • editorGutter.background#463b75
  • editorGutter.deletedBackground#463b75
  • editorGutter.foldingControlForeground#382f5e
  • editorGutter.modifiedBackground#463b75
  • editorHoverWidget.background#382f5e
  • editorHoverWidget.border#382f5e
  • editorHoverWidget.foreground#382f5e
  • editorHoverWidget.statusBarBackground#382f5e
  • editorIndentGuide.activeBackground#382f5e
  • editorIndentGuide.background#463b75
  • editorInfo.background#382f5e
  • editorMarkerNavigation.background#463b75
  • editorMarkerNavigationError.background#382f5e
  • editorMarkerNavigationInfo.background#382f5e
  • editorMarkerNavigationWarning.background#463b75
  • editorOverviewRuler.background#463b75
  • editorOverviewRuler.commonContentForeground#382f5e
  • editorOverviewRuler.errorForeground#bb54a1
  • editorPane.background#463b75
  • editorSuggestWidget.background#463b75
  • editorSuggestWidget.selectedBackground#463b75
  • editorWarning.background#463b75
  • editorWidget.background#463b75
  • extensionBadge.remoteBackground#463b75
  • extensionBadge.remoteForeground#382f5e
  • extensionButton.prominentBackground#463b75
  • extensionButton.prominentForeground#5ed378
  • extensionButton.prominentHoverBackground#382f5e
  • foreground#d8d7dd
  • input.background#463b75
  • inputOption.activeBackground#463b75
  • inputValidation.errorBackground#382f5e
  • inputValidation.infoBackground#382f5e
  • inputValidation.warningBackground#463b75
  • list.activeSelectionBackground#382f5e
  • list.dropBackground#463b75
  • list.filterMatchBackground#463b75
  • list.focusBackground#463b75
  • list.hoverBackground#382f5e
  • list.hoverForeground#5ed378
  • list.inactiveFocusBackground#463b75
  • list.inactiveSelectionBackground#463b75
  • listFilterWidget.background#382f5e
  • menu.background#463b75
  • menu.selectionBackground#382f5e
  • menu.separatorBackground#382f5e
  • menubar.selectionBackground#382f5e
  • merge.commonContentBackground#382f5e
  • merge.commonHeaderBackground#382f5e
  • merge.currentContentBackground#382f5e
  • merge.currentHeaderBackground#382f5e
  • merge.incomingContentBackground#382f5e
  • merge.incomingHeaderBackground#382f5e
  • minimap.background#382f5e
  • minimap.errorHighlight#bb54a1
  • notebook.cellBorderColor#382f5e
  • notebook.cellHoverBackground#382f5e
  • notebook.cellStatusBarItemHoverBackground#382f5e
  • notebook.focusedCellBackground#382f5e
  • notebook.outputContainerBackgroundColor#463b75
  • notebook.rowHoverBackground#382f5e
  • notebook.symbolHighlightBackground#382f5e
  • notebookScrollbarSlider.activeBackground#382f5e
  • notebookScrollbarSlider.background#382f5e
  • notebookScrollbarSlider.hoverBackground#382f5e
  • notificationCenterHeader.background#382f5e
  • notifications.background#382f5e
  • panel.background#1b1b33
  • panelInput.border#1b1b33
  • panelSection.dropBackground#382f5e
  • panelSectionHeader.background#382f5e
  • panelSectionHeader.foreground#1b1b33
  • peekViewEditor.background#382f5e
  • peekViewEditor.matchHighlightBackground#382f5e
  • peekViewEditorGutter.background#382f5e
  • peekViewResult.background#382f5e
  • peekViewResult.matchHighlightBackground#382f5e
  • peekViewResult.selectionBackground#382f5e
  • peekViewTitle.background#382f5e
  • progressBar.background#5ed378
  • quickInput.background#382f5e
  • quickInputTitle.background#382f5e
  • sash.hoverBorder#382f5e
  • scrollbarSlider.activeBackground#382f5e
  • scrollbarSlider.background#382f5e
  • scrollbarSlider.hoverBackground#382f5e
  • searchEditor.findMatchBackground#382f5e
  • selection.background#382f5e
  • settings.checkboxBackground#382f5e
  • settings.dropdownBackground#382f5e
  • settings.focusedRowBackground#382f5e
  • settings.numberInputBackground#382f5e
  • settings.textInputBackground#382f5e
  • sideBar.background#382f5e
  • sideBar.border#463b75
  • sideBar.dropBackground#382f5e
  • sideBarSectionHeader.background#463b75
  • sideBarTitle.foreground#463b75
  • statusBar.background#463b75
  • statusBarItem.activeBackground#382f5e
  • statusBarItem.hoverBackground#382f5e
  • statusBarItem.prominentHoverBackground#382f5e
  • tab.activeBackground#382f5e
  • tab.hoverBackground#382f5e
  • tab.hoverBorder#382f5e
  • tab.hoverForeground#5ed378
  • tab.inactiveBackground#463b75
  • tab.unfocusedHoverBackground#382f5e
  • tab.unfocusedHoverBorder#382f5e
  • tab.unfocusedHoverForeground#382f5e
  • terminal.background#382f5e
  • terminal.foreground#5ed378
  • titleBar.activeBackground#382f5e
  • welcomePage.background#382f5e
  • welcomePage.buttonHoverBackground#382f5e

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.single.block.python#00ff00italic
variable, string constant.other.placeholder, punctuation.terminator.statement.cs, keyword.operator.comparison.cs, keyword.operator.assignment.cs, keyword.operator.logical.cpp, keyword.control, variable.language.this.cpp, text.xml, meta.tag.preprocessor.xml, entity.name.tag.xml, entity.name.tag.localname.xml#5ed378
constant.other.color#ffffff
invalid, invalid.illegal#FF5370
support.type, keyword.control.loop.foreach.cs, keyword.control.loop.while.cs, keyword.control.flow.return.cs, keyword.control.return.cpp, keyword.control.while.cpp, keyword.control.for.cpp, keyword.control.for.cs, keyword.other.using.directive.cpp, storage.type.namespace.directive.cpp, meta.using-namespace.cpp, keyword.control.if.cpp, keyword.control.conditional.if.cs, keyword.control.switch.cpp, keyword.control.case.cpp, keyword.control.default.cpp, keyword.control.break.cpp, keyword.control.switch.cs, keyword.control.case.cs, keyword.control.default.cs, keyword.control.break.cs, keyword.control.flow.python, keyword.other.python, keyword.control.c, keyword.control.switch.c, keyword.control.case.c, keyword.control.default.c, keyword.control.try.cs#c080d0
storage.type, keyword.control, constant.other.color, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.class.cs, keyword.type.cs, keyword.other.get.cs, keyword.other.set.cs, keyword.other.new.cs, constant.language.null.cs, support.type.python, support.type.exception.python, keyword.other.namespace.cs, keyword.mnemonic.x86.asm, keyword.mnemonic.z80.asm#ff8bff
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#f07178
variable.function, support.function, keyword.other.special-method, storage.modifier, variable.other.local#5ed378
support.other.variable, string.other.link#5ed378
constant.numeric, punctuation.definition.string.begin.cs, punctuation.definition.string.end.cs, constant.character.escape.cs, constant.character.escape.cpp, punctuation.definition.string.begin.cpp#f0ad6d
string#f0ad6d
support.type, support.class, support.orther.namespace.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#5ed378
support.type#5ed378
source.css support.type.property-name, variable.other.object.property.cs, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#ff8bff
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#FF5370
variable.language#FF5370italic
entity.name.method.js#e7eaf0italic
meta.class-method.js entity.name.function.js, variable.function.constructor#82AAFF
entity.other.attribute-name#ff8bff
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#f0ad6ditalic
entity.other.attribute-name.class#f0ad6d
source.sass keyword.control#82AAFF
markup.inserted#C3E88D
markup.deleted#FF5370
markup.changed#C792EA
string.regexp#f0ad6d
constant.character.escape#f0ad6d
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#82AAFFitalic
source.js constant.other.object.key.js string.unquoted.label.js#FF5370italic
source.json meta.structure.dictionary.json support.type.property-name.json#C792EA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FFCB6B
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#F78C6C
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#FF5370
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C17E70
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#82AAFF
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f07178
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C792EA
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF
text.html.markdown markup.inline.raw.markdown#C792EA
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#C3E88D
markup.italic#f07178italic
markup.bold, markup.bold string#f07178bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#f07178bold
markup.underline#F78C6Cunderline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#82AAFF
string.other.link.description.title.markdown#C792EA
constant.other.reference.link.markdown#FFCB6B
markup.raw.block#C792EA
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
meta.separator#65737Ebold
markup.table#EEFFFF
meta.preprocessor.include.cpp, meta.preprocessor.macro.cpp, keyword.control.directive.define.cpp, keyword.control.directive.include.cpp, punctuation.definition.directive.cpp, entity.name.function.preprocessor.cpp, keyword.other.using.cs, keyword.control.import.python, keyword.control.import.from.python, keyword.control.directive.pragma.cpp, entity.other.attribute-name.pragma.preprocessor.cpp, punctuation.definition.directive.c, keyword.control.directive.include.c, meta.preprocessor.macro.c, keyword.control.directive.define.c#388f8f

Shiki preview

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

Loading...

Gyn_theme - Coding Theme