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.background#0e0d1a
  • activityBar.border#5966cc50
  • activityBar.foreground#dddfe9
  • activityBarBadge.background#8c97ea
  • activityBarBadge.foreground#0e0d1a
  • badge.background#0e0d1a30
  • badge.foreground#5966cc
  • breadcrumb.activeSelectionForeground#5966cc
  • breadcrumb.background#0e0d1a
  • breadcrumb.focusForeground#dddfe9
  • breadcrumb.foreground#6a77d8
  • breadcrumbPicker.background#0e0d1a
  • button.background#5966cc50
  • contrastBorder#5966cc50
  • debugToolBar.background#0e0d1a
  • diffEditor.insertedTextBackground#c800be15
  • diffEditor.removedTextBackground#01d64820
  • dropdown.background#0e0d1a
  • dropdown.border#ffffff10
  • editor.background#0e0d1a
  • editor.findMatchBackground#0e0d1a
  • editor.findMatchBorder#5966cc
  • editor.findMatchHighlightBackground#5966cc93
  • editor.findMatchHighlightBorder#ffffff30
  • editor.foreground#dddfe9
  • editor.lineHighlightBackground#0e0d1a50
  • editor.selectionBackground#8c97ea30
  • editor.selectionHighlightBackground#5966cc6b
  • editor.selectionHighlightBorder#8c97eaf0
  • editorBracketMatch.background#0e0d1a
  • editorBracketMatch.border#ff00f27f
  • editorCursor.foreground#ff00f2
  • editorError.foreground#ffe553
  • editorGroup.border#5966cc50
  • editorGroupHeader.tabsBackground#0e0d1a
  • editorGutter.addedBackground#c800be60
  • editorGutter.deletedBackground#01d64860
  • editorGutter.modifiedBackground#8c97ea60
  • editorHoverWidget.background#0e0d1a
  • editorHoverWidget.border#ffffff10
  • editorIndentGuide.activeBackground#383b3d
  • editorIndentGuide.background#383b3d70
  • editorInfo.foreground#8c97ea70
  • editorLineNumber.activeForeground#8c97ea
  • editorLineNumber.foreground#5966ccc0
  • editorLink.activeForeground#dddfe9
  • editorMarkerNavigation.background#dddfe905
  • editorOverviewRuler.border#0e0d1a
  • editorOverviewRuler.errorForeground#01d64840
  • editorOverviewRuler.findMatchForeground#5966cc
  • editorOverviewRuler.infoForeground#8c97ea40
  • editorOverviewRuler.warningForeground#ff000070
  • editorRuler.foreground#383b3d
  • editorSuggestWidget.background#0e0d1a
  • editorSuggestWidget.border#ffffff10
  • editorSuggestWidget.foreground#dddfe9
  • editorSuggestWidget.highlightForeground#ff00f2
  • editorSuggestWidget.selectedBackground#5966cc20
  • editorWarning.foreground#c800be
  • editorWhitespace.foreground#dddfe940
  • editorWidget.background#0e0d1a
  • editorWidget.border#ff00f2
  • editorWidget.resizeBorder#5966cc
  • extensionButton.prominentBackground#c800be90
  • extensionButton.prominentHoverBackground#01d648
  • focusBorder#ffffff00
  • gitDecoration.conflictingResourceForeground#ff00f2
  • gitDecoration.deletedResourceForeground#ff00f2
  • gitDecoration.ignoredResourceForeground#8c97ea
  • gitDecoration.modifiedResourceForeground#8c97ea
  • gitDecoration.untrackedResourceForeground#8c97ea
  • input.background#1d1e38
  • input.border#ffffff10
  • input.foreground#dddfe9
  • input.placeholderForeground#dddfe960
  • inputOption.activeBackground#dddfe930
  • inputOption.activeBorder#dddfe930
  • inputValidation.errorBorder#01d64850
  • inputValidation.infoBorder#8c97ea50
  • inputValidation.warningBorder#ff00f250
  • list.activeSelectionBackground#0e0d1a
  • list.activeSelectionForeground#5966cc
  • list.focusBackground#1d1e38
  • list.focusForeground#8c97ea
  • list.highlightForeground#5966cc
  • list.hoverBackground#5966cc30
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#0e0d1a30
  • list.inactiveSelectionForeground#5966cc
  • list.warningForeground#ff00f2
  • listFilterWidget.background#0e0d1a30
  • listFilterWidget.noMatchesOutline#0e0d1a30
  • listFilterWidget.outline#0e0d1a30
  • menu.background#0e0d1af8
  • menu.border#5966cc50
  • menu.foreground#dddfe9
  • menu.selectionBackground#5966cc30
  • menu.selectionBorder#0e0d1a30
  • menu.selectionForeground#dddfe9
  • menu.separatorBackground#5966cc9f
  • menubar.selectionBackground#1b184b
  • menubar.selectionBorder#5966cc50
  • menubar.selectionForeground#dddfe9
  • minimap.background#141325
  • minimapGutter.addedBackground#ff00f2
  • minimapGutter.deletedBackground#ff00f2
  • minimapGutter.modifiedBackground#ff00f2
  • minimapSlider.activeBackground#5966ccb0
  • minimapSlider.background#5966cc80
  • minimapSlider.hoverBackground#5966cca0
  • notificationLink.foreground#5966cc
  • notifications.background#0e0d1a
  • notifications.foreground#dddfe9
  • panel.background#0e0d1a
  • panel.border#5966cc50
  • panelTitle.activeBorder#5966cc
  • panelTitle.activeForeground#ffffff
  • panelTitle.inactiveForeground#dddfe9
  • peekView.border#0e0d1a30
  • peekViewEditor.background#dddfe905
  • peekViewEditor.matchHighlightBackground#5966cc50
  • peekViewEditorGutter.background#dddfe905
  • peekViewResult.background#dddfe905
  • peekViewResult.matchHighlightBackground#5966cc50
  • peekViewResult.selectionBackground#5966cc70
  • peekViewTitle.background#dddfe905
  • peekViewTitleDescription.foreground#dddfe960
  • pickerGroup.foreground#5966cc
  • progressBar.background#5966cc
  • quickInputList.focusBackground#5966cc30
  • quickInputList.focusForeground#b6bdf2
  • scrollbar.shadow#0e0d1a00
  • scrollbarSlider.activeBackground#5966cc
  • scrollbarSlider.background#5966cc
  • scrollbarSlider.hoverBackground#5966cc
  • selection.background#5966cc
  • settings.checkboxBackground#0e0d1a
  • settings.checkboxForeground#dddfe9
  • settings.dropdownBackground#0e0d1a
  • settings.dropdownForeground#dddfe9
  • settings.headerForeground#5966cc
  • settings.modifiedItemIndicator#5966cc
  • settings.numberInputBackground#0e0d1a
  • settings.numberInputForeground#dddfe9
  • settings.textInputBackground#0e0d1a
  • settings.textInputForeground#dddfe9
  • sideBar.background#0e0d1a
  • sideBar.border#5966cc50
  • sideBar.foreground#8c97ea
  • sideBarSectionHeader.background#0e0d1a
  • sideBarSectionHeader.border#0e0d1a60
  • sideBarSectionHeader.foreground#8c97ea
  • sideBarTitle.foreground#dddfe9
  • statusBar.background#2c2772
  • statusBar.border#0e0d1a60
  • statusBar.debuggingBackground#ff00f2
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#c4cbff
  • statusBar.noFolderBackground#0e0d1a
  • statusBarItem.hoverBackground#5966cc20
  • statusBarItem.remoteBackground#5966cc
  • statusBarItem.remoteForeground#0e0d1a
  • tab.activeBackground#5966cc20
  • tab.activeBorder#5966cc
  • tab.activeForeground#ffffff
  • tab.activeModifiedBorder#5966cc
  • tab.border#5966cc90
  • tab.inactiveBackground#0e0d1a
  • tab.inactiveForeground#5966cc
  • tab.unfocusedActiveBorder#5966cc
  • tab.unfocusedActiveForeground#dddfe9
  • tab.unfocusedHoverBackground#1b184ba0
  • tab.unfocusedHoverForeground#dddfe9a0
  • terminal.ansiBlack#0e0d1a
  • terminal.ansiBlue#8c97ea
  • terminal.ansiBrightBlack#5966cc
  • terminal.ansiBrightBlue#8c97ea
  • terminal.ansiBrightCyan#23deff
  • terminal.ansiBrightGreen#17f648
  • terminal.ansiBrightMagenta#ff00f2
  • terminal.ansiBrightRed#fa1313
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#ffffff
  • terminal.ansiCyan#8c97ea
  • terminal.ansiGreen#00c82b
  • terminal.ansiMagenta#ff00f2
  • terminal.ansiRed#fa1313
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#ffe553
  • terminalCursor.background#0e0d1a
  • terminalCursor.foreground#ff00f2
  • textLink.activeForeground#dddfe9
  • textLink.foreground#5966cc
  • titleBar.activeBackground#0e0d1a
  • titleBar.activeForeground#dddfe9
  • titleBar.border#5966cc50
  • titleBar.inactiveBackground#0e0d1a
  • titleBar.inactiveForeground#8c97ea
  • tree.indentGuidesStroke#383b3d
  • widget.shadow#0e0d1a30
  • window.activeBorder#0e0d1a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
variable, string constant.other.placeholder, invalid.deprecated, keyword, storage.type, storage.modifier#ff00f2
variable, string constant.other.placeholder, entity.name.function, punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scssitalic
punctuation.definition.interpolation.end.bracket.curly.scss, punctuation.definition.interpolation.begin.bracket.curly.scss#c800be
constant.other.php#ff00f2
constant.other.color#FFFFFF
invalid, invalid.illegal#01d648
Keyword, Storageitalic
keyword.control, constant.other.color, punctuation.definition.tag, punctuation, punctuation.separator.inheritance.php, punctuation.definition.tag.html, punctuation.section.embedded, keyword.other.template, keyword.other.substitution, entity.name.tag.reference.scss#a7a8af
punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html#6d6f7c
keyword.control.at-rule, punctuation.terminator.rule.css, keyword.control.operator, punctuation.definition.entity.css, keyword.operator.assignment.js, punctuation.separator.comma.js, punctuation.definition.string.begin.js, punctuation.definition.string.end.js, punctuation.definition.binding-pattern.object.js#dddfe9
punctuation.definition, string.quoted.single.scss#a7a8af
keyword.controlbold
comment.line.scss, comment.line.double-slash.js, punctuation.definition.comment.scss, punctuation.definition.comment.js, punctuation.definition.comment.html, comment.block.html#6d6f7c
text.html.derivative#a7a8af
entity.name.tag, meta.tag.sgml, markup.deleted.git_gutter#dddfe9
entity.name.tag.htmlbold
variable.parameter.js, variable.parameter.keyframe-list.css#ff00f2
variable.other.object.js, storage.type.js, string.other.link.title.markdown, variable.other.readwrite.js, variable.other.property.js, entity.name.type.module.js#6a77d8
string, string.quoted.double.html, variable.other.constant.js, variable.other.object.property.js, string.quoted.double.json, markup.fenced_code.block.markdown, markup.inline.raw.string.markdown, variable.function, keyword.other.special-method, entity.name.function, markup.bold, markup.bold.markdown, markup.italic.markdown, meta.class-method.js entity.name.function.js, variable.function.constructor, entity.name.tag.other.html, entity.name.tag.block.any.html, source.sass keyword.control#8c97ea
punctuation.definition.string.begin.html, punctuation.definition.string.end.html#c4cbff
support.other.variable, string.other.link, markup.table#dddfe9
constant.numeric, constant.language, constant.character, constant.escape, keyword.other.unit, keyword.other, punctuation.separator.key-value.html#ff00f2
variable.parameter.function.language.special, variable.parameter#01d648
constant.other.symbol, constant.other.key, entity.other.inherited-class, keyword.other.unit, markup.heading, markup.inserted.git_gutter, meta.group.braces.curly constant.other.object.key.js string.unquoted.label.js#c800be
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, entity.other.attribute-name.html#FF00F2
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#6a77d8
entity.name.module.js, variable.import.parameter.js, variable.other.class.js#01d648
entity.name.method.js, tag.decorator.js entity.name.tag.js, tag.decorator.js punctuation.definition.tag.js#8c97eaitalic
entity.other.attribute-name, support.function#ff00f2
entity.other.attribute-name.id, entity.other.attribute-name.class, entity.other.attribute-name.pseudo-class, entity.name.tag.css, keyword.control.conditional.js, support.constant, entity.other.attribute-name.html, string.quoted.single.js, storage.type.function.js, meta.object-literal.key#dddfe9
source.scss keyword.control#ff0000
markup.inserted#c800be
markup.deleted#01d648
markup.changed#ff00f2
string.regexp#c4cbff
constant.character.escape#c4cbff
*url*, *link*, *uri*underline
source.js constant.other.object.key.js string.unquoted.label.js#dddfe9italic
support.type.property-name.json#dddfe9
text.html.markdown, punctuation.definition.list_item.markdown#dddfe9
text.html.markdown markup.inline.raw.markdown#ff00f2
text.html.markdown markup.inline.raw.markdown punctuation.definition.raw.markdown#5966cc50
text.html.markdown meta.dummy.line-break
markdown.heading, markup.heading | markup.heading entity.name, markup.heading.markdown punctuation.definition.heading.markdown, entity.name.section.markdown#6a77d8bold
markup.underline#8c97eaunderline
markup.strike
markup.quote punctuation.definition.blockquote.markdown#5966cc50
markup.quoteitalic
string.other.link.description.title.markdown#ff00f2
constant.other.reference.link.markdown#ff00f2
markup.raw.block#ff00f2
punctuation.definition.raw.markdown, punctuation.definition.markdown#c4cbff
variable.language.fenced.markdown#5966cc
meta.separator#a7a8afbold
token.info-token#5966cc
token.warn-token#ff00f2
token.error-token#ff293b
token.debug-token#c4cbff
Tech Learner Theme by Tech Learner - VS Code Theme