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#000000
  • activityBar.border#00FF41
  • activityBar.foreground#00FF41
  • activityBar.inactiveForeground#333333
  • activityBarBadge.background#00FF41
  • activityBarBadge.foreground#000000
  • badge.background#00FF41
  • badge.foreground#000000
  • breadcrumb.activeSelectionForeground#00FF41
  • breadcrumb.focusForeground#00FF41
  • breadcrumb.foreground#00802a
  • breadcrumbPicker.background#0a0a0a
  • button.background#00FF41
  • button.foreground#000000
  • button.hoverBackground#00802a
  • button.secondaryBackground#1a1a1a
  • button.secondaryForeground#00FF41
  • button.secondaryHoverBackground#333333
  • chat.requestBackground#0a0a0a
  • chat.requestBorder#00FF41
  • chat.slashCommandBackground#00FF4120
  • chat.slashCommandForeground#00FF41
  • chatInput.background#0a0a0a
  • chatInput.border#00FF41
  • chatInput.foreground#FFFFFF
  • chatInput.placeholderForeground#666666
  • debugIcon.breakpointForeground#00FF41
  • debugIcon.startForeground#00FF41
  • debugToolBar.background#000000
  • descriptionForeground#666666
  • diffEditor.border#00FF41
  • diffEditor.insertedTextBackground#00FF4115
  • diffEditor.removedTextBackground#66666615
  • dropdown.background#0a0a0a
  • dropdown.border#00FF41
  • dropdown.foreground#C8C8C8
  • editor.background#000000
  • editor.findMatchBackground#00FF4140
  • editor.findMatchHighlightBackground#00FF4120
  • editor.foreground#A0C8A0
  • editor.hoverHighlightBackground#00FF4115
  • editor.inactiveSelectionBackground#00FF4118
  • editor.lineHighlightBackground#00FF4108
  • editor.rangeHighlightBackground#00FF4110
  • editor.selectionBackground#00FF4130
  • editor.selectionHighlightBackground#00FF4115
  • editor.wordHighlightBackground#00FF4120
  • editor.wordHighlightStrongBackground#00FF4130
  • editorBracketHighlight.foreground1#00802a
  • editorBracketHighlight.foreground2#C8C8C8
  • editorBracketHighlight.foreground3#888888
  • editorBracketHighlight.foreground4#00802a
  • editorBracketHighlight.foreground5#C8C8C8
  • editorBracketHighlight.foreground6#888888
  • editorBracketMatch.background#00FF4120
  • editorBracketMatch.border#00FF41
  • editorCursor.foreground#00FF41
  • editorGroup.border#00FF41
  • editorGroupHeader.noTabsBackground#000000
  • editorGroupHeader.tabsBackground#000000
  • editorGutter.addedBackground#00802a
  • editorGutter.deletedBackground#666666
  • editorGutter.modifiedBackground#00FF41
  • editorLineNumber.activeForeground#00FF41
  • editorLineNumber.foreground#4a4a4a
  • editorOverviewRuler.border#000000
  • editorRuler.foreground#1a1a1a
  • editorWhitespace.foreground#222222
  • editorWidget.border#00FF41
  • errorForeground#00FF41
  • focusBorder#00FF41
  • foreground#C8C8C8
  • gitDecoration.addedResourceForeground#00FF41
  • gitDecoration.conflictingResourceForeground#888888
  • gitDecoration.deletedResourceForeground#666666
  • gitDecoration.ignoredResourceForeground#333333
  • gitDecoration.modifiedResourceForeground#00802a
  • gitDecoration.untrackedResourceForeground#00FF41
  • icon.foreground#00FF41
  • inlineChat.background#0a0a0a
  • inlineChat.border#00FF41
  • inlineChatInput.background#0a0a0a
  • inlineChatInput.border#00FF41
  • inlineChatInput.focusBorder#00FF41
  • inlineChatInput.placeholderForeground#666666
  • input.background#0a0a0a
  • input.border#00FF41
  • input.foreground#C8C8C8
  • input.placeholderForeground#666666
  • inputOption.activeBackground#00FF4130
  • inputOption.activeBorder#00FF41
  • inputValidation.errorBackground#000000
  • inputValidation.errorBorder#666666
  • inputValidation.infoBackground#000000
  • inputValidation.infoBorder#00FF41
  • inputValidation.warningBackground#000000
  • inputValidation.warningBorder#00802a
  • interactive.activeCodeBorder#00FF41
  • interactive.inactiveCodeBorder#333333
  • list.activeSelectionBackground#00FF4125
  • list.activeSelectionForeground#00FF41
  • list.errorForeground#888888
  • list.focusBackground#00FF4120
  • list.focusForeground#00FF41
  • list.highlightForeground#00FF41
  • list.hoverBackground#0a0a0a
  • list.hoverForeground#00FF41
  • list.inactiveSelectionBackground#00FF4115
  • list.inactiveSelectionForeground#00FF41
  • list.warningForeground#00802a
  • merge.currentContentBackground#00FF4115
  • merge.currentHeaderBackground#00FF4130
  • merge.incomingContentBackground#00802a20
  • merge.incomingHeaderBackground#00802a40
  • minimap.findMatchHighlight#00ff407e
  • minimap.selectionHighlight#00FF4140
  • minimapGutter.addedBackground#00802a
  • minimapGutter.deletedBackground#666666
  • minimapGutter.modifiedBackground#00FF41
  • notificationCenterHeader.background#000000
  • notificationCenterHeader.foreground#00FF41
  • notifications.background#0a0a0a
  • notifications.border#00FF41
  • notifications.foreground#C8C8C8
  • panel.background#000000
  • panel.border#00FF41
  • panelTitle.activeBorder#00FF41
  • panelTitle.activeForeground#00FF41
  • panelTitle.inactiveForeground#666666
  • peekView.border#00FF41
  • peekViewEditor.background#0a0a0a
  • peekViewEditor.matchHighlightBackground#00FF4130
  • peekViewResult.background#000000
  • peekViewResult.matchHighlightBackground#00FF4130
  • peekViewResult.selectionBackground#00FF4130
  • peekViewResult.selectionForeground#00FF41
  • peekViewTitle.background#000000
  • peekViewTitleDescription.foreground#666666
  • peekViewTitleLabel.foreground#00FF41
  • progressBar.background#00FF41
  • quickInput.background#0a0a0a
  • quickInput.foreground#C8C8C8
  • quickInputList.focusBackground#00FF4120
  • quickInputList.focusForeground#00FF41
  • quickInputTitle.background#000000
  • scrollbar.shadow#000000
  • scrollbarSlider.activeBackground#00FF4160
  • scrollbarSlider.background#00FF4120
  • scrollbarSlider.hoverBackground#00FF4140
  • selection.background#00FF4130
  • settings.checkboxBackground#0a0a0a
  • settings.checkboxBorder#00FF41
  • settings.checkboxForeground#00FF41
  • settings.dropdownBackground#0a0a0a
  • settings.dropdownBorder#00FF41
  • settings.headerForeground#00FF41
  • settings.modifiedItemIndicator#00FF41
  • settings.numberInputBackground#0a0a0a
  • settings.numberInputBorder#00FF41
  • settings.textInputBackground#0a0a0a
  • settings.textInputBorder#00FF41
  • sideBar.background#000000
  • sideBar.border#00FF41
  • sideBar.foreground#00FF41
  • sideBarSectionHeader.background#000000
  • sideBarSectionHeader.border#00FF4140
  • sideBarSectionHeader.foreground#00FF41
  • sideBarTitle.foreground#00FF41
  • statusBar.background#000000
  • statusBar.border#00FF41
  • statusBar.debuggingBackground#00802a
  • statusBar.debuggingForeground#000000
  • statusBar.foreground#00FF41
  • statusBar.noFolderBackground#000000
  • statusBar.noFolderForeground#666666
  • statusBarItem.hoverBackground#00FF4130
  • statusBarItem.remoteBackground#00FF41
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#0a0a0a
  • tab.activeBorderTop#00FF41
  • tab.activeForeground#00FF41
  • tab.border#000000
  • tab.inactiveBackground#000000
  • tab.inactiveForeground#666666
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#00802a
  • terminal.ansiBrightBlack#333333
  • terminal.ansiBrightBlue#00FF41
  • terminal.ansiBrightCyan#00FF41
  • terminal.ansiBrightGreen#00FF41
  • terminal.ansiBrightMagenta#888888
  • terminal.ansiBrightRed#888888
  • terminal.ansiBrightWhite#FFFFFF
  • terminal.ansiBrightYellow#00FF41
  • terminal.ansiCyan#00802a
  • terminal.ansiGreen#00FF41
  • terminal.ansiMagenta#666666
  • terminal.ansiRed#666666
  • terminal.ansiWhite#C8C8C8
  • terminal.ansiYellow#00802a
  • terminal.background#000000
  • terminal.foreground#00FF41
  • terminalCursor.foreground#00FF41
  • titleBar.activeBackground#000000
  • titleBar.activeForeground#00FF41
  • titleBar.border#00FF41
  • titleBar.inactiveBackground#000000
  • titleBar.inactiveForeground#333333
  • tree.indentGuidesStroke#1a1a1a
  • walkThrough.embeddedEditorBackground#000000
  • welcomePage.tileBackground#0a0a0a
  • welcomePage.tileBorder#00FF4140
  • widget.shadow#00000080

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
#A0C8A0
comment, punctuation.definition.comment#4a7a4aitalic
keyword, keyword.control, keyword.operator.new, keyword.operator.expression, keyword.operator.logical, storage, storage.type, storage.modifier#00802a
string, string.quoted, string.template#C8C8C8
constant.numeric, constant.language, constant.character#00802a
entity.name.function, support.function, meta.function-call#00802a
entity.name.type, entity.name.class, support.type, support.class, entity.other.inherited-class#C8C8C8
variable, variable.parameter, variable.other, meta.definition.variable#A0C8A0
keyword.operator, punctuation#888888
entity.name.tag, punctuation.definition.tag#00802a
entity.other.attribute-name#C8C8C8
support.type.property-name.css, meta.property-name#C8C8C8
support.constant.property-value.css, meta.property-value#C8C8C8
meta.decorator, meta.annotation#C8C8C8
markup.heading#00802abold
markup.bold#A0C8A0bold
markup.italic#A0C8A0italic
markup.inline.raw, markup.fenced_code#C8C8C8
markup.underline.link#00802a
support.type.property-name.json#00802a
string.regexp#C8C8C8
invalid, invalid.deprecated#888888strikethrough
Quiet Hacker by Manuel Artero - VS Code Theme