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#010e1a
  • activityBar.border#010e1a
  • activityBar.dropBackground#aebbdb
  • activityBar.foreground#aebbdb
  • activityBarBadge.background#44596b
  • activityBarBadge.foreground#ffffff
  • badge.background#aebbdb
  • badge.foreground#ffffff
  • breadcrumb.activeSelectionForeground#FFFFFF
  • breadcrumb.focusForeground#ffffff
  • breadcrumb.foreground#76489D
  • breadcrumbPicker.background#001122
  • button.background#76489D
  • button.foreground#f2edf7
  • button.hoverBackground#8c62b1
  • contrastBorder#222222
  • debugExceptionWidget.background#010e1a
  • debugExceptionWidget.border#aebbdb
  • debugToolBar.background#010e1a
  • diffEditor.insertedTextBackground#99b76d23
  • diffEditor.insertedTextBorder#a4e7dd33
  • diffEditor.removedTextBackground#d31a47
  • diffEditor.removedTextBorder#E422514d
  • dropdown.background#010e1a
  • dropdown.border#aebbdb
  • dropdown.foreground#f5f7fc
  • editor.background#010e1a
  • editor.findMatchBackground#aebbdb79
  • editor.findMatchHighlightBackground#1085bb5d
  • editor.foreground#8da1d4
  • editor.hoverHighlightBackground#76489D
  • editor.inactiveSelectionBackground#76489D
  • editor.lineHighlightBackground#0003
  • editor.rangeHighlightBackground#76489D
  • editor.selectionBackground#1d3b53
  • editor.selectionHighlightBackground#aebbdb79
  • editor.wordHighlightBackground#f6bbe533
  • editor.wordHighlightStrongBackground#e2a2f433
  • editorBracketMatch.background#aebbdb4d
  • editorCodeLens.foreground#5e82ceb4
  • editorCursor.foreground#80a4c2
  • editorError.foreground#E42251
  • editorGroup.border#010e1a
  • editorGroup.dropBackground#76489D73
  • editorGroup.emptyBackground#010e1a
  • editorGroupHeader.noTabsBackground#010e1a
  • editorGroupHeader.tabsBackground#010e1a
  • editorGroupHeader.tabsBorder#262A39
  • editorGutter.addedBackground#a4e7dd
  • editorGutter.background#010e1a
  • editorGutter.deletedBackground#E42251
  • editorGutter.modifiedBackground#4cbaac
  • editorHoverWidget.background#010e1a
  • editorHoverWidget.border#aebbdb
  • editorIndentGuide.activeBackground#7E97AC
  • editorIndentGuide.background#5e81ce52
  • editorLineNumber.activeForeground#C5E4FD
  • editorLineNumber.foreground#4b6479
  • editorMarkerNavigation.background#0b2942
  • editorMarkerNavigationError.background#E42251
  • editorMarkerNavigationWarning.background#FFCA28
  • editorOverviewRuler.commonContentForeground#76489D
  • editorOverviewRuler.currentContentForeground#76489D
  • editorOverviewRuler.incomingContentForeground#76489D
  • editorRuler.foreground#5e81ce52
  • editorSuggestWidget.background#2C3043
  • editorSuggestWidget.border#2B2F40
  • editorSuggestWidget.foreground#8da1d4
  • editorSuggestWidget.highlightForeground#ffffff
  • editorSuggestWidget.selectedBackground#aebbdb
  • editorWarning.foreground#4cbaac
  • editorWidget.background#021320
  • editorWidget.border#aebbdb
  • errorForeground#E42251
  • extensionButton.prominentBackground#76489D
  • extensionButton.prominentForeground#f5f7fc
  • extensionButton.prominentHoverBackground#76489D
  • focusBorder#222222
  • foreground#8da1d4
  • gitDecoration.conflictingResourceForeground#fbe7f5
  • gitDecoration.deletedResourceForeground#d31a47
  • gitDecoration.ignoredResourceForeground#2e4b92
  • gitDecoration.modifiedResourceForeground#aebbdb
  • gitDecoration.untrackedResourceForeground#a4e7dd
  • input.background#0b253a
  • input.border#aebbdb
  • input.foreground#f5f7fc
  • input.placeholderForeground#aebbdb
  • inputOption.activeBorder#f5f7fc
  • inputValidation.errorBackground#d31a47
  • inputValidation.errorBorder#E42251
  • inputValidation.infoBackground#00589EF2
  • inputValidation.infoBorder#64B5F6
  • inputValidation.warningBackground#675700F2
  • inputValidation.warningBorder#FFCA28
  • list.activeSelectionBackground#234d708c
  • list.activeSelectionForeground#ffffff
  • list.dropBackground#010e1a
  • list.focusBackground#010d18
  • list.focusForeground#ffffff
  • list.highlightForeground#ffffff
  • list.hoverBackground#010e1a
  • list.hoverForeground#ffffff
  • list.inactiveSelectionBackground#0e293f
  • list.inactiveSelectionForeground#aebbdb
  • list.invalidItemForeground#f2edf7
  • merge.currentHeaderBackground#aebbdb
  • merge.incomingHeaderBackground#76489D
  • meta.objectliteral.js#fbe7f5
  • notificationCenter.border#262a39
  • notificationLink.foreground#4cbaac
  • notifications.background#01111d
  • notifications.border#262a39
  • notifications.foreground#f5f7fc
  • notificationToast.border#262a39
  • panel.background#010e1a
  • panel.border#aebbdb
  • panelTitle.activeBorder#aebbdb
  • panelTitle.activeForeground#f5f7fc
  • panelTitle.inactiveForeground#8da1d480
  • peekView.border#aebbdb
  • peekViewEditor.background#010e1a
  • peekViewEditor.matchHighlightBackground#76489D
  • peekViewResult.background#010e1a
  • peekViewResult.fileForeground#aebbdb
  • peekViewResult.lineForeground#aebbdb
  • peekViewResult.matchHighlightBackground#f5f7fc
  • peekViewResult.selectionBackground#2E3250
  • peekViewResult.selectionForeground#aebbdb
  • peekViewTitle.background#010e1a
  • peekViewTitleDescription.foreground#697098
  • peekViewTitleLabel.foreground#aebbdb
  • pickerGroup.border#010e1a
  • pickerGroup.foreground#d1aaff
  • progress.background#76489D
  • punctuation.definition.generic.begin.html#E42251f2
  • scrollbar.shadow#010b14
  • scrollbarSlider.activeBackground#084d8180
  • scrollbarSlider.background#084d8180
  • scrollbarSlider.hoverBackground#084d8180
  • selection.background#3455a5
  • sideBar.background#010e1a
  • sideBar.border#010e1a
  • sideBar.foreground#89a4bb
  • sideBarSectionHeader.background#010e1a
  • sideBarSectionHeader.foreground#aebbdb
  • sideBarTitle.foreground#aebbdb
  • source.elm#aebbdb
  • statusBar.background#010e1a
  • statusBar.border#262A39
  • statusBar.debuggingBackground#202431
  • statusBar.debuggingBorder#1F2330
  • statusBar.foreground#aebbdb
  • statusBar.noFolderBackground#010e1a
  • statusBar.noFolderBorder#25293A
  • statusBarItem.activeBackground#202431
  • statusBarItem.hoverBackground#202431
  • statusBarItem.prominentBackground#202431
  • statusBarItem.prominentHoverBackground#202431
  • string.quoted.single.js#ffffff
  • tab.activeBackground#0b2942
  • tab.activeBorder#262A39
  • tab.activeForeground#d2dee7
  • tab.border#272B3B
  • tab.inactiveBackground#01111d
  • tab.inactiveForeground#aebbdb
  • tab.unfocusedActiveBorder#262A39
  • tab.unfocusedActiveForeground#aebbdb
  • tab.unfocusedInactiveForeground#aebbdb
  • terminal.ansiBlack#010e1a
  • terminal.ansiBlue#fbe7f5
  • terminal.ansiBrightBlack#575656
  • terminal.ansiBrightBlue#fbe7f5
  • terminal.ansiBrightCyan#a4e7dd
  • terminal.ansiBrightGreen#22da6e
  • terminal.ansiBrightMagenta#76489D
  • terminal.ansiBrightRed#E42251
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#a4e7dd
  • terminal.ansiCyan#21c7a8
  • terminal.ansiGreen#22da6e
  • terminal.ansiMagenta#76489D
  • terminal.ansiRed#E42251
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#a4e7dd
  • terminal.selectionBackground#1b90dd4d
  • terminalCursor.background#234d70
  • textCodeBlock.background#4f4f4f
  • titleBar.activeBackground#010e1a
  • titleBar.activeForeground#eeefff
  • titleBar.inactiveBackground#010e1a
  • walkThrough.embeddedEditorBackground#010e1a
  • welcomePage.buttonBackground#010e1a
  • welcomePage.buttonHoverBackground#010e1a
  • widget.shadow#010e1a

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
markup.changed, meta.diff.header.git, meta.diff.header.from-file, meta.diff.header.to-file#aebbdbitalic
markup.deleted.diff#d31a47italic
markup.inserted.diff#4cbaacitalic
Global settings#a4e7dd
comment#007d74italic
string#fbe7f5
string.quoted, variable.other.readwrite.js#fbe7f5
support.constant.math#4cbaac
constant.numeric, constant.character.numeric#f2edf7
constant.language, punctuation.definition.constant, variable.other.constant#fbe7f5
constant.character, constant.other#fbe7f5
constant.character.escape#E42251
string.regexp, string.regexp keyword.other#5ca7e4
meta.function punctuation.separator.comma#aebbdb
variable#4cbaac
punctuation.accessor, keyword#76489Ditalic
storage, meta.var.expr, meta.class meta.method.declaration meta.var.expr storage.type.js, storage.type.property.js, storage.type.property.ts, storage.type.property.tsx#76489Ditalic
storage.type#76489D
storage.type.function.arrow.js
entity.name.class, meta.class entity.name.type.class#fbe7f5
entity.other.inherited-class#4cbaac
entity.name.function#76489Ditalic
punctuation.definition.tag, meta.tag#4cbaac
entity.name.tag, meta.tag.other.html, meta.tag.other.js, meta.tag.other.tsx, entity.name.tag.tsx, entity.name.tag.js, entity.name.tag, meta.tag.js, meta.tag.tsx, meta.tag.html#4cbaac
entity.other.attribute-name#4cbaacitalic
entity.name.tag.custom#E42251
support.function, support.constant#fbe7f5
support.constant.meta.property-value#4cbaac
support.type, support.class#4cbaac
support.variable.dom#a4e7dd
invalid#ffffff
invalid.deprecated#ffffff
keyword.operator#4cbaac
keyword.operator.relational#76489Ditalic
keyword.operator.assignment#76489D
keyword.operator.arithmetic#76489D
keyword.operator.bitwise#76489D
keyword.operator.increment#76489D
keyword.operator.ternary#76489D
comment.line.double-slash#007d74
object#cdebf7
constant.language.null#C1228F
meta.brace#8da1d4
meta.delimiter.period#76489Ditalic
punctuation.definition.string#4cbaac
punctuation.definition.string.begin.markdown#C1228F
constant.language.boolean#C1228F
object.comma#ffffff
variable.parameter.function#4cbaac
support.type.vendor.property-name, support.constant.vendor.property-value, support.type.property-name, meta.property-list entity.name.tag#4cbaac
meta.property-list entity.name.tag.reference#4cbaac
constant.other.color.rgb-value punctuation.definition.constant#E42251
constant.other.color#4cbaac
keyword.other.unit#a4e7dd
meta.selector#76489Ditalic
entity.other.attribute-name.id#007d74
meta.property-name#4cbaac
entity.name.tag.doctype, meta.tag.sgml.doctype#76489Ditalic
punctuation.definition.parameters#a4e7dd
keyword.control.operator#a4e7dd
keyword.operator.logical#76489D
variable.instance, variable.other.instance, variable.readwrite.instance, variable.other.readwrite.instance, variable.other.property#baebe2
variable.other.object.property#fbe7f5italic
variable.other.object.js
entity.name.function#fbe7f5italic
keyword.operator.comparison, keyword.control.flow.js, keyword.control.flow.ts, keyword.control.flow.tsx, keyword.control.ruby, keyword.control.module.ruby, keyword.control.class.ruby, keyword.control.def.ruby, keyword.control.loop.js, keyword.control.loop.ts, keyword.control.import.js, keyword.control.import.ts, keyword.control.import.tsx, keyword.control.from.js, keyword.control.from.ts, keyword.control.from.tsx, keyword.operator.instanceof.js, keyword.operator.expression.instanceof.ts, keyword.operator.expression.instanceof.tsx#76489Ditalic
keyword.control.conditional.js, keyword.control.conditional.ts, keyword.control.switch.js, keyword.control.switch.ts#76489D
support.constant, keyword.other.special-method, keyword.other.new, keyword.other.debugger, keyword.control#a4e7dd
support.function#a4e7dd
invalid.broken#020e14
invalid.unimplemented#ffffff
invalid.illegal#ffffff
variable.language#a4e7dd
support.variable.property#4cbaac
variable.function#fbe7f5
variable.interpolation#C1228F
meta.function-call#fbe7f5
punctuation.section.embedded#d31a47
punctuation.terminator.expression, punctuation.definition.arguments, punctuation.definition.array, punctuation.section.array, meta.array#8da1d4
punctuation.definition.list.begin, punctuation.definition.list.end, punctuation.separator.arguments, punctuation.definition.list#a4e7dd
string.template meta.template.expression#d31a47
string.template punctuation.definition.string#8da1d4
italic#76489Ditalic
bold#a4e7ddbold
quote#697098italic
raw#4cbaac
variable.assignment.coffee#4cbaac
variable.parameter.function.coffee#8da1d4
variable.assignment.coffee#a4e7dd
variable.other.readwrite.cs#8da1d4
entity.name.type.class.cs, storage.type.cs#fbe7f5
entity.name.type.namespace.cs#B2CCD6
string.unquoted.preprocessor.message.cs#8da1d4
punctuation.separator.hash.cs, keyword.preprocessor.region.cs, keyword.preprocessor.endregion.cs#fbe7f5bold
variable.other.object.cs#B2CCD6
entity.name.type.enum.cs#a4e7dd
string.interpolated.single.dart, string.interpolated.double.dart#fbe7f5
support.class.dart#fbe7f5
entity.name.tag.css, entity.name.tag.less, entity.name.tag.custom.css, support.constant.property-value.css#C1228F
entity.name.tag.wildcard.css, entity.name.tag.wildcard.less, entity.name.tag.wildcard.scss, entity.name.tag.wildcard.sass#a4e7dd
keyword.other.unit.css#a4e7dd
meta.attribute-selector.css entity.other.attribute-name.attribute, variable.other.readwrite.js#E42251
source.elixir support.type.elixir, source.elixir meta.module.elixir entity.name.class.elixir#fbe7f5
source.elixir entity.name.function#a4e7dd
source.elixir constant.other.symbol.elixir, source.elixir constant.other.keywords.elixir#fbe7f5
source.elixir punctuation.definition.string#a4e7dd
source.elixir variable.other.readwrite.module.elixir, source.elixir variable.other.readwrite.module.elixir punctuation.definition.variable.elixir#a4e7dd
source.elixir .punctuation.binary.elixir#76489Ditalic
constant.keyword.clojure#a4e7dd
source.go meta.function-call.go#DDDDDD
source.go keyword.package.go, source.go keyword.import.go, source.go keyword.function.go, source.go keyword.type.go, source.go keyword.struct.go, source.go keyword.interface.go, source.go keyword.const.go, source.go keyword.var.go, source.go keyword.map.go, source.go keyword.channel.go, source.go keyword.control.go#76489Ditalic
source.go constant.language.go, source.go constant.other.placeholder.go#C1228F
entity.name.function.preprocessor.cpp, entity.scope.name.cpp#a4e7ddff
meta.namespace-block.cpp#e0dec6
storage.type.language.primitive.cpp#C1228F
meta.preprocessor.macro.cpp#8da1d4
variable.parameter#fbe7f5
variable.other.readwrite.powershell#fbe7f5
support.function.powershell#a4e7ddff
entity.other.attribute-name.id.html#a4e7dd
punctuation.definition.tag.html#4cbaac
meta.tag.sgml.doctype.html#76489Ditalic
meta.class entity.name.type.class.js#C1228F
meta.method.declaration storage.type.js#C1228F
terminator.js#8da1d4
meta.js punctuation.definition.js#8da1d4
entity.name.type.instance.jsdoc, entity.name.type.instance.phpdoc#aebbdb
variable.other.jsdoc, variable.other.phpdoc#4cbaac
variable.other.meta.import.js, meta.import.js variable.other, variable.other.meta.export.js, meta.export.js variable.other#8da1d4
variable.parameter.function.js#00645c
variable.other.object.js, variable.other.object.jsx, variable.object.property.js, variable.object.property.jsx#8da1d4
variable.js, variable.other.js#8da1d4
entity.name.type.js, entity.name.type.module.js#C1228F
support.class.js#8da1d4
support.type.property-name.json#4cbaac
support.constant.json#4cbaac
meta.structure.dictionary.value.json string.quoted.double#00645c
string.quoted.double.json punctuation.definition.string.json#4cbaac
meta.structure.dictionary.json meta.structure.dictionary.value constant.language#C1228F
variable.other.object.js#3455a5italic
variable.other.ruby#8da1d4
entity.name.type.class.ruby#fbe7f5
constant.language.symbol.hashkey.ruby#a4e7dd
constant.language.symbol.ruby#a4e7dd
entity.name.tag.less#a4e7dd
keyword.other.unit.css#a4e7dd
meta.attribute-selector.less entity.other.attribute-name.attribute#E42251
markup.heading.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown#00645c
markup.italic.markdown#76489Ditalic
markup.bold.markdown#a4e7ddbold
markup.quote.markdown#697098italic
markup.inline.raw.markdown#4cbaac
markup.underline.link.markdown, markup.underline.link.image.markdown#C1228F
string.other.link.title.markdown, string.other.link.description.markdown#8da1d4
punctuation.definition.string.markdown, punctuation.definition.string.begin.markdown, punctuation.definition.string.end.markdown, meta.link.inline.markdown punctuation.definition.string#00645c
punctuation.definition.metadata.markdown#a4e7dd
beginning.punctuation.definition.list.markdown#00645c
markup.inline.raw.string.markdown#a4e7dd
variable.other.php, variable.other.property.php#bec5d4
support.class.php#fbe7f5
meta.function-call.php punctuation#8da1d4
variable.other.global.php#a4e7dd
variable.other.global.php punctuation.definition.variable#a4e7dd
constant.language.python#C1228F
variable.parameter.function.python, meta.function-call.arguments.python#fbe7f5
meta.function-call.python, meta.function-call.generic.python#B2CCD6
punctuation.python#8da1d4
entity.name.function.decorator.python#a4e7dd
source.python variable.language.special#8EACE3
keyword.control#76489Ditalic
variable.scss, variable.sass, variable.parameter.url.scss, variable.parameter.url.sass#a4e7dd
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#fbe7f5
source.css.scss meta.at-rule variable, source.css.sass meta.at-rule variable#bec5d4
meta.attribute-selector.scss entity.other.attribute-name.attribute, meta.attribute-selector.sass entity.other.attribute-name.attribute#E42251
entity.name.tag.scss, entity.name.tag.sass#a4e7dd
keyword.other.unit.scss, keyword.other.unit.sass#a4e7dd
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#8da1d4
entity.name.type.ts, entity.name.type.tsx#C1228F
support.class.node.ts, support.class.node.tsx#C1228F
meta.type.parameters.ts entity.name.type, meta.type.parameters.tsx entity.name.type#E42251
meta.import.ts punctuation.definition.block, meta.import.tsx punctuation.definition.block, meta.export.ts punctuation.definition.block, meta.export.tsx punctuation.definition.block#8da1d4
meta.decorator punctuation.decorator.ts, meta.decorator punctuation.decorator.tsx#fbe7f5
meta.tag.js meta.jsx.children.tsx#fbe7f5
entity.name.tag.yaml#a4e7dd
variable.other.readwrite.js, variable.parameter#f4a8ba
support.class.component.js, support.class.component.tsx#E42251
meta.jsx.children, meta.jsx.children.js, meta.jsx.children.tsx#8da1d4
meta.class entity.name.type.class.tsx#fbe7f5
entity.name.type.tsx, entity.name.type.module.tsx#fbe7f5
meta.class.ts meta.var.expr.ts storage.type.ts, meta.class.tsx meta.var.expr.tsx storage.type.tsx#76489D
meta.method.declaration storage.type.ts, meta.method.declaration storage.type.tsx#fbe7f5
meta.property-list.css meta.property-value.css variable.other.less, meta.property-list.scss variable.scss, meta.property-list.sass variable.sass, meta.brace, keyword.operator.operator, keyword.operator.or.regexp, keyword.operator.expression.in, keyword.operator.relational, keyword.operator.assignment, keyword.operator.comparison, keyword.operator.type, keyword.operator, keyword, punctuation.definintion.string, punctuation, variable.other.readwrite.js, storage.type, source.css, string.quoted
ThemeDatabase All Themes by enes ozturk - VS Code Theme