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.activeBorder#e5b358
  • activityBar.background#0A0E14
  • activityBar.border#0A0E14
  • activityBar.foreground#B3B1ADBF
  • activityBar.inactiveForeground#4d556699
  • activityBarBadge.background#e6b450
  • activityBarBadge.foreground#0A0E14
  • badge.background#e6b45033
  • badge.foreground#E6B450
  • button.background#E6B450
  • button.foreground#0a0e14
  • button.hoverBackground#e1af4b
  • debugExceptionWidget.background#0A0E14
  • debugExceptionWidget.border#0A0E14
  • debugIcon.breakpointDisabledForeground#59C2FF
  • debugIcon.breakpointForeground#E6B450
  • debugToolBar.background#0A0E14
  • descriptionForeground#4d5566
  • diffEditor.insertedTextBackground#c2d94c26
  • diffEditor.removedTextBackground#f2966826
  • dropdown.background#0A0E14
  • dropdown.border#2b303a
  • dropdown.foreground#4d5566
  • editor.background#0A0E14
  • editor.findMatchBackground#0A0E14
  • editor.findMatchBorder#E6B450
  • editor.findMatchHighlightBackground#e6b4500d
  • editor.findMatchHighlightBorder#E6B450BE
  • editor.findRangeHighlightBackground#1b2733f2
  • editor.findRangeHighlightBorder#0a0e1400
  • editor.foreground#b3b1ad
  • editor.inactiveSelectionBackground#1b2733f2
  • editor.lineHighlightBackground#00010a
  • editor.rangeHighlightBackground#0A0E14
  • editor.selectionBackground#273747
  • editor.selectionHighlightBackground#1b2733f2
  • editor.selectionHighlightBorder#304357
  • editor.wordHighlightBackground#6994bf12
  • editor.wordHighlightBorder#6994bf80
  • editor.wordHighlightStrongBackground#91b36212
  • editor.wordHighlightStrongBorder#91b36280
  • editorBracketMatch.background#4d55664d
  • editorBracketMatch.border#4d556699
  • editorCodeLens.foreground#626a73
  • editorCursor.foreground#e6b450
  • editorGroup.border#00010a
  • editorGroupHeader.noTabsBackground#0a0e14
  • editorGroupHeader.tabsBackground#0a0e14
  • editorGroupHeader.tabsBorder#0a0e14
  • editorGutter.addedBackground#91b36299
  • editorGutter.deletedBackground#d96c7599
  • editorGutter.modifiedBackground#6994bf99
  • editorHoverWidget.background#0A0E14
  • editorHoverWidget.border#000000
  • editorIndentGuide.activeBackground#4d5566b3
  • editorIndentGuide.background#4d556666
  • editorInfo.foreground#00000000
  • editorInlayHint.foreground#626A73
  • editorLineNumber.activeForeground#B3B1ADCC
  • editorLineNumber.foreground#B3B1AD80
  • editorLink.activeForeground#e6b450
  • editorMarkerNavigation.background#0A0E14
  • editorOverviewRuler.addedForeground#91b36299
  • editorOverviewRuler.border#00010a
  • editorOverviewRuler.deletedForeground#d96c7599
  • editorOverviewRuler.errorForeground#ff3333
  • editorOverviewRuler.modifiedForeground#6994bf99
  • editorOverviewRuler.warningForeground#e6b450
  • editorRuler.foreground#4d556666
  • editorSuggestWidget.background#0A0E14
  • editorSuggestWidget.border#0A0E14
  • editorSuggestWidget.highlightForeground#e5b358
  • editorSuggestWidget.selectedBackground#1c2a42
  • editorWhitespace.foreground#4d556699
  • editorWidget.background#0A0E14
  • editorWidget.border#0A0E14
  • editorWidget.resizeBorder#0A0E14
  • errorForeground#FF8F40
  • extensionButton.prominentBackground#e6b450
  • extensionButton.prominentForeground#0a0e14
  • extensionButton.prominentHoverBackground#e1af4b
  • focusBorder#0A0E14
  • foreground#B3B1AD
  • gitDecoration.addedResourceForeground#c2d94c
  • gitDecoration.conflictingResourceForeground#ff0000
  • gitDecoration.deletedResourceForeground#d96c75b3
  • gitDecoration.ignoredResourceForeground#373d49
  • gitDecoration.modifiedResourceForeground#d4cb68
  • gitDecoration.submoduleResourceForeground#ffee99b3
  • gitDecoration.untrackedResourceForeground#91b362b3
  • icon.foreground#B3B1AD
  • input.background#0A0E14
  • input.border#0A0E14
  • input.foreground#B3B1AD
  • input.placeholderForeground#B3B1AD80
  • inputOption.activeBorder#E6B450
  • inputValidation.errorBackground#0A0E14
  • inputValidation.errorBorder#FF8F40
  • inputValidation.infoBackground#0A0E14
  • inputValidation.infoBorder#59C2FF
  • inputValidation.warningBackground#0A0E14
  • inputValidation.warningBorder#E6B450
  • list.activeSelectionBackground#0A0E14
  • list.activeSelectionForeground#E6B450
  • list.errorForeground#FF8F40
  • list.filterMatchBackground#e6b4500d
  • list.filterMatchBorder#e6b450
  • list.focusAndSelectionOutline#0A0E14
  • list.focusBackground#0A0E14
  • list.focusForeground#4d5566
  • list.highlightForeground#e6b450
  • list.hoverBackground#0A0E14
  • list.hoverForeground#B3B1AD
  • list.inactiveSelectionBackground#0A0E14
  • list.inactiveSelectionForeground#4d5566
  • list.invalidItemForeground#414856
  • listFilterWidget.background#0A0E14
  • listFilterWidget.noMatchesOutline#FF8F40
  • listFilterWidget.outline#e6b450
  • panel.background#0A0E14
  • panel.border#0A0E14
  • panelSectionHeader.foreground#B3B1AD
  • panelTitle.activeBorder#e6b450
  • panelTitle.activeForeground#B3B1AD
  • panelTitle.inactiveForeground#4d5566
  • peekView.border#0A0E14
  • peekViewEditor.background#0A0E14
  • peekViewEditor.matchHighlightBackground#e6b45033
  • peekViewResult.background#0A0E14
  • peekViewResult.fileForeground#4d5566
  • peekViewResult.matchHighlightBackground#e6b45033
  • peekViewTitle.background#0A0E14
  • peekViewTitleDescription.foreground#4d5566
  • peekViewTitleLabel.foreground#4d5566
  • pickerGroup.border#0A0E14
  • pickerGroup.foreground#373d49
  • progressBar.background#e6b450
  • quickInput.background#0A0E14
  • quickInput.foreground#B3B1ADBF
  • quickInputList.focusBackground#0A0E14
  • quickInputList.focusForeground#e5b358
  • scrollbar.shadow#0A0E14
  • scrollbarSlider.activeBackground#4d5566b3
  • scrollbarSlider.background#4d556666
  • scrollbarSlider.hoverBackground#4d556699
  • selection.background#273747fd
  • settings.headerForeground#b3b1ad
  • settings.modifiedItemIndicator#6994bf
  • sideBar.background#0A0E14
  • sideBar.border#0A0E14
  • sideBar.foreground#B3B1ADBF
  • sideBarSectionHeader.background#0A0E14
  • sideBarSectionHeader.border#0A0E14
  • sideBarSectionHeader.foreground#B3B1ADBF
  • sideBarTitle.foreground#0A0E14
  • statusBar.background#0a0e14
  • statusBar.border#0a0e14
  • statusBar.debuggingBackground#f29668
  • statusBar.debuggingForeground#0a0e14
  • statusBar.foreground#4d5566
  • statusBar.noFolderBackground#0A0E14
  • statusBarItem.activeBackground#00010a
  • statusBarItem.hoverBackground#00010a
  • statusBarItem.prominentBackground#00010a
  • statusBarItem.prominentHoverBackground#00000030
  • tab.activeBackground#0a0e14
  • tab.activeBorder#e6b450
  • tab.activeForeground#b3b1ad
  • tab.border#0A0E14
  • tab.inactiveBackground#0a0e14
  • tab.inactiveForeground#4d5566
  • tab.unfocusedActiveBorder#4d5566
  • tab.unfocusedActiveForeground#4d5566
  • tab.unfocusedInactiveForeground#4d5566
  • terminal.ansiBlack#00010a
  • terminal.ansiBlue#53bdfa
  • terminal.ansiBrightBlack#686868
  • terminal.ansiBrightBlue#59c2ff
  • terminal.ansiBrightCyan#95e6cb
  • terminal.ansiBrightGreen#c2d94c
  • terminal.ansiBrightMagenta#ffee99
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffb454
  • terminal.ansiCyan#90e1c6
  • terminal.ansiGreen#91b362
  • terminal.ansiMagenta#fae994
  • terminal.ansiRed#ea6c73
  • terminal.ansiWhite#c7c7c7
  • terminal.ansiYellow#f9af4f
  • terminal.background#0a0e14
  • terminal.foreground#b3b1ad
  • textBlockQuote.background#0A0E14
  • textLink.activeForeground#e6b450
  • textLink.foreground#e6b450
  • textPreformat.foreground#b3b1ad
  • titleBar.activeBackground#0A0E14
  • titleBar.activeForeground#B3B1AD
  • titleBar.border#0A0E14
  • titleBar.inactiveBackground#0a0e14
  • titleBar.inactiveForeground#B3B1AD
  • tree.indentGuidesStroke#4d5566b3
  • walkThrough.embeddedEditorBackground#0A0E14
  • widget.shadow#0A0E14

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, comment.block.documentation storage.type.class, comment.block.documentation storage.type, comment.block.documentation storage, comment.block.documentation keyword.other#626A73italic
string, constant.other.symbol, constant.character.escape, string.quoted invalid.illegal.newline, markup.quote meta.paragraph#C2D94C
constant.numeric, constant.language, support.constant, constant.other.color, string.unquoted.html#E6B450
keyword, keyword.operator, storage.modifier, support.macro, storage.type.function, storage.type.class, punctuation.definition.decorator, punctuation.definition.annotation, punctuation.decorator, punctuation.separator.continuation.line, punctuation.separator.annotation.result, constant.character.escape.line-continuation.c, storage.type.struct.c, storage.type.enum.c, storage.type.union.c, meta.method.declaration storage.type, meta.var.expr storage.type, meta.interface storage.type.interface, storage.type.enum.ts, meta.type.declaration storage.type.type, punctuation.definition.attribute, punctuation.brackets.attribute, storage.type.rust, punctuation.separator.other.ruby, storage.type.function-type.lisp, punctuation.definition.storage.type.objc, punctuation.definition.keyword.objc, storage.type.alias.shell, entity.name.section.markdown, punctuation.definition.tag.begin, punctuation.definition.tag.end, source.toml support.type.property-name.table, source.toml support.type.property-name.array, entity.name.section.group-title, support.function.target.PHONY, storage.type.namespace.cs, storage.type.record.cs, storage.type.var.cs, storage.type.accessor.get.cs, storage.type.accessor.set.cs, storage.type.accessor.init.cs, storage.type.delegate.cs, storage.type.enum.cs, storage.type.struct.cs, storage.type.interface.cs, storage.type.event.cs, storage.type.operator.cs#FF8F40
meta.definition entity.name.function, meta.definition support.function, meta.function.definition entity.name.function, meta.function.python entity.name.function, meta.function.python support.function, meta.function.python support.variable, meta.function.python variable.legacy, meta.macro.rules entity.name.function.macro.rust, meta.function.method entity.name.function, meta.function.php entity.name.function, entity.name.function.go, meta.function.type-declaration entity.name.function, entity.other.keyframe-offset, meta.at-rule entity.name.function, meta.at-rule support.function, meta.function entity.name.function.shell, entity.name.function.lisp, meta.function entity.name.function.objc, meta.function entity.name.function.name-of-parameter.objc, markup.inline.raw.string, entity.other.attribute-name, entity.name.function.target.makefile#FFB454
meta.class entity.name.type, entity.name.type.struct, entity.name.type.trait, support.class.dart, meta.module entity.name.type.module, meta.declaration storage.type.haskell, meta.type.declaration entity.name.type.alias, meta.interface entity.name.type.interface, entity.name.type.enum.ts, entity.name.type.lisp, meta.interface-or-protocol entity.name.type.objc, entity.name.type.class.cs, entity.name.type.interface.cs, entity.name.type.struct.cs, entity.name.type.alias.cs, entity.name.type.enum.cs, entity.name.tag.css, meta.link.inline string.other.link.title, meta.image.inline string.other.link.description#59C2FF
storage.modifier.import, storage.modifier.package, entity.name.type.package, entity.name.function.support, entity.name.function.decorator, meta.function.decorator support.type, invalid, keyword.operator.key-value, keyword.operator.access.dot, keyword.operator.namespace, meta.function meta.function.parameters support.function.builtin.python, keyword.illegal.name.python, source.cs keyword.type, string.template meta.template, meta.class entity.name.type.module.js, meta.type.annotation entity.name.type, meta.return.type entity.name.type, meta.type.parameters entity.name.type, keyword.operator.type.annotation.ts, source.css support.constant, source.css meta.at-rule support.function, support.type.property-name, entity.name.tag.yaml, string.quoted.double.attribute-value, constant.language.symbol, constant.other.symbol.hashkey, meta.method-call.static keyword.operator, keyword.operator.return-value.php, keyword.operator.class.php, keyword.other.special-method.ruby, keyword.constant.lisp, source.objc keyword.other.property, source.editorconfig keyword.other.definition, source.ini punctuation.definition.entity, keyword.other.definition.ini, string.unquoted.argument.shell, string.interpolated.dollar.shell, source.shell string.unquoted.argument#B3B1AD
markup.italicitalic
markup.boldbold
markup.strikethroughstrikethrough

Shiki preview

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

Loading...

pustota by sobolevn - VS Code Theme