Skip to main content
Coding Theme

Color themes

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#97bffc
  • activityBar.background#0f111a
  • activityBar.border#0f111a60
  • activityBar.dropBackground#c792ea40
  • activityBar.foreground#a6accd
  • activityBarBadge.background#97bffc
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#464b5d
  • breadcrumb.activeSelectionForeground#97bffc
  • breadcrumb.background#0f111a
  • breadcrumb.focusForeground#a6accd
  • breadcrumb.foreground#525975
  • breadcrumbPicker.background#0f111a
  • button.background#717cb450
  • button.foreground#ffffff
  • debugToolBar.background#0f111a
  • diffEditor.insertedTextBackground#53634620
  • diffEditor.removedTextBackground#ff9cac20
  • dropdown.background#0f111a
  • dropdown.border#ffffff10
  • editor.background#0f111a
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#c792ea
  • editor.findMatchHighlightBackground#c792ea20
  • editor.findMatchHighlightBorder#c792ea40
  • editor.findRangeHighlightBackground#c792ea40
  • editor.foreground#a6accd
  • editor.lineHighlightBackground#c792ea10
  • editor.lineHighlightBorder#c792ea00
  • editor.rangeHighlightBackground#ffffff0d
  • editor.selectionBackground#c792ea40
  • editor.selectionHighlightBackground#c792ea30
  • editor.wordHighlightBackground#c792ea40
  • editor.wordHighlightStrongBackground#c3e88d30
  • editorBracketMatch.background#0f111a
  • editorBracketMatch.border#c792ea70
  • editorCodeLens.foreground#46464e
  • editorCursor.foreground#ffcc00
  • editorError.foreground#f0717870
  • editorGroup.border#00000030
  • editorGroup.dropBackground#c792ea40
  • editorGroup.emptyBackground#0f111a
  • editorGroup.focusedEmptyBorder#f07178
  • editorGroupHeader.tabsBackground#0f111a
  • editorGutter.addedBackground#c3e88d60
  • editorGutter.deletedBackground#f0717860
  • editorGutter.modifiedBackground#82aaff60
  • editorHoverWidget.background#0f111a
  • editorHoverWidget.border#ffffff10
  • editorIndentGuide.activeBackground#3b3f51
  • editorIndentGuide.background#3b3f5170
  • editorInfo.foreground#82aaff70
  • editorLineNumber.activeForeground#525975
  • editorLineNumber.foreground#3b3f5180
  • editorLink.activeForeground#a6accd70
  • editorMarkerNavigation.background#a6accd05
  • editorOverviewRuler.addedForeground#c3e88d50
  • editorOverviewRuler.border#00000000
  • editorOverviewRuler.bracketMatchForeground#00000000
  • editorOverviewRuler.commonContentForeground#f07178
  • editorOverviewRuler.currentContentForeground#f07178
  • editorOverviewRuler.deletedForeground#f0717850
  • editorOverviewRuler.errorForeground#f07178
  • editorOverviewRuler.findMatchForeground#00000000
  • editorOverviewRuler.incomingContentForeground#f07178
  • editorOverviewRuler.infoForeground#00000000
  • editorOverviewRuler.modifiedForeground#82aaff50
  • editorOverviewRuler.rangeHighlightForeground#00000000
  • editorOverviewRuler.selectionHighlightForeground#00000000
  • editorOverviewRuler.warningForeground#CD973199
  • editorOverviewRuler.wordHighlightForeground#00000000
  • editorOverviewRuler.wordHighlightStrongForeground#00000000
  • editorRuler.foreground#3b3f51
  • editorSuggestWidget.background#0f111a
  • editorSuggestWidget.border#ffffff10
  • editorSuggestWidget.foreground#a6accd
  • editorSuggestWidget.highlightForeground#97bffc
  • editorSuggestWidget.selectedBackground#00000050
  • editorWarning.foreground#ffcb6b70
  • editorWhitespace.foreground#a6accd40
  • editorWidget.background#0f111a
  • editorWidget.border#97bffc
  • editorWidget.resizeBorder#97bffc
  • extensionBadge.remoteForeground#a6accd
  • extensionButton.prominentBackground#c3e88d90
  • extensionButton.prominentForeground#000000
  • extensionButton.prominentHoverBackground#c3e88d
  • focusBorder#ffffff00
  • foreground#a6accd
  • gitDecoration.conflictingResourceForeground#ffcb6b90
  • gitDecoration.deletedResourceForeground#f0717890
  • gitDecoration.ignoredResourceForeground#52597590
  • gitDecoration.modifiedResourceForeground#82aaff90
  • gitDecoration.untrackedResourceForeground#c3e88d90
  • gitlens.trailingLineForegroundColor#46464e
  • input.background#1a1c25
  • input.border#ffffff10
  • input.foreground#a6accd
  • input.placeholderForeground#a6accd60
  • inputOption.activeBackground#a6accd30
  • inputOption.activeBorder#a6accd30
  • inputValidation.errorBorder#f0717850
  • inputValidation.infoBorder#82aaff50
  • inputValidation.warningBorder#ffcb6b50
  • list.activeSelectionBackground#0f111a
  • list.activeSelectionForeground#97bffc
  • list.dropBackground#c792ea40
  • list.focusBackground#a6accd20
  • list.focusForeground#a6accd
  • list.highlightForeground#97bffc
  • list.hoverBackground#0f111a
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#00000030
  • list.inactiveSelectionForeground#97bffc
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#0f111a
  • menu.foreground#a6accd
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#97bffc
  • menu.separatorBackground#a6accd
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#97bffc
  • notificationLink.foreground#97bffc
  • notifications.background#0f111a
  • notifications.foreground#a6accd
  • panel.background#0f111a
  • panel.border#0f111a60
  • panel.dropBackground#a6accd
  • panelTitle.activeBorder#97bffc
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#a6accd
  • peekView.border#00000030
  • peekViewEditor.background#a6accd05
  • peekViewEditor.matchHighlightBackground#717cb450
  • peekViewEditorGutter.background#a6accd05
  • peekViewResult.background#a6accd05
  • peekViewResult.matchHighlightBackground#717cb450
  • peekViewResult.selectionBackground#52597570
  • peekViewTitle.background#a6accd05
  • peekViewTitleDescription.foreground#a6accd60
  • pickerGroup.border#ffffff1a
  • pickerGroup.foreground#97bffc
  • progressBar.background#97bffc
  • quickInput.background#0f111a
  • quickInput.foreground#525975
  • scrollbar.shadow#00000000
  • scrollbarSlider.activeBackground#97bffc
  • scrollbarSlider.background#8f93a220
  • scrollbarSlider.hoverBackground#8f93a210
  • selection.background#00000080
  • settings.checkboxBackground#0f111a
  • settings.checkboxForeground#a6accd
  • settings.dropdownBackground#0f111a
  • settings.dropdownForeground#a6accd
  • settings.headerForeground#97bffc
  • settings.modifiedItemIndicator#97bffc
  • settings.numberInputBackground#0f111a
  • settings.numberInputForeground#a6accd
  • settings.textInputBackground#0f111a
  • settings.textInputForeground#a6accd
  • sideBar.background#0f111a
  • sideBar.border#0f111a60
  • sideBar.foreground#525975
  • sideBarSectionHeader.background#0f111a
  • sideBarSectionHeader.border#0f111a60
  • sideBarTitle.foreground#a6accd
  • statusBar.background#0f111a
  • statusBar.border#0f111a60
  • statusBar.debuggingBackground#c792ea
  • statusBar.debuggingForeground#0f111a
  • statusBar.foreground#4b526d
  • statusBar.noFolderBackground#0f111a
  • statusBarItem.activeBackground#f0717880
  • statusBarItem.hoverBackground#464b5d20
  • statusBarItem.remoteBackground#97bffc
  • statusBarItem.remoteForeground#000000
  • tab.activeBackground#0f111a
  • tab.activeBorderTop#97bffc
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#525975
  • tab.border#0f111a
  • tab.inactiveBackground#0f111a
  • tab.inactiveForeground#525975
  • tab.inactiveModifiedBorder#904348
  • tab.unfocusedActiveBorder#464b5d
  • tab.unfocusedActiveForeground#a6accd
  • tab.unfocusedActiveModifiedBorder#c05a60
  • tab.unfocusedInactiveModifiedBorder#904348
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82aaff
  • terminal.ansiBrightBlack#464b5d
  • terminal.ansiBrightBlue#82aaff
  • terminal.ansiBrightCyan#89ddff
  • terminal.ansiBrightGreen#c3e88d
  • terminal.ansiBrightMagenta#c792ea
  • terminal.ansiBrightRed#f07178
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffcb6b
  • terminal.ansiCyan#89ddff
  • terminal.ansiGreen#c3e88d
  • terminal.ansiMagenta#c792ea
  • terminal.ansiRed#f07178
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffcb6b
  • terminal.selectionBackground#c792ea20
  • terminalCursor.background#000000
  • terminalCursor.foreground#ffcb6b
  • textLink.activeForeground#a6accd
  • textLink.foreground#97bffc
  • titleBar.activeBackground#0f111a
  • titleBar.activeForeground#a6accd
  • titleBar.border#0f111a60
  • titleBar.inactiveBackground#0f111a
  • titleBar.inactiveForeground#525975
  • tree.indentGuidesStroke#3b3f51
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment, punctuation.definition.comment#b6b5cca1italic
variable, string constant.other.placeholder#d4f5f5italic
constant.other.color#ffffff
invalid, invalid.illegal#e9f3b7
keyword, storage.type, storage.modifier#be8fda
keyword.control, constant.other.color, punctuation, meta.tag, punctuation.definition.tag, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution#9dd2e8
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#eeadf1
entity.name.function, meta.function-call, variable.function, support.function, keyword.other.special-method#e2c3b2
meta.block variable.other#f7c1a7
support.other.variable, string.other.link#f7c1a7
constant.numeric, constant.language, support.constant, constant.character, constant.escape, variable.parameter, keyword.other.unit, keyword.other#e9f3b7italic
string, constant.other.symbol, constant.other.key, markup.heading, markup.inserted.git_gutter#8ec3f9
entity.other.inherited-class, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#a5ffe2
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#a5ffe2
support.type#B2CCD6
source.css support.type.property-name, source.sass support.type.property-name, source.scss support.type.property-name, source.less support.type.property-name, source.stylus support.type.property-name, source.postcss support.type.property-name#b2f9e9
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#e9f3b7
variable.language#e9f3b7italic
entity.name.method.js#9dd2e8italic
meta.class-method.js entity.name.function.js, variable.function.constructor#e2c3b2
entity.other.attribute-name#cde0be
text.html.basic entity.other.attribute-name.html, text.html.basic entity.other.attribute-name#bde5f5italic
entity.other.attribute-name.class#e2c3b2
source.sass keyword.control#e2c3b2
markup.inserted#C3E88D
markup.deleted#e9f3b7
markup.changed#be8fda
string.regexp#9dd2e8italic
constant.character.escape#9dd2e8
*url*, *link*, *uri*underline
tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#9dd2e8italic
source.js constant.other.object.key.js string.unquoted.label.js#e9f3b7italic
source.json meta.structure.dictionary.json support.type.property-name.json#be8fda
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#eccdcd
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e9f3b7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e9f3b7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C17E70
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#e2c3b2
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#f7c1a7
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#be8fda
source.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json meta.structure.dictionary.value.json meta.structure.dictionary.json support.type.property-name.json#C3E88D
text.html.markdown, punctuation.definition.list_item.markdown#EEFFFF
text.html.markdown markup.inline.raw.markdown#be8fda
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#65737E
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown#a5ffe2
markup.italic#f7c1a7italic
markup.bold, markup.bold string#f7c1a7bold
markup.bold markup.italic, markup.italic markup.bold, markup.quote markup.bold, markup.bold markup.italic string, markup.italic markup.bold string, markup.quote markup.bold string#f7c1a7bold
markup.underline#e9f3b7underline
markup.quote punctuation.definition.blockquote.markdown#65737E
markup.quoteitalic
string.other.link.title.markdown#e2c3b2
string.other.link.description.title.markdown#be8fda
constant.other.reference.link.markdown#bde5f5
markup.raw.block#be8fda
markup.raw.block.fenced.markdown#00000050
punctuation.definition.fenced.markdown#00000050
markup.raw.block.fenced.markdown, variable.language.fenced.markdown, punctuation.section.class.end#EEFFFF
variable.language.fenced.markdown#65737E
markup.inline.raw.string.markdown#eeadf1
meta.separator#65737Ebold
markup.table#EEFFFF
variable.other.readwrite.alias.ts, variable.other.readwrite.alias.tsx, variable.other.readwrite.ts, variable.other.readwrite.tsx, variable.other.object.ts, variable.other.object.tsx, variable.object.property.ts, variable.object.property.tsx, variable.other.ts, variable.other.tsx, variable.tsx, variable.ts#a5ffe2
entity.name.tag.yaml#a5ffe2
source.go constant.language.go, source.go constant.other.placeholder.go#cde0be
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#cde0be
meta.namespace-block.cpp#65737E
storage.type.language.primitive.cpp#ff5874
meta.preprocessor.macro.cpp#EEFFFF
variable.parameter#cde0be
string.interpolated.single.dart, string.interpolated.double.dart#ff5874
support.class.dart#EEFFFF
variable.other.ruby#be8fdaitalic
August Themes by inci-august - VS Code Theme