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#000017
  • activityBar.border#00000060
  • activityBar.foreground#edf1ff
  • activityBarBadge.background#00ffe5
  • activityBarBadge.foreground#000000
  • badge.background#00000030
  • badge.foreground#464B5D
  • breadcrumb.activeSelectionForeground#80CBC4
  • breadcrumb.background#00001c
  • breadcrumb.focusForeground#edf1ff
  • breadcrumb.foreground#4B526D
  • breadcrumbPicker.background#090B10
  • button.background#717CB450
  • debugToolBar.background#0F111A
  • diffEditor.insertedTextBackground#C3E88D15
  • diffEditor.removedTextBackground#FF537020
  • dropdown.background#0F111A
  • dropdown.border#FFFFFF10
  • editor.background#000014
  • editor.findMatchBackground#000000
  • editor.findMatchBorder#80CBC4
  • editor.findMatchHighlightBackground#00000050
  • editor.findMatchHighlightBorder#ffffff50
  • editor.foreground#edf1ff
  • editor.lineHighlightBackground#00000050
  • editor.selectionBackground#717CB450
  • editor.selectionHighlightBackground#FFCC0020
  • editorBracketMatch.background#0F111A
  • editorBracketMatch.border#FFCC0050
  • editorCursor.foreground#FFCC00
  • editorError.foreground#FF537070
  • editorGroup.border#00000030
  • editorGroupHeader.tabsBackground#020714
  • editorGutter.addedBackground#C3E88D60
  • editorGutter.deletedBackground#FF537060
  • editorGutter.modifiedBackground#82AAFF60
  • editorHoverWidget.background#0F111A
  • editorHoverWidget.border#FFFFFF10
  • editorIndentGuide.activeBackground#3B3F51
  • editorIndentGuide.background#3B3F5170
  • editorInfo.foreground#82AAFF70
  • editorLineNumber.activeForeground#4B526D
  • editorLineNumber.foreground#3B3F5180
  • editorLink.activeForeground#edf1ff
  • editorMarkerNavigation.background#edf1ff05
  • editorOverviewRuler.border#0F111A
  • editorOverviewRuler.errorForeground#FF537040
  • editorOverviewRuler.findMatchForeground#80CBC4
  • editorOverviewRuler.infoForeground#82AAFF40
  • editorOverviewRuler.warningForeground#FFCB6B40
  • editorRuler.foreground#3B3F51
  • editorSuggestWidget.background#020617
  • editorSuggestWidget.border#FFFFFF10
  • editorSuggestWidget.foreground#64748b
  • editorSuggestWidget.highlightForeground#80CBC4
  • editorSuggestWidget.selectedBackground#1e293b
  • editorWarning.foreground#FFCB6B70
  • editorWhitespace.foreground#edf1ff40
  • editorWidget.background#090B10
  • editorWidget.resizeBorder#80CBC4
  • extensionButton.prominentBackground#C3E88D90
  • extensionButton.prominentHoverBackground#C3E88D
  • focusBorder#FFFFFF00
  • gitDecoration.conflictingResourceForeground#FFCB6B90
  • gitDecoration.deletedResourceForeground#FF537090
  • gitDecoration.ignoredResourceForeground#4B526D90
  • gitDecoration.modifiedResourceForeground#82AAFF90
  • gitDecoration.untrackedResourceForeground#C3E88D90
  • input.background#1A1C25
  • input.border#FFFFFF10
  • input.foreground#EEFFFF
  • input.placeholderForeground#edf1ff60
  • inputOption.activeBackground#edf1ff30
  • inputOption.activeBorder#edf1ff30
  • inputValidation.errorBorder#FF537050
  • inputValidation.infoBorder#82AAFF50
  • inputValidation.warningBorder#FFCB6B50
  • list.activeSelectionBackground#c7dbff54
  • list.activeSelectionForeground#ffffff
  • list.focusBackground#edf1ff20
  • list.focusForeground#edf1ff
  • list.highlightForeground#80CBC4
  • list.hoverBackground#c7dbff38
  • list.hoverForeground#FFFFFF
  • list.inactiveSelectionBackground#c7dbff54
  • list.inactiveSelectionForeground#ffffff
  • listFilterWidget.background#00000030
  • listFilterWidget.noMatchesOutline#00000030
  • listFilterWidget.outline#00000030
  • menu.background#0F111A
  • menu.foreground#edf1ff
  • menu.selectionBackground#00000050
  • menu.selectionBorder#00000030
  • menu.selectionForeground#80CBC4
  • menu.separatorBackground#edf1ff
  • menubar.selectionBackground#00000030
  • menubar.selectionBorder#00000030
  • menubar.selectionForeground#80CBC4
  • notificationLink.foreground#80CBC4
  • notifications.background#0F111A
  • notifications.foreground#edf1ff
  • panel.background#090B10
  • panel.border#00000060
  • panelTitle.activeBorder#80CBC4
  • panelTitle.activeForeground#FFFFFF
  • panelTitle.inactiveForeground#edf1ff
  • peekView.border#00000030
  • peekViewEditor.background#edf1ff05
  • peekViewEditor.matchHighlightBackground#717CB450
  • peekViewEditorGutter.background#edf1ff05
  • peekViewResult.background#edf1ff05
  • peekViewResult.matchHighlightBackground#717CB450
  • peekViewResult.selectionBackground#4B526D70
  • peekViewTitle.background#edf1ff05
  • peekViewTitleDescription.foreground#edf1ff60
  • pickerGroup.foreground#80CBC4
  • progressBar.background#80CBC4
  • scrollbar.shadow#0F111A00
  • scrollbarSlider.activeBackground#80CBC4
  • scrollbarSlider.background#edf1ff20
  • scrollbarSlider.hoverBackground#edf1ff10
  • selection.background#80CBC4
  • settings.checkboxBackground#090B10
  • settings.checkboxForeground#edf1ff
  • settings.dropdownBackground#090B10
  • settings.dropdownForeground#edf1ff
  • settings.headerForeground#80CBC4
  • settings.modifiedItemIndicator#80CBC4
  • settings.numberInputBackground#090B10
  • settings.numberInputForeground#edf1ff
  • settings.textInputBackground#090B10
  • settings.textInputForeground#edf1ff
  • sideBar.background#07081a
  • sideBar.border#00000060
  • sideBar.foreground#b1b2c3
  • sideBarSectionHeader.background#00001c
  • sideBarSectionHeader.border#00000060
  • sideBarSectionHeader.foreground#f7e9e9
  • sideBarTitle.foreground#ffeded
  • statusBar.background#000d24
  • statusBar.border#00000060
  • statusBar.debuggingBackground#C792EA
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#4B526D
  • statusBar.noFolderBackground#0F111A
  • statusBarItem.hoverBackground#464B5D20
  • statusBarItem.remoteBackground#80CBC4
  • statusBarItem.remoteForeground#000000
  • tab.activeBorder#80CBC4
  • tab.activeForeground#FFFFFF
  • tab.activeModifiedBorder#4B526D
  • tab.border#020714
  • tab.inactiveBackground#020714
  • tab.inactiveForeground#4B526D
  • tab.unfocusedActiveBorder#464B5D
  • tab.unfocusedActiveForeground#edf1ff
  • terminal.ansiBlack#000000
  • terminal.ansiBlue#82AAFF
  • terminal.ansiBrightBlack#464B5D
  • terminal.ansiBrightBlue#82AAFF
  • terminal.ansiBrightCyan#89DDFF
  • terminal.ansiBrightGreen#C3E88D
  • terminal.ansiBrightMagenta#C792EA
  • terminal.ansiBrightRed#FF5370
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#FFCB6B
  • terminal.ansiCyan#89DDFF
  • terminal.ansiGreen#C3E88D
  • terminal.ansiMagenta#C792EA
  • terminal.ansiRed#FF5370
  • terminal.ansiWhite#ffffff
  • terminal.ansiYellow#FFCB6B
  • terminal.background#00061f
  • terminal.foreground#cbd5e1
  • terminalCursor.background#000000
  • terminalCursor.foreground#FFCB6B
  • textLink.activeForeground#edf1ff
  • textLink.foreground#80CBC4
  • titleBar.activeBackground#00001c
  • titleBar.activeForeground#edf1ff
  • titleBar.border#00000060
  • titleBar.inactiveBackground#000017
  • titleBar.inactiveForeground#4B526D
  • tree.indentGuidesStroke#3B3F51
  • widget.shadow#00000030

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
strong—bold
header#BD93F9—
source#F8F8F2—
support.constant.property-value.css, constant.numeric, keyword.other.unit#F78C6C—
meta.var.expr#cbd5e1—
keyword.other.important.css#ff6abc—
constant.other.color#00ffff—
source.css, entity.other.attribute-name.pseudo-class.css#03ddff—
meta.diff, meta.diff.header#6272A4—
markup.inserted#50FA7B—
markup.deleted#FF5555—
markup.changed#FFB86C—
invalid#FF5555underline italic
invalid.deprecated#F8F8F2underline italic
entity.name.filename#F1FA8C—
markup.error#FF5555—
markup.underline—underline
markup.bold#FFB86Cbold
markup.heading#FFCB6Bbold
markup.italic#F1FA8Citalic
beginning.punctuation.definition.list.markdown, beginning.punctuation.definition.quote.markdown, punctuation.definition.link.restructuredtext#8BE9FD—
markup.inline.raw, markup.raw.restructuredtext#50FA7B—
markup.underline.link, markup.underline.link.image#8BE9FD—
meta.link.reference.def.restructuredtext, punctuation.definition.directive.restructuredtext, string.other.link.description, string.other.link.title#FF79C6—
entity.name.directive.restructuredtext, markup.quote#F1FA8Citalic
meta.separator.markdown#6272A4—
fenced_code.block.language, markup.raw.inner.restructuredtext, markup.fenced_code.block.markdown punctuation.definition.markdown#50FA7B—
punctuation.definition.constant.restructuredtext#BD93F9—
markup.heading.markdown punctuation.definition.string.begin, markup.heading.markdown punctuation.definition.string.end#b3ff00—
meta.paragraph.markdown punctuation.definition.string.begin, meta.paragraph.markdown punctuation.definition.string.end#F8F8F2—
markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.begin, markup.quote.markdown meta.paragraph.markdown punctuation.definition.string.end#F1FA8C—
entity.name.type.class, entity.name.class#8BE9FD
keyword.expressions-and-types.swift, keyword.other.this, variable.language, variable.language punctuation.definition.variable.php, variable.other.readwrite.instance.ruby, variable.parameter.function.language.special#BD93F9—
entity.other.inherited-class#8BE9FD—
comment#475569italic
comment, punctuation.definition.comment, unused.comment, wildcard.comment#475569italic
comment keyword.codetag.notation, comment.block.documentation keyword, comment.block.documentation storage.type.class#FF79C6—
comment.block.documentation entity.name.type#8BE9FD—
comment.block.documentation entity.name.type punctuation.definition.bracket#8BE9FD—
comment.block.documentation variable#FFB86Citalic
constant.character.escape, constant.character.string.escape, constant.regexp#FF79C6—
entity.name.tag#F07178—
entity.other.attribute-name.parent-selector#FF79C6—
entity.other.attribute-name#BD93F9—
entity.name.function, meta.function-call.generic, meta.function-call.object, meta.function-call.php, meta.function-call.static, meta.method-call.java meta.method, meta.method.groovy, support.function.any-method.lua, keyword.operator.function.infix#50FA7B—
entity.name.variable.parameter, meta.at-rule.function variable, meta.at-rule.mixin variable, meta.function.arguments variable.other.php, meta.selectionset.graphql meta.arguments.graphql variable.arguments.graphql, variable.parameter#FFB86C—
meta.decorator variable.other.readwrite, meta.decorator variable.other.property#50FA7B—
meta.decorator variable.other.object#50FA7B—
keyword, punctuation.definition.keyword#91d1ff—
keyword.control.new, keyword.operator.new, keyword.control.default.tsx, meta.export.default.tsx#FF79C6
meta.selector#FF79C6—
support#f1ff5d—
support.function.magic, support.variable, variable.other.predefined#BD93F9
support.function, support.type.property-name—
constant.other.symbol.hashkey punctuation.definition.constant.ruby, entity.other.attribute-name.placeholder punctuation, entity.other.attribute-name.pseudo-class punctuation, entity.other.attribute-name.pseudo-element punctuation, meta.group.double.toml, meta.group.toml, meta.object-binding-pattern-variable punctuation.destructuring, punctuation.colon.graphql, punctuation.definition.block.scalar.folded.yaml, punctuation.definition.block.scalar.literal.yaml, punctuation.definition.block.sequence.item.yaml, punctuation.definition.entity.other.inherited-class, punctuation.function.swift, punctuation.separator.dictionary.key-value, punctuation.separator.hash, punctuation.separator.inheritance, punctuation.separator.key-value, punctuation.separator.key-value.mapping.yaml, punctuation.separator.namespace, punctuation.separator.pointer-access, punctuation.separator.slice, string.unquoted.heredoc punctuation.definition.string, support.other.chomping-indicator.yaml, punctuation.separator.annotation#FF79C6—
keyword.operator.other.powershell, keyword.other.statement-separator.powershell, meta.brace.round, meta.function-call punctuation, punctuation.definition.arguments.begin, punctuation.definition.arguments.end, punctuation.definition.entity.begin, punctuation.definition.entity.end, punctuation.definition.tag.cs, punctuation.definition.type.begin, punctuation.definition.type.end, punctuation.section.scope.begin, punctuation.section.scope.end, storage.type.generic.java, string.template meta.brace, string.template punctuation.accessor#F8F8F2—
meta.string-contents.quoted.double punctuation.definition.variable, punctuation.definition.interpolation.begin, punctuation.definition.interpolation.end, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end, punctuation.section.embedded.begin, punctuation.section.embedded.coffee, punctuation.section.embedded.end, punctuation.section.embedded.end source.php, punctuation.section.embedded.end source.ruby, punctuation.definition.variable.makefile#FF79C6—
entity.name.function.target.makefile, entity.name.section.toml, entity.name.tag.yaml, variable.other.key.toml#8BE9FD—
constant.other.date, constant.other.timestamp#FFB86C—
variable.other.alias.yaml#50FA7Bitalic underline
storage, meta.implementation storage.type.objc, meta.interface-or-protocol storage.type.objc, source.groovy storage.type.def#FF79C6
entity.name.type, keyword.primitive-datatypes.swift, keyword.type.cs, meta.protocol-list.objc, meta.return-type.objc, source.go storage.type, source.groovy storage.type, source.java storage.type, source.powershell entity.other.attribute-name, storage.class.std.rust, storage.type.attribute.swift, storage.type.c, storage.type.core.rust, storage.type.cs, storage.type.groovy, storage.type.objc, storage.type.php, storage.type.haskell, storage.type.ocaml#66D9EF—
entity.name.type.type-parameter, meta.indexer.mappedtype.declaration entity.name.type, meta.type.parameters entity.name.type#FFB86C—
storage.modifier#FF79C6—
string.regexp, constant.other.character-class.set.regexp, constant.character.escape.backslash.regexp#F1FA8C—
punctuation.definition.group.capture.regexp#FF79C6—
string.regexp punctuation.definition.string.begin, string.regexp punctuation.definition.string.end#66D9EF—
punctuation.definition.character-class.regexp#8BE9FD—
punctuation.definition.group.regexp#FFB86C—
punctuation.definition.group.assertion.regexp, keyword.operator.negation.regexp#FF5555—
meta.assertion.look-ahead.regexp#50FA7B—
string#caff7d—
punctuation.definition.string.begin, punctuation.definition.string.end#3cff6d—
punctuation.support.type.property-name.begin, punctuation.support.type.property-name.end#8BE9FE—
string.quoted.docstring.multi, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.quoted.docstring.multi.python constant.character.escape#6272A4—
variable, constant.other.key.perl, support.variable.property, variable.other.constant.js, variable.other.constant.ts, variable.other.constant.tsx#F8F8F2—
constant, variable.other.constant#6b98ff—
meta.import variable.other.readwrite, meta.object-binding-pattern-variable variable.object.property, meta.variable.assignment.destructured.object.coffee variable#FFB86C—
meta.import variable.other.readwrite.alias, meta.export variable.other.readwrite.alias, meta.variable.assignment.destructured.object.coffee variable variable#F8F8F2
meta.selectionset.graphql variable#F1FA8C—
meta.selectionset.graphql meta.arguments variable#F8F8F2—
entity.name.fragment.graphql, variable.fragment.graphql#8BE9FD—
constant.other.symbol.hashkey.ruby, keyword.operator.dereference.java, keyword.operator.navigation.groovy, meta.scope.for-loop.shell punctuation.definition.string.begin, meta.scope.for-loop.shell punctuation.definition.string.end, meta.scope.for-loop.shell string, storage.modifier.import, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.tsx, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.end.jsx, punctuation.separator.list.comma.css, constant.language.empty-list.haskell#F8F8F2—
source.shell variable.other#BD93F9—
support.constant#BD93F9
meta.scope.prerequisites.makefile#F1FA8C—
meta.attribute-selector.scss#F1FA8C—
punctuation.definition.attribute-selector.end.bracket.square.scss, punctuation.definition.attribute-selector.begin.bracket.square.scss#F8F8F2—
meta.embedded.block.shellscript, markup.fenced_code.block.markdown, markup.list.numbered.markdown, text.html.markdown#8F93A2—
meta.embedded.block.shellscript, markup.fenced_code.block.markdown#F1FF5D—
meta.preprocessor.haskell#6272A4—
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#FFCB6B—
Baitul Hikmah Dark Theme by Shahriyar Hosen - VS Code Theme