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#E7DEC9
  • activityBar.border#6D6959
  • activityBar.foreground#E26352
  • activityBar.inactiveForeground#8D8F7E
  • activityBarBadge.background#4E4B42
  • activityBarBadge.foreground#E7DEC9
  • badge.background#E26352
  • badge.foreground#E7DEC9
  • breadcrumb.background#E7DEC9
  • breadcrumb.focusForeground#E26352
  • button.background#4A5246
  • button.foreground#E7DEC9
  • button.hoverBackground#E26352
  • button.secondaryBackground#E7DEC9
  • button.secondaryForeground#4A5246
  • button.secondaryHoverBackground#E26352
  • debugExceptionWidget.background#8D8F7E
  • debugExceptionWidget.border#8D8F7E
  • debugToolBar.background#8D8F7E
  • diffEditor.insertedTextBackground#727B5B3f
  • diffEditor.insertedTextBorder#00000000
  • diffEditor.removedTextBackground#727B5B3f
  • diffEditor.removedTextBorder#00000000
  • dropdown.background#8D8F7E
  • dropdown.border#8D8F7E
  • dropdown.foreground#4F4E43
  • editor.background#E7DEC9
  • editor.findMatchBackground#B3AE99
  • editor.findMatchHighlightBackground#B3AE99
  • editor.findRangeHighlightBackground#B0AB96
  • editor.foreground#3E3B35
  • editor.hoverHighlightBackground#A5A18E
  • editor.inactiveSelectionBackground#4A524633
  • editor.lineHighlightBackground#bcb8a440
  • editor.rangeHighlightBackground#b8b2a1
  • editor.selectionBackground#bcb8a4
  • editor.selectionHighlightBackground#B3AE99
  • editor.wordHighlightBackground#B0AB96
  • editor.wordHighlightStrongBackground#BA7F6E7f
  • editorBracketHighlight.foreground1#0A0702
  • editorBracketHighlight.foreground2#2C2117
  • editorBracketHighlight.foreground3#736653
  • editorBracketHighlight.foreground4#A38E76
  • editorBracketHighlight.foreground5#BFAC93
  • editorBracketHighlight.foreground6#C0A887
  • editorBracketHighlight.unexpectedBracket.foreground#E26352
  • editorBracketMatch.background#B0AB96
  • editorBracketMatch.border#B0AB96
  • editorCodeLens.foreground#989283
  • editorCursor.foreground#777465
  • editorError.border#E26352
  • editorError.foreground#E26352
  • editorGroup.border#E7DEC9
  • editorGroup.dropBackground#A5A18E7f
  • editorGroupHeader.border#4E4B42
  • editorGroupHeader.noTabsBackground#E7DEC9
  • editorGroupHeader.tabsBackground#E7DEC9
  • editorGutter.addedBackground#12b20d
  • editorGutter.background#E7DEC9
  • editorGutter.deletedBackground#E26352
  • editorGutter.modifiedBackground#62473B
  • editorHoverWidget.background#E7DEC9
  • editorHoverWidget.border#8D8F7E
  • editorIndentGuide.background#B0AB96
  • editorInlayHint.background#8d8f7e80
  • editorInlayHint.foreground#E7DEC9
  • editorInlayHint.parameterBackground#E7DEC9
  • editorInlayHint.parameterForeground#3BA49A
  • editorLineNumber.foreground#777465
  • editorLink.activeForeground#E26352
  • editorMarkerNavigation.background#8D8F7E
  • editorMarkerNavigationError.background#727B5B
  • editorMarkerNavigationWarning.background#2E3335
  • editorOverviewRuler.border#B0AB96
  • editorOverviewRuler.currentContentForeground#E26352
  • editorOverviewRuler.incomingContentForeground#4A5246
  • editorRuler.foreground#8D8F7E
  • editorSuggestWidget.background#B3AE99
  • editorSuggestWidget.border#B3AE99
  • editorSuggestWidget.foreground#4F4E43
  • editorSuggestWidget.highlightForeground#E26352
  • editorSuggestWidget.selectedBackground#A5A18E
  • editorWarning.border#E26352
  • editorWarning.foreground#E26352
  • editorWhitespace.foreground#8D8F7E
  • editorWidget.background#E7DEC9
  • editorWidget.border#4E4B42
  • editorWidget.resizeBorder#4E4B42
  • errorForeground#727B5B
  • extensionButton.prominentBackground#4A5246
  • extensionButton.prominentForeground#E7DEC9
  • extensionButton.prominentHoverBackground#E26352
  • focusBorder#E26352
  • foreground#4E4B42
  • input.background#E7DEC9
  • input.border#8D8F7E
  • input.foreground#4F4E43
  • input.placeholderForeground#A5A18E
  • inputOption.activeBackground#E26352
  • inputOption.activeBorder#E26352
  • inputOption.activeForeground#E7DEC9
  • inputOption.hoverBackground#A5A18E
  • inputValidation.errorBackground#8D8F7E
  • inputValidation.errorBorder#727B5B
  • inputValidation.infoBackground#8D8F7E
  • inputValidation.infoBorder#4A5246
  • inputValidation.warningBackground#d7ac01
  • inputValidation.warningBorder#d7ac01
  • list.activeSelectionBackground#4E4B42
  • list.activeSelectionForeground#E7DEC9
  • list.dropBackground#B3AE99
  • list.focusBackground#777465
  • list.focusForeground#E7DEC9
  • list.highlightForeground#B3AE99
  • list.hoverBackground#B3AE99
  • list.hoverForeground#4E4B42
  • list.inactiveSelectionBackground#8D8F7E
  • list.inactiveSelectionForeground#4E4B42
  • merge.border#868373
  • merge.currentContentBackground#E263527f
  • merge.currentHeaderBackground#E26352
  • merge.incomingContentBackground#4A52467f
  • merge.incomingHeaderBackground#4A5246
  • notificationCenter.border#4f4e43
  • notificationCenterHeader.background#4f4e43
  • notificationCenterHeader.foreground#E7DEC9
  • notifications.background#E7DEC9
  • notifications.border#4f4e43
  • notifications.foreground#4f4e43
  • notificationsErrorIcon.foreground#E26352
  • notificationsInfoIcon.foreground#0078B4
  • notificationsWarningIcon.foreground#d7ac01
  • notificationToast.border#6d6959
  • panel.background#E7DEC9
  • panel.border#605C51
  • panelTitle.activeBorder#E26352
  • panelTitle.activeForeground#E26352
  • panelTitle.inactiveForeground#868373
  • peekView.border#BA7F6E
  • peekViewEditor.background#8D8F7E
  • peekViewEditor.matchHighlightBackground#B3AE99
  • peekViewEditorGutter.background#8D8F7E
  • peekViewResult.background#8D8F7E
  • peekViewResult.fileForeground#4F4E43
  • peekViewResult.lineForeground#A5A18E
  • peekViewResult.matchHighlightBackground#62473B
  • peekViewResult.selectionBackground#777465
  • peekViewResult.selectionForeground#4E4B42
  • peekViewTitle.background#A5A18E
  • peekViewTitleDescription.foreground#989283
  • peekViewTitleLabel.foreground#4E4B42
  • pickerGroup.border#989283
  • pickerGroup.foreground#E26352
  • progressBar.background#727B5B
  • scrollbar.shadow#E7DEC966
  • scrollbarSlider.activeBackground#9892837f
  • scrollbarSlider.background#7774657f
  • scrollbarSlider.hoverBackground#8683737f
  • selection.background#bcb8a4
  • sideBar.background#E7DEC9
  • sideBar.border#6D6959
  • sideBar.foreground#4F4E43
  • sideBarSectionHeader.background#E7DEC9
  • sideBarSectionHeader.border#6D6959
  • sideBarSectionHeader.foreground#4E4B42
  • sideBarTitle.foreground#4F4E43
  • statusBar.background#4A5246
  • statusBar.border#6d5959
  • statusBar.debuggingBackground#2E3335
  • statusBar.debuggingForeground#E7DEC9
  • statusBar.foreground#E7DEC9
  • statusBar.noFolderBackground#3BA49A
  • statusBar.noFolderForeground#E7DEC9
  • statusBarItem.activeBackground#E26352
  • statusBarItem.hoverBackground#727B5B
  • statusBarItem.prominentBackground#E26352
  • statusBarItem.prominentHoverBackground#727B5B
  • tab.activeBackground#8D8F7E
  • tab.activeForeground#E7DEC9
  • tab.border#E7DEC9
  • tab.hoverBackground#8D8F7E
  • tab.inactiveBackground#e7dec9
  • tab.inactiveForeground#5C5649
  • tab.unfocusedActiveForeground#E7DEC9
  • tab.unfocusedInactiveForeground#4E4B42
  • terminal.ansiBlack#3f3e32
  • terminal.ansiBlue#2a8ebe
  • terminal.ansiBrightBlack#515040
  • terminal.ansiBrightBlue#0078B4
  • terminal.ansiBrightCyan#4cb4cc
  • terminal.ansiBrightGreen#5DD462
  • terminal.ansiBrightMagenta#ff73d5
  • terminal.ansiBrightRed#ff0000
  • terminal.ansiBrightWhite#eff0e2
  • terminal.ansiBrightYellow#d7ac01
  • terminal.ansiCyan#0288a7
  • terminal.ansiGreen#358138
  • terminal.ansiMagenta#c77bb0
  • terminal.ansiRed#ff3200
  • terminal.ansiWhite#8d8f7e
  • terminal.ansiYellow#a38920
  • terminal.background#E7DEC9
  • terminal.foreground#4F4E43
  • titleBar.activeBackground#868373
  • titleBar.activeForeground#E7DEC9
  • titleBar.border#6D6959
  • titleBar.inactiveBackground#E7DEC9
  • titleBar.inactiveForeground#868373
  • walkThrough.embeddedEditorBackground#E7DEC9
  • widget.shadow#8D8F7E

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#358138
keyword.control, keyword.other#A452AA
keyword.function, keyword.type, keyword.struct#E26352
storage.type, keyword.var#0078B4
storage.modifier#A452AA
entity.name.type#006496
entity.name.function, support.function#8D6D27
entity.other.attribute-name#8D6D27
entity.name.tag#A452AA
entity.name.tag.wildcard#8D6D27
constant.numeric#358138
constant.language#0078B4
constant.language.bool#0078B4
support.constant.property-value, support.type.property-name#0078B4
string.template, string.quoted#BA5143
variable.parameter.function.language.special.self#0078B4
variable.parameter.function-call#8D6D27
meta.function-call#8D6D27
meta.selector#358138

Shiki preview

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

Loading...

Nier: Automata Theme by Israel Yago Pereira - VS Code Theme