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.activeBackground#0c1923
  • activityBar.activeFocusBorder#ffd900
  • activityBar.background#01001d
  • activityBar.border#2f2d6b
  • activityBar.foreground#00ffb7
  • activityBar.inactiveForeground#c4c2fc
  • activityBarBadge.background#ffd900
  • activityBarBadge.foreground#080808
  • badge.background#ffc600
  • badge.foreground#000
  • button.background#72f1b8e9
  • button.foreground#010000
  • button.hoverBackground#51ffc7c9
  • checkbox.foreground#51FFC5
  • contrastBorder#ffffff00
  • debugExceptionWidget.background#193549
  • debugExceptionWidget.border#aaa
  • debugIcon.continueForeground#FAD000
  • debugIcon.disconnectForeground#FAD000
  • debugIcon.pauseForeground#FAD000
  • debugIcon.restartForeground#3AD900
  • debugIcon.startForeground#FAD000
  • debugIcon.stepBackForeground#FAD000
  • debugIcon.stepIntoForeground#FAD000
  • debugIcon.stepOutForeground#FAD000
  • debugIcon.stepOverForeground#FAD000
  • debugIcon.stopForeground#EC3A37F5
  • debugToolBar.background#193549
  • descriptionForeground#aaa
  • diffEditor.insertedTextBackground#3ad90033
  • diffEditor.insertedTextBorder#3ad90055
  • diffEditor.removedTextBackground#ee3a4333
  • diffEditor.removedTextBorder#ee3a4355
  • dropdown.background#193549
  • dropdown.border#15232d
  • dropdown.foreground#fff
  • dropdown.listBackground#2a2139
  • editor.background#011627
  • editor.findMatchBackground#ff1c6b63
  • editor.findMatchHighlightBackground#ff51859c
  • editor.foldBackground#b3ff0025
  • editor.foreground#fff
  • editor.hoverHighlightBackground#004696
  • editor.lineHighlightBackground#1c1a57
  • editor.rangeHighlightBackground#ad366e88
  • editor.selectionBackground#ff008853
  • editor.selectionHighlightBackground#35008b
  • editor.wordHighlightBackground#47008ad5
  • editor.wordHighlightStrongBackground#048300d5
  • editorCursor.foreground#EEFF00
  • editorError.foreground#fffb00
  • editorGroupHeader.noTabsBackground#193549
  • editorGroupHeader.tabsBackground#0c1923
  • editorGutter.addedBackground#4ad45c
  • editorGutter.deletedBackground#ff0357
  • editorGutter.foldingControlForeground#51FFC5
  • editorGutter.modifiedBackground#dfdc4b
  • editorHoverWidget.background#010033c7
  • editorHoverWidget.border#ad366e
  • editorIndentGuide.activeBackground#C792EA
  • editorIndentGuide.background#0e2c45
  • editorInfo.foreground#af21e7
  • editorLineNumber.activeForeground#72f1b8
  • editorLineNumber.foreground#c4c2fc93
  • editorMarkerNavigation.background#3B536433
  • editorMarkerNavigationError.background#ff00006c
  • editorMarkerNavigationWarning.background#ffc600
  • editorRuler.foreground#11215e
  • editorSuggestWidget.background#15232d
  • editorSuggestWidget.border#15232d
  • editorSuggestWidget.foreground#aaa
  • editorSuggestWidget.highlightForeground#ffc600
  • editorSuggestWidget.selectedBackground#193549
  • editorWarning.border#ffffff00
  • editorWarning.foreground#51FFC5
  • editorWhitespace.foreground#ffffff1a
  • editorWidget.background#010033c7
  • editorWidget.border#0d3a58
  • errorForeground#ffc600
  • extensionButton.prominentBackground#72f1b8e9
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#51ffc7c9
  • focusBorder#0d3a58
  • foreground#ffff
  • gitDecoration.addedResourceForeground#e1fa00
  • gitDecoration.conflictingResourceForeground#fd1d68
  • gitDecoration.deletedResourceForeground#ff628c
  • gitDecoration.ignoredResourceForeground#808080
  • gitDecoration.modifiedResourceForeground#d9ff00
  • gitDecoration.untrackedResourceForeground#1cf16e
  • icon.foreground#03ffaa
  • input.background#193549
  • input.border#0d3a58
  • input.foreground#ffc600
  • input.placeholderForeground#aaa
  • inputOption.activeBorder#8dffff
  • inputValidation.errorBackground#961616
  • inputValidation.errorBorder#ffc600
  • inputValidation.infoBackground#193549
  • inputValidation.infoBorder#0D3A58
  • inputValidation.warningBackground#193549
  • inputValidation.warningBorder#ffc600
  • list.activeSelectionBackground#35008b
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#322EA6
  • list.errorForeground#fa7373
  • list.filterMatchBorder#ad366e
  • list.focusBackground#242272
  • list.focusForeground#ffffff
  • list.highlightForeground#94fff6
  • list.hoverBackground#25227279
  • list.hoverForeground#ffffff
  • list.inactiveFocusBackground#242272
  • list.inactiveSelectionBackground#35008b
  • list.inactiveSelectionForeground#ffffff
  • list.invalidItemForeground#ffa4a4
  • list.warningForeground#ffd7b0
  • listFilterWidget.background#ad366e
  • listFilterWidget.noMatchesOutline#ff0e129a
  • listFilterWidget.outline#01001d
  • menu.background#010033c7
  • menu.border#bbbbbb46
  • menu.foreground#ffffff
  • menu.selectionBackground#fd009c56
  • menu.selectionBorder#ad366e
  • menu.selectionForeground#03ffaa
  • menu.separatorBackground#ffff
  • menubar.selectionBackground#ad366e
  • menubar.selectionBorder#ad366e
  • menubar.selectionForeground#fff
  • merge.border#ffffff00
  • merge.commonContentBackground#c97d0c
  • merge.commonHeaderBackground#c97d0c
  • merge.currentContentBackground#2F7366
  • merge.currentHeaderBackground#2F7366
  • merge.incomingContentBackground#185294
  • merge.incomingHeaderBackground#185294
  • minimap.findMatchHighlight#00ffff
  • minimap.selectionHighlight#2600277c
  • minimapGutter.addedBackground#00ff55
  • minimapGutter.deletedBackground#ff0000
  • minimapGutter.modifiedBackground#eeff00
  • minimapSlider.activeBackground#ff7cbd71
  • minimapSlider.hoverBackground#08f7ff3a
  • notificationCenter.border#ffc600
  • notificationCenterHeader.background#122738
  • notificationCenterHeader.foreground#aaa
  • notificationLink.foreground#ffc600
  • notifications.background#122738
  • notifications.border#ffc600
  • notifications.foreground#aaa
  • notificationToast.border#ffc600
  • panel.background#163147
  • panel.border#ffc600
  • panel.dropBorder#ff0000
  • panelTitle.activeBorder#00f3d3
  • panelTitle.activeForeground#03ffaa
  • panelTitle.inactiveForeground#ffffff
  • peekView.border#ffd400
  • peekViewEditor.background#1971f770
  • peekViewEditor.matchHighlightBackground#120961
  • peekViewEditor.matchHighlightBorder#34006e
  • peekViewResult.background#1a1079
  • peekViewResult.selectionBackground#ffd400
  • peekViewTitle.background#08f7ff3a
  • peekViewTitleDescription.foreground#348bee
  • progressBar.background#51FFC5
  • scrollbar.shadow#ff25edf1
  • scrollbarSlider.activeBackground#ff7cbd71
  • scrollbarSlider.background#51ffc559
  • scrollbarSlider.hoverBackground#ff65b277
  • settings.headerForeground#8ee4f2
  • sideBar.background#01182c
  • sideBar.border#2f2d6b
  • sideBar.foreground#ceccff
  • sideBarSectionHeader.background#01001d
  • sideBarSectionHeader.foreground#94fff6
  • statusBar.background#1e012c
  • statusBar.border#72f1b8e9
  • statusBar.debuggingBackground#72f1b8e9
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#ffffff83
  • statusBar.noFolderBackground#020137
  • statusBarItem.activeBackground#a9c025
  • statusBarItem.hoverBackground#ad366e
  • statusBarItem.remoteBackground#fbff00
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#25227299
  • tab.activeBorder#51FFC5
  • tab.activeForeground#ffffff
  • tab.border#01001d
  • tab.hoverBackground#25227299
  • tab.inactiveBackground#0a092e
  • tab.inactiveForeground#c4c2fc
  • tab.unfocusedActiveBorder#01001d
  • tab.unfocusedActiveForeground#c4c2fc
  • tab.unfocusedHoverBackground#ad366e88
  • tab.unfocusedInactiveForeground#c4c2fc
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#0088ff
  • terminal.ansiBrightBlack#36f37f
  • terminal.ansiBrightBlue#1790f9
  • terminal.ansiBrightCyan#80fcff
  • terminal.ansiBrightGreen#66ff00
  • terminal.ansiBrightMagenta#fb94ff
  • terminal.ansiBrightRed#ff628c
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffc600
  • terminal.ansiCyan#80fcff
  • terminal.ansiGreen#66ff00
  • terminal.ansiMagenta#fb94ff
  • terminal.ansiRed#ff628c
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffc600
  • terminal.background#011b31
  • terminal.foreground#eef5eb
  • terminalCursor.background#ffc600
  • terminalCursor.foreground#ffc600
  • textBlockQuote.background#193b49
  • textBlockQuote.border#00ffb7
  • textCodeBlock.background#590159
  • textLink.activeForeground#fb94ff
  • textLink.foreground#00ffb7
  • textPreformat.foreground#ffc600
  • textSeparator.foreground#0d3a58
  • titleBar.activeBackground#01001d
  • titleBar.activeForeground#829197
  • titleBar.inactiveBackground#193549
  • titleBar.inactiveForeground#ffffff33
  • walkThrough.embeddedEditorBackground#0d3a58
  • widget.shadow#ff51858a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.quoted.docstring.multi.python#c4c2fc93italic
entity.name, support.type, support.class, support.orther.namespace.use.php, meta.use.php, support.other.namespace.php, markup.changed.git_gutter, support.type.sys-types#FFCB6B
entity.name.tag#51FFC5
punctuation.definition.tag#36f9f6
string#F1FA8C
constant.numeric#ffdf3d
constant.language#51FFC5
constant.character, constant.other#ff73dc
variable
keyword#F1FA8C
storage#40a9ff
storage.type#00FFFF
support.type.vendored.property-name#F1FA8Cbold
string.quoted.double.js#FF9CBE
constant.language.boolean#ff9271italic bold
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#f1ff62
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#40a9ff
punctuation.definition.parameters#ffee80
punctuation.definition.template-expression#ffee80
entity.name.class, entity.name.type.class#00faa7
entity.name.function#fede5d
keyword.control.import.include.php#9EFFFFitalic
keyword.operator.key.php#51FFC5italic
string.quoted.single.php, meta.array.php, meta.function-call.php#9bff73italic
entity.other.inherited-class, meta.other.inherited-class.php#6ab0ffitalic
entity.name.function - meta.function-call#39c0ff
variable.parameter#51FFC5
entity.other.attribute-name#FF92A5italic
entity.other.attribute-name.class, entity.other.attribute-name.id#F1FA8C
entity.other.attribute-name.pseudo-class, meta.selector#F1FA8C
constant.other.color#f5aea8
source#51FFC5
support.variable.property.js#F1FC59
entity.name.function, entity.name.function.js, variable.function, support.function, keyword.other.special-method#51FFC5
support.constant#39c0ff
support.type, support.class#ff2cf1italic
support.other.variable#39c0ff
support.variable.property.dom#67b3ff
invalid#ff3957
invalid.deprecated#00d7e2
meta.diff, meta.diff.header#009af3
markup.deleted#ec107b
markup.inserted#dbcd00
markup.changed#029fcf
constant.numeric.line-number.find-in-files - match#e92778
entity.name.filename.find-in-files#51FFC5
keyword.other#a83dff
keyword.other.important#fc456cbold
meta.property-value, support.constant.property-value, constant.other.color, constant.numeric#FB94FF
meta.structure.dictionary.json string.quoted.double.json#FF0081
support.type.property-name.json#f1fa8ef1
meta.structure.dictionary.value.json string.quoted.double.json#9EFFFF
meta.property-name support.type.property-name#9EFFFF
meta.property-value punctuation.separator.key-value#44a1fd
keyword.other.use, keyword.other.function.use, keyword.other.namespace, keyword.other.new, keyword.other.special-method, keyword.other.unit, keyword.other.use-as#ff00f2
keyword.other.unit#ff37cd
source.php entity, variable.other.class.php#9EFFFF
keyword.other.phpdoc.php#FF9D00
entity.name.function.php, support.function.basic_functions.php, meta.function-call.php, variable.other.property#FAD000
variable.other.php, punctuation.definition.variable.php, variable.other.global.php, variable.language.this.php#9EFFFF
storage.modifier.php, keyword.other.namespace.php#FF9D00
entity.name.tag.yaml#FAD000
punctuation.definition.block.sequence.item.yaml#E1EFFF
storage.type.function.php, meta.function.parameters.php#FF628C
keyword.blade#FF9D00
begin.bracket.round.blade.php, end.bracket.round.blade.php#E1EFFF
support.function.construct.begin.blade, support.function.construct.end.blade#FFEE80
support.other.namespace.php#973dfd
meta.use#2fb3ff
variable.other#51FFC5
keyword.other.phpdoc.php#35a3fd
variable.parameter.function.coffee#51FFC5
entity.name.function.member#b7fa4a
variable.other.object.access#f7e8e8
keyword.control.import.python#ff008e
meta.function-call.generic.python#2ed9f7
variable.parameter.function.language.special.self.python#FB94FF
support.function.builtin.python#51FFC5
punctuation.separator.colon.python#dcf56e
source.ts entity.name.type#dbcd00
source.ts keyword#ff25f0
source.ts punctuation.definition.parameters#dbcd00
meta.arrow.ts punctuation.definition.parameters#ffee80
source.ts storage#03dac6
variable.language, entity.name.type.class.ts, entity.name.type.class.tsx#51FFC5
entity.other.inherited-class.ts, entity.other.inherited-class.tsx#dbcd00
source.js storage.type.function, source.ts storage.type.function#FF628C
variable.language, entity.name.type.class.js#fb94ff
entity.other.inherited-class.js#ff15ef
text.html.vue-html#ffd400
entity.name.section.markdown#51FFC5
string.other.link.title.markdown#51FFC5
punctuation.definition.heading.markdown#f37500b9
markup.raw.inline.markdown#e9e9e9
punctuation.definition.bold.markdown, punctuation.definition.italic.markdown#f37500b9
punctuation.definition.list.begin.markdown#cff300
punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown#ff22f0
punctuation.definition.metadata.markdown#fc63f3
markup.underline.link.markdown, markup.underline.link.image.markdown, meta.image.inline.markdown#F78C6C
markup.bold.markdown, markup.italic.markdown#f188ff
markup.italic.markdownitalic
markup.bold.markdownbold
fenced_code.block.language, markup.inline.raw.markdown#51FFC5
fenced_code.block.language, markup.inline.raw.markdown#51FFC5
meta.paragraph.markdown#e1efff
markup.raw.block.markdown#ffffff
markup.deleted.git_gutter#e700d8
markup.inserted.git_gutter#ffc400
markup.changed.git_gutter#d9ff00
meta.template.expression#18b6ff

Shiki preview

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

Loading...

Source Theme by Uthsho - VS Code Theme