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.activeBorder#0f9
  • activityBar.background#141414
  • activityBar.border#ccc1
  • activityBar.foreground#0f9
  • activityBar.inactiveForeground#ccc8
  • activityBarBadge.background#0f9
  • activityBarBadge.foreground#000
  • badge.background#0f9
  • badge.foreground#000
  • banner.background#1e1e1e
  • banner.foreground#ccc
  • banner.iconForeground#0f9
  • breadcrumb.activeSelectionForeground#ccc
  • breadcrumb.focusForeground#ccc
  • breadcrumb.foreground#ccc8
  • breadcrumbPicker.background#1e1e1e
  • button.background#0f9
  • button.foreground#000
  • button.hoverBackground#66ffc2
  • button.secondaryBackground#282828
  • button.secondaryForeground#ccc
  • button.secondaryHoverBackground#323232
  • checkbox.background#282828
  • checkbox.border#ccc1
  • commandCenter.activeBackground#323232
  • commandCenter.activeBorder#0f9
  • commandCenter.activeForeground#ccc
  • commandCenter.background#282828
  • commandCenter.border#ccc1
  • commandCenter.foreground#ccc8
  • debugToolBar.background#1e1e1e
  • descriptionForeground#ccc8
  • diffEditor.insertedTextBackground#29ae4830
  • diffEditor.removedTextBackground#d73a4930
  • dropdown.background#1e1e1e
  • dropdown.border#ccc1
  • dropdown.foreground#ccc
  • dropdown.listBackground#141414
  • editor.background#141414
  • editor.findMatchBackground#00ff9944
  • editor.findMatchHighlightBackground#00ff9922
  • editor.focusedStackFrameHighlightBackground#2c6d3133
  • editor.foldBackground#ccc1
  • editor.foreground#ccc
  • editor.inactiveSelectionBackground#00ff9922
  • editor.lineHighlightBackground#00ff9915
  • editor.linkedEditingBackground#00ff9922
  • editor.selectionBackground#00ff9944
  • editor.selectionHighlightBackground#00ff9933
  • editor.selectionHighlightBorder#00ff9900
  • editor.stackFrameHighlightBackground#c9912226
  • editor.wordHighlightBackground#00ff9900
  • editor.wordHighlightBorder#00ff9999
  • editor.wordHighlightStrongBackground#00ff9900
  • editor.wordHighlightStrongBorder#00ff9966
  • editorActionList.background#1e1e1e
  • editorActionList.focusBackground#0f93
  • editorActionList.focusForeground#ccc
  • editorActionList.foreground#ccc
  • editorBracketHighlight.foreground1#61abff
  • editorBracketHighlight.foreground2#ffa05c
  • editorBracketHighlight.foreground3#a075f0
  • editorBracketHighlight.foreground4#61abff
  • editorBracketHighlight.foreground5#ffa05c
  • editorBracketHighlight.foreground6#a075f0
  • editorBracketMatch.background#00ff9950
  • editorBracketMatch.border#00ff9900
  • editorCursor.foreground#0F9
  • editorError.foreground#fb606f
  • editorGroup.border#ccc1
  • editorGroup.dropBackground#0f93
  • editorGroupHeader.tabsBackground#0a0a0a
  • editorGroupHeader.tabsBorder#ccc1
  • editorGutter.addedBackground#29ae48
  • editorGutter.deletedBackground#eb4758
  • editorGutter.modifiedBackground#248aff
  • editorHoverWidget.background#1e1e1e
  • editorHoverWidget.border#ccc1
  • editorHoverWidget.foreground#ccc
  • editorIndentGuide.activeBackground#ccc9
  • editorIndentGuide.background#ccc3
  • editorLightBulb.foreground#0f9
  • editorLightBulbAi.foreground#0f9
  • editorLightBulbAutoFix.foreground#0f9
  • editorLineNumber.activeForeground#ccc
  • editorLineNumber.foreground#ccc3
  • editorOverviewRuler.border#ccc1
  • editorWarning.foreground#ffea7f
  • editorWhitespace.foreground#ccc3
  • editorWidget.background#1e1e1e
  • errorForeground#fb606f
  • extensionIcon.preReleaseForeground#0f9
  • extensionIcon.privateForeground#0f9
  • extensionIcon.sponsorForeground#0f9
  • extensionIcon.starForeground#0f9
  • extensionIcon.verifiedForeground#0f9
  • focusBorder#0f9
  • foreground#ccc
  • gitDecoration.addedResourceForeground#37d25b
  • gitDecoration.conflictingResourceForeground#ffa05c
  • gitDecoration.deletedResourceForeground#eb4758
  • gitDecoration.ignoredResourceForeground#ccc9
  • gitDecoration.modifiedResourceForeground#61abff
  • gitDecoration.submoduleResourceForeground#ccc9
  • gitDecoration.untrackedResourceForeground#37d25b
  • icon.foreground#ccc
  • input.background#282828
  • input.border#ccc1
  • input.foreground#ccc
  • input.placeholderForeground#ccc8
  • keybindingLabel.background#282828
  • keybindingLabel.border#ccc1
  • keybindingLabel.bottomBorder#ccc1
  • keybindingLabel.foreground#ccc
  • keybindingTable.headerBackground#282828
  • keybindingTable.rowsBackground#1e1e1e
  • list.activeSelectionBackground#0f99
  • list.activeSelectionForeground#ccc
  • list.dropBackground#0f93
  • list.focusBackground#0f93
  • list.focusHighlightForeground#0f9
  • list.highlightForeground#0f9
  • list.hoverBackground#0f93
  • list.hoverForeground#ccc
  • list.inactiveFocusBackground#0f93
  • list.inactiveSelectionBackground#0f96
  • list.inactiveSelectionForeground#ccc
  • menu.background#1e1e1e
  • menu.border#ccc1
  • menu.foreground#ccc
  • menu.selectionBackground#0f93
  • menu.selectionForeground#ccc
  • menu.separatorBackground#ccc8
  • menubar.selectionBackground#0f93
  • menubar.selectionForeground#ccc
  • minimap.background#141414
  • minimap.findMatchHighlight#0f99
  • minimap.selectionHighlight#0f96
  • notificationCenterHeader.background#1e1e1e
  • notificationCenterHeader.foreground#ccc
  • notifications.background#1e1e1e
  • notifications.border#ccc1
  • notifications.foreground#ccc
  • notificationsErrorIcon.foreground#eb4758
  • notificationsInfoIcon.foreground#0f9
  • notificationsWarningIcon.foreground#ffa05c
  • panel.background#141414
  • panel.border#ccc1
  • panel.dropBorder#0f9
  • panelInput.border#ccc1
  • panelTitle.activeBorder#0f9
  • panelTitle.activeForeground#ccc
  • panelTitle.inactiveForeground#ccc8
  • peekViewEditor.background#141414
  • peekViewEditor.matchHighlightBackground#0f93
  • peekViewResult.background#1e1e1e
  • peekViewResult.matchHighlightBackground#0f93
  • pickerGroup.border#ccc8
  • pickerGroup.foreground#ccc
  • profileBadge.background#0f9
  • profileBadge.foreground#000
  • profiles.sashBorder#141414
  • progressBar.background#0f9
  • quickInput.background#141414
  • quickInput.foreground#ccc
  • quickInputList.focusBackground#0f93
  • quickInputList.focusIconForeground#ccc
  • scrollbar.shadow#0008
  • scrollbarSlider.activeBackground#ccc9
  • scrollbarSlider.background#ccc3
  • scrollbarSlider.hoverBackground#ccc6
  • selection.background#0f93
  • settings.headerForeground#ccc
  • settings.modifiedItemIndicator#0f9
  • sideBar.background#0a0a0a
  • sideBar.border#ccc1
  • sideBar.dropBackground#0f93
  • sideBar.foreground#ccc
  • sideBarSectionHeader.background#0a0a0a
  • sideBarSectionHeader.border#0000
  • sideBarSectionHeader.foreground#ccc
  • sideBarTitle.foreground#ccc
  • statusBar.background#141414
  • statusBar.border#ccc1
  • statusBar.debuggingBackground#931c06
  • statusBar.debuggingForeground#fff
  • statusBar.focusBorder#0f9
  • statusBar.foreground#ccc
  • statusBar.noFolderBackground#141414
  • statusBarItem.compactHoverBackground#0f98
  • statusBarItem.focusBorder#0f9
  • statusBarItem.hoverBackground#0f93
  • statusBarItem.prominentForeground#ccc
  • statusBarItem.prominentHoverBackground#0f93
  • statusBarItem.remoteBackground#141414
  • statusBarItem.remoteForeground#ccc
  • statusBarItem.remoteHoverBackground#0f93
  • statusBarItem.remoteHoverForeground#ccc
  • symbolIcon.arrayForeground#0f9
  • symbolIcon.booleanForeground#0f9
  • symbolIcon.classForeground#0f9
  • symbolIcon.colorForeground#0f9
  • symbolIcon.constantForeground#0f9
  • symbolIcon.constructorForeground#0f9
  • symbolIcon.enumeratorForeground#0f9
  • symbolIcon.enumeratorMemberForeground#0f9
  • symbolIcon.eventForeground#0f9
  • symbolIcon.fieldForeground#0f9
  • symbolIcon.fileForeground#0f9
  • symbolIcon.folderForeground#0f9
  • symbolIcon.functionForeground#0f9
  • symbolIcon.interfaceForeground#0f9
  • symbolIcon.keyForeground#0f9
  • symbolIcon.keywordForeground#0f9
  • symbolIcon.methodForeground#0f9
  • symbolIcon.moduleForeground#0f9
  • symbolIcon.namespaceForeground#0f9
  • symbolIcon.nullForeground#0f9
  • symbolIcon.numberForeground#0f9
  • symbolIcon.objectForeground#0f9
  • symbolIcon.operatorForeground#0f9
  • symbolIcon.packageForeground#0f9
  • symbolIcon.propertyForeground#0f9
  • symbolIcon.referenceForeground#0f9
  • symbolIcon.snippetForeground#0f9
  • symbolIcon.stringForeground#0f9
  • symbolIcon.structForeground#0f9
  • symbolIcon.textForeground#0f9
  • symbolIcon.typeParameterForeground#0f9
  • symbolIcon.unitForeground#0f9
  • symbolIcon.variableForeground#0f9
  • tab.activeBackground#141414
  • tab.activeBorder#141414
  • tab.activeBorderTop#0f9
  • tab.activeForeground#ccc
  • tab.border#ccc1
  • tab.dragAndDropBorder#0f9
  • tab.hoverBackground#0f93
  • tab.hoverForeground#ccc
  • tab.inactiveBackground#0a0a0a
  • tab.inactiveForeground#ccc8
  • tab.unfocusedActiveBorder#141414
  • tab.unfocusedActiveBorderTop#0000
  • tab.unfocusedHoverBackground#0f93
  • tab.unfocusedHoverForeground#ccc
  • terminal.ansiBlack#515961
  • terminal.ansiBlue#248aff
  • terminal.ansiBrightBlack#959da5
  • terminal.ansiBrightBlue#61abff
  • terminal.ansiBrightCyan#56d4dd
  • terminal.ansiBrightGreen#85e89d
  • terminal.ansiBrightMagenta#a075f0
  • terminal.ansiBrightRed#fb606f
  • terminal.ansiBrightWhite#fafbfc
  • terminal.ansiBrightYellow#ffea7f
  • terminal.ansiCyan#39c5cf
  • terminal.ansiGreen#37d25b
  • terminal.ansiMagenta#a075f0
  • terminal.ansiRed#eb4758
  • terminal.ansiWhite#d5d8dd
  • terminal.ansiYellow#ffea7f
  • terminal.foreground#ccc
  • terminal.tab.activeBorder#0f9
  • terminalCursor.background#000
  • terminalCursor.foreground#0f9
  • textBlockQuote.background#141414
  • textBlockQuote.border#ccc8
  • textCodeBlock.background#1e1e1e
  • textLink.activeForeground#66ffc2
  • textLink.foreground#0f9
  • textPreformat.foreground#ccc
  • textSeparator.foreground#ccc8
  • titleBar.activeBackground#141414
  • titleBar.activeForeground#ccc
  • titleBar.border#ccc1
  • titleBar.inactiveBackground#141414
  • titleBar.inactiveForeground#ccc8
  • toolbar.activeBackground#0f93
  • toolbar.hoverBackground#0f93
  • tree.indentGuidesStroke#ccc3
  • walkthrough.stepTitle.foreground#ccc
  • welcomePage.buttonBackground#282828
  • welcomePage.buttonHoverBackground#323232
  • widget.border#ccc1
  • widget.shadow#0008

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment, string.comment#ccc8
constant, entity.name.constant, variable.other.constant, variable.other.enummember, variable.language#61abff
entity, entity.name#a075f0
variable.parameter.function#ccc
entity.name.tag#0f9
keyword#fb606f
storage, storage.type#fb606f
storage.modifier.package, storage.modifier.import, storage.type.java#ccc
string, punctuation.definition.string, string punctuation.section.embedded source#8fc3ff
support#61abff
meta.property-name#61abff
variable#ffa05c
variable.other#ccc
invalid.broken#ff9ea9italic
invalid.deprecated#ff9ea9italic
invalid.illegal#ff9ea9italic
invalid.unimplemented#ff9ea9italic
carriage-return#141414italic underline
message.error#ff9ea9
string variable#61abff
source.regexp, string.regexp#cce6ff
string.regexp.character-class, string.regexp constant.character.escape, string.regexp source.ruby.embedded, string.regexp string.regexp.arbitrary-repitition#cce6ff
string.regexp constant.character.escape#0f9bold
support.constant#61abff
support.variable#61abff
meta.module-reference#61abff
punctuation.definition.list.begin.markdown#ffa05c
markup.heading, markup.heading entity.name#61abffbold
markup.quote#0f9
markup.italic#cccitalic
markup.bold#cccbold
markup.underlineunderline
markup.strikethroughstrikethrough
markup.inline.raw#61abff
markup.deleted, meta.diff.header.from-file, punctuation.definition.deleted#ff9ea9
markup.inserted, meta.diff.header.to-file, punctuation.definition.inserted#0f9
markup.changed, punctuation.definition.changed#ffa05c
markup.ignored, markup.untracked#282828
meta.diff.range#a075f0bold
meta.diff.header#61abff
meta.separator#61abffbold
meta.output#61abff
brackethighlighter.tag, brackethighlighter.curly, brackethighlighter.round, brackethighlighter.square, brackethighlighter.angle, brackethighlighter.quote#ccc
brackethighlighter.unmatched#ff9ea9
constant.other.reference.link, string.other.link#cce6ffunderline
Atomwave Theme by Nuttshell_Man - VS Code Theme