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#111827
  • activityBar.border#475569
  • activityBarBadge.background#0284c7
  • activityBarBadge.foreground#ffffff
  • badge.background#0284c7
  • badge.foreground#ffffff
  • button.background#0ea5e9
  • button.foreground#ffffff
  • button.hoverBackground#38bdf8
  • button.secondaryBackground#172337
  • button.secondaryForeground#e2e8f033
  • checkbox.border#475569
  • debugToolBar.background#0e182c
  • descriptionForeground#abb2bf
  • diffEditor.insertedLineBackground#34d39940
  • diffEditor.insertedTextBackground#34d39940
  • diffEditor.removedLineBackground#fb718540
  • diffEditor.removedTextBackground#fb718540
  • dropdown.background#1e293b
  • dropdown.border#475569
  • dropdown.listBackground#111827
  • editor.background#111827
  • editor.findMatchBackground#515c6a
  • editor.findMatchBorder#74879f
  • editor.findMatchHighlightBackground#ea5c0055
  • editor.findMatchHighlightBorder#ffffff00
  • editor.findRangeHighlightBackground#ffffff10
  • editor.findRangeHighlightBorder#ffffff00
  • editor.foldBackground#264f7800
  • editor.foreground#f9fafb
  • editor.hoverHighlightBackground#264f7840
  • editor.inactiveSelectionBackground#ffffff10
  • editor.lineHighlightBackground#ffffff08
  • editor.lineHighlightBorder#28282800
  • editor.rangeHighlightBackground#ffffff0b
  • editor.rangeHighlightBorder#ffffff00
  • editor.selectionBackground#ffffff10
  • editor.selectionHighlightBackground#add6ff26
  • editor.selectionHighlightBorder#495F77
  • editor.wordHighlightBackground#ffffff10
  • editor.wordHighlightBorder#ffffff00
  • editor.wordHighlightStrongBackground#ffffff10
  • editor.wordHighlightStrongBorder#ff000000
  • editorBracketHighlight.foreground1#d19a66
  • editorBracketHighlight.foreground2#c678dd
  • editorBracketHighlight.foreground3#56b6c2
  • editorBracketMatch.background#ffffff20
  • editorBracketMatch.border#88888800
  • editorCursor.background#ffffffc9
  • editorCursor.foreground#528bff
  • editorError.background#B73A3400
  • editorError.border#ffffff00
  • editorError.foreground#f48771
  • editorGroupHeader.tabsBackground#111827
  • editorGroupHeader.tabsBorder#475569
  • editorGutter.addedBackground#34d399
  • editorGutter.deletedBackground#fb7185
  • editorGutter.modifiedBackground#60a5fa
  • editorHoverWidget.background#1e293b
  • editorHoverWidget.border#2d4358
  • editorHoverWidget.highlightForeground#61afef
  • editorIndentGuide.activeBackground1#ffffff20
  • editorIndentGuide.background1#ffffff20
  • editorInfo.background#4490BF00
  • editorInfo.border#4490BF00
  • editorInfo.foreground#75beff
  • editorInlayHint.background#2d4358
  • editorInlayHint.foreground#abb2bf
  • editorLineNumber.activeForeground#ffffff
  • editorLineNumber.foreground#495162
  • editorLink.activeForeground#4e94ce
  • editorMarkerNavigation.background#0e182c
  • editorOverviewRuler.background#25252500
  • editorOverviewRuler.border#010409
  • editorRuler.foreground#ffffff20
  • editorSuggestWidget.background#1e293b
  • editorSuggestWidget.border#64748b4d
  • editorSuggestWidget.selectedBackground#999FAD
  • editorSuggestWidget.selectedForeground#1b1b1b
  • editorWarning.background#A9904000
  • editorWarning.border#ffffff00
  • editorWarning.foreground#cca700
  • editorWhitespace.foreground#e3e4e229
  • editorWidget.background#0e182c
  • focusBorder#475569
  • foreground#f9fafb
  • gitDecoration.addedResourceForeground#3fb950
  • gitDecoration.conflictingResourceForeground#db6d28
  • gitDecoration.deletedResourceForeground#f85149
  • gitDecoration.ignoredResourceForeground#636b78
  • gitDecoration.modifiedResourceForeground#d29922
  • gitDecoration.submoduleResourceForeground#7d8590
  • gitDecoration.untrackedResourceForeground#3fb950
  • icon.foreground#7d8590
  • input.background#1e293b
  • input.border#475569
  • input.foreground#94a3b8
  • inputOption.hoverBackground#334155
  • keybindingLabel.background#172337
  • keybindingLabel.bottomBorder#475569
  • list.activeSelectionBackground#283447
  • list.activeSelectionForeground#e1e4e8
  • list.focusBackground#1e293b
  • list.focusForeground#f0f0f0
  • list.highlightForeground#ecebeb
  • list.hoverBackground#1e293b
  • list.hoverForeground#e1e4e8
  • list.inactiveFocusBackground#475569
  • list.inactiveSelectionBackground#334155
  • list.inactiveSelectionForeground#e1e4e8
  • list.warningForeground#d19a66
  • menu.foreground#abb2bf
  • menu.separatorBackground#343a45
  • minimapGutter.addedBackground#109868
  • minimapGutter.deletedBackground#9A353D
  • minimapGutter.modifiedBackground#948B60
  • notifications.background#1e293b
  • panel.border#475569
  • panelSectionHeader.background#111827
  • panelTitle.activeBorder#0284c7
  • peekViewEditor.background#1b1d23
  • peekViewEditor.matchHighlightBackground#29244b
  • peekViewResult.background#22262b
  • pickerGroup.border#475569
  • quickInput.background#1e293b
  • quickInputList.focusBackground#999FAD
  • quickInputList.focusForeground#1b1b1b
  • scrollbar.shadow#484f5833
  • scrollbarSlider.activeBackground#8b949e47
  • scrollbarSlider.background#8b949e33
  • scrollbarSlider.hoverBackground#8b949e3d
  • settings.focusedRowBackground#111827
  • settings.headerForeground#ffffff
  • sideBar.background#111827
  • sideBar.border#475569
  • sideBarSectionHeader.background#111827
  • sideBarSectionHeader.border#475569
  • sideBarSectionHeader.foreground#abb2bf
  • statusBar.background#1e293b
  • statusBar.border#475569
  • statusBar.debuggingBackground#cc6633
  • statusBar.debuggingBorder#ff000000
  • statusBar.debuggingForeground#ffffff
  • statusBar.foreground#9da5b4
  • statusBar.noFolderBackground#0e182c
  • statusBarItem.remoteBackground#4d78cc
  • statusBarItem.remoteForeground#f8fafd
  • tab.activeBackground#111827
  • tab.activeBorder#111827
  • tab.activeBorderTop#0284c7
  • tab.activeForeground#dcdcdc
  • tab.border#475569
  • tab.hoverBackground#1e293b
  • tab.inactiveBackground#111827
  • tab.unfocusedHoverBackground#2d4358
  • terminal.ansiBlack#ffffff
  • terminal.ansiBlue#3b82f6
  • terminal.ansiBrightBlack#94a3b8
  • terminal.ansiBrightBlue#60a5fa
  • terminal.ansiBrightCyan#67e8f9
  • terminal.ansiBrightGreen#6ee7b7
  • terminal.ansiBrightMagenta#d8b4fe
  • terminal.ansiBrightRed#fb7185
  • terminal.ansiBrightWhite#ffffff
  • terminal.ansiBrightYellow#fcd34d
  • terminal.ansiCyan#22d3ee
  • terminal.ansiGreen#34d399
  • terminal.ansiMagenta#c084fc
  • terminal.ansiRed#fb7185
  • terminal.ansiWhite#cbd5e1
  • terminal.ansiYellow#fbbf24
  • terminal.background#111827
  • terminal.foreground#f3f4f6
  • terminalCommandDecoration.errorBackground#fb718540
  • terminalCommandDecoration.successBackground#34d39940
  • titleBar.activeBackground#111827
  • titleBar.border#475569
  • titleBar.inactiveBackground#111827

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

scopeforegroundfontStyle
comment#9ca3af—
punctuation#d1d5db—
text.html entity#f472b6—
text.html entity.other.attribute-name#d1d5db—
text.html string.quoted, text.html punctuation.definition.string#7dd3fc—
text.html punctuation, text.html keyword.operator, text.html meta.tag#d1d5db—
text.html meta.tag.sgml, text.html meta.tag.sgml punctuation#93c5fdbf—
text.html entity.name.function#99f6e4—
source.css entity, source.css entity.other.attribute-name.class, source.css entity.other.attribute-name.id, source.css entity.other.attribute-name.pseudo-class, source.css punctuation.definition.entity#f472b6—
source.css meta.attribute-selector, source.css meta.attribute-selector punctuation.definition.string, source.css entity.other.attribute-name#c4b5fd—
source.css keyword.control.at-rule, source.css punctuation.definition.keyword#d1d5db—
source.css meta.property-value, source.css meta.property-value.css punctuation.definition.constant, source.css meta.property-list meta.at-rule, source.css variable.parameter#f9fafb—
source.css constant, source.css support.constant#f9fafb—
source.css meta.property-name, source.css support.type.property-name, source.css string#7dd3fc—
source.css support.function#dbeafe—
source.css keyword.control, source.css keyword.operator#d1d5db—
source.css keyword.other.unit#ccfbf1—
source.css variable, source.css entity.other.attribute-name.placeholder, source.css entity.other.attribute-name.placeholder punctuation.definition.entity#99f6e4—
source.css punctuation.section, source.css punctuation.separator, source.css punctuation.terminator, source.css punctuation.definition.constant, source.css meta.attribute-selector punctuation.definition, source.css punctuation.definition.parameters, source.css punctuation.access, source.css meta.property-list#d1d5db—
source.js meta.block entity.name.tag, source.ts meta.block entity.name.tag, source.tsx meta.block entity.name.tag#f472b6—
source.js meta.block entity.other.attribute-name, source.ts meta.block entity.other.attribute-name, source.tsx meta.block entity.other.attribute-name#d1d5db—
source.js meta.block string.quoted, source.ts meta.block string.quoted, source.tsx meta.block string.quoted, source.js meta.block punctuation.definition.string, source.ts meta.block punctuation.definition.string, source.tsx meta.block punctuation.definition.string#7dd3fc—
source.js meta.block meta.jsx.children, source.ts meta.block meta.jsx.children, source.tsx meta.block meta.jsx.children#f9fafb—
source.js meta.block meta.embedded.expression variable.other, source.ts meta.block meta.embedded.expression variable.other, source.tsx meta.block meta.embedded.expression variable.other, source.js meta.block meta.embedded.expression variable.other.readwrite, source.ts meta.block meta.embedded.expression variable.other.readwrite, source.tsx meta.block meta.embedded.expression variable.other.readwrite#fda4af—
source.js meta.block keyword.operator.ternary, source.ts meta.block keyword.operator.ternary, source.tsx meta.block keyword.operator.ternary#c4b5fd—
source.json support#e5e7eb—
source.json constant#fda4af—
constant.character.escape#cbd5e1—
meta.import string, meta.import string punctuation.definition.string#424b54—
meta.import variable.other.readwrite#7dd3fc—
keyword.control.as, keyword.control.at-rule, keyword.control.default, keyword.control.export, keyword.control.from, keyword.control.import, keyword.import.go, meta.import, meta.import keyword.control.from, keyword.input, keyword.operator.type.annotation, keyword.other.sql.sqlite, keyword.package.go, keyword.type, punctuation.decorator, punctuation.definition, punctuation.definition.binding-pattern.object, punctuation.definition.block.tag.jsdoc, storage.type.class.jsdoc, support.type.object.module.js#d1d5db—
Constants, constant.other.object.key.js, entity.name, entity.name.method.js, entity.name.module.js, entity.name.module.js, entity.name.type, entity.name.type.class, invalid, invalid.illegal, keyword.control, punctuation.definition.binding-pattern.array, markup.bold markup.italic string, markup.bold markup.italic, markup.bold string, markup.bold, markup.deleted, markup.deleted.git_gutter, markup.italic markup.bold string, markup.italic markup.bold, markup.italic, markup.quote markup.bold string, markup.quote markup.bold, markup.underline, meta.brace.square, meta.class-method.js, meta.structure.dictionary.json, meta.structure.dictionary.value.json, source.js, source.json, source.sass, string.other.link, string.other.link.title.markdown, string.unquoted.label.js, support.class.component, support.other.variable, support.type, support.variable.object.node, tag.decorator.js punctuation.definition.tag.js, tag.decorator.js, variable.function.constructor, variable.import.parameter.js, variable.language, variable.other.class.js, variable.other.property, variable.other.readwrite.alias, variable.other.readwrite.alias.tsx#00cecb—
keyword.control.flow, keyword.function.go, keyword.input.graphql, keyword.type.graphql, keyword.control.at-rule.function, keyword.control.return.scss, storage.modifier, storage.modifier.async, storage.type.class, storage.type.enum, storage.type.function, storage.type.interface, storage.type.property, storage.type.type, support.function, punctuation.section.embedded.begin, punctuation.section.embedded.end, punctuation.section.embedded.begin.jsx, punctuation.section.embedded.begin.tsx, punctuation.section.embedded.end.jsx, punctuation.section.embedded.end.tsx, punctuation.definition.parameters.begin.jsx, punctuation.definition.parameters.begin.tsx, punctuation.definition.parameters.end.jsx, punctuation.definition.parameters.end.tsx, punctuation.definition.template-expression.begin, punctuation.definition.template-expression.end#a29bfe—
constant, constant.numeric, constant.other.caps.python, constant.other.placeholder, fenced_code.block.language, keyword.operator, keyword.operator.assignment, keyword.operator.assignment.compound, keyword.operator.new, keyword.other.unit, markup.bold, markup.deleted, meta.group.regexp, punctuation.accessor.optional, punctuation.definition.tag.begin, punctuation.definition.tag.end, punctuation.definition.constant, source.php, storage.type.function.arrow, support.class, support.constant, support.type.exception.python, variable#e84855—
entity.name.function.sql.sqlite, entity.name.tag.yaml, keyword.other.special-method, markup.raw.block.fenced.markdown, markup.table, meta.function-call, punctuation.definition.list_item.markdown, punctuation.section.class.end, support.function.builtin.python, support.function, support.function.magic.python, variable.function, variable.language.fenced.markdown, variable.other.bare#23d18c—
constant.character.escape, constant.other.color, keyword, keyword.control, keyword.operator.type.annotation.tsx, keyword.other.substitution, keyword.other.template, markup.changed, markup.quote punctuation.definition.blockquote.markdown, markup.raw.block, meta.function-call.sql.sqlite, meta.parens, meta.separator, meta.tag, punctuation, punctuation.definition.tag, punctuation.section.embedded, punctuation.separator.inheritance.php, punctuation.definition.section.case-statement, string.other.link.description.title.markdown, string.quoted.docstring.multi, string.quoted.docstring.multi.python constant.character.escape, string.quoted.docstring.multi.python punctuation.definition.string.begin, string.quoted.docstring.multi.python punctuation.definition.string.end, string.regexp, variable.language.fenced.markdown#424b54—
support.type.property-name.json, variable.other.env, keyword.other.definition.insert_final_newline.editorconfig, keyword.other.definition.root.editorconfig, keyword.other.definition.indent_size.editorconfig, keyword.other.definition.indent_style.editorconfig, keyword.other.definition.indent_style.editorconfig, keyword.other.definition.end_of_line.editorconfig, keyword.other.definition.charset.editorconfig, keyword.other.definition.trim_trailing_whitespace.editorconfig#00cecb—
constant.character, constant.escape, constant.language, constant.numeric, keyword.other, keyword.other.unit, keyword.control.trycatch, source.json, support.constant, support.variable.property#f0aa85—
keyword.control.as, keyword.operator.assignment.env, punctuation.separator.key-value.editorconfig, meta.brace.round, punctuation.definition.parameters.begin, punctuation.definition.parameters.end, punctuation.section.function.begin.bracket.round, punctuation.section.function.end.bracket.round, punctuation.definition.media-query.begin.bracket.round, punctuation.definition.media-query.end.bracket.round, source meta.block keyword.control.loop, source switch-statement.expr switch-block.expr keyword.control.loop, storage.type#ff5d8f—
constant.character.escape.backslash.regexp, entity.name.type.instance.jsdoc, entity.other.inherited-class, keyword.control.loop, meta.structure.dictionary.value.json, source.js meta.arrow.js meta.block.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.arrow.js meta.block.js meta.var.expr.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.var.expr.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.var.expr.js meta.objectliteral.js meta.object.member.js meta.objectliteral.js meta.object.member.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.var.expr.js meta.function-call.js variable.other.object.js, source.js meta.export.default.js meta.function.expression.js meta.block.js meta.tag.without-attributes.js meta.jsx.children.js meta.tag.without-attributes.js meta.jsx.children.js meta.tag.js meta.tag.attributes.js, source.json#f49e4c—
entity.name, markup.changed.git_gutter, variable.other.object, meta.use.php, support.class, support.orther.namespace.use.php, support.other.namespace.php, support.type.builtin.graphql, support.type.primitive, support.type.sys-types#eab464—
keyword.control.conditional, keyword.control.switch#f38375—
*link*, *uri*, *url*—underline
constant.other.color, markup.inline.raw.markdown, meta.definition.property.tsx, meta.object-literal.key, punctuation.definition.raw.markdown, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.block.js meta.objectliteral.js meta.object.member.js meta.objectliteral.js meta.object.member.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.objectliteral.js meta.object.member.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.objectliteral.js meta.object.member.js meta.objectliteral.js meta.object.member.js meta.function-call.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.block.js meta.var.expr.js meta.objectliteral.js meta.object.member.js variable.other.object.js, source.js meta.class.js meta.method.declaration.js meta.block.js meta.var.expr.js meta.function-call.js variable.other.object.js, source.less, source.sass, source.stylus, source meta.class meta.method.declaration meta.block meta.block meta.arrow meta.block variable.other.object, source.ts meta.class.ts meta.field.declaration.ts meta.definition.property.ts variable.object.property.ts, source.ts meta.interface.ts meta.field.declaration.ts meta.definition.property.ts variable.object.property.ts, source.ts meta.type.declaration.ts meta.object.type.ts meta.field.declaration.ts meta.definition.property.ts variable.object.property.ts, string.quoted.double.env, string.quoted.double.json, string.quoted.single.env, string.quoted.single.yaml, string.unquoted.plain.out.yaml, support.type.property-name, variable.graphql, variable.object.property.tsx, variable.other.constant, variable.other.jsdoc, variable.other.object.property, variable.other.readwrite, variable.parameter#e9dbdb—
constant.other.key, constant.other.object.key.js, constant.other.refzortce.link.markdown, constant.other.symbol, entity.name, markdown.heading, markup.heading, markup.heading, markup.heading.markdown, markup.inserted, markup.inserted.git_gutter, meta.group.braces.curly, meta.jsx.children, meta.structure.dictionary.jsoYn, meta.structure.dictionary.value.json, punctuation.definition.block, punctuation.definition.binding-pattern.object, punctuation.section.property-list.begin.bracket.curly, punctuation.section.property-list.end.bracket.curly, punctuation.definition.interpolation.begin.bracket.curly, punctuation.definition.interpolation.end.bracket.curly, punctuation.definition.heading.markdown, source.json, string.unquoted.label.js, string#ffe066—
source.json meta.structure.dictionary.json > string.quoted.json#e06c75—
source.json meta.structure.dictionary.json > string.quoted.json > punctuation.string#e06c75—
source.json meta.structure.dictionary.json > value.json > string.quoted.json,source.json meta.structure.array.json > value.json > string.quoted.json,source.json meta.structure.dictionary.json > value.json > string.quoted.json > punctuation,source.json meta.structure.array.json > value.json > string.quoted.json > punctuation#4ade80—
source.json meta.structure.dictionary.json > constant.language.json,source.json meta.structure.array.json > constant.language.json#56b6c2—
support.type.property-name.json#4ade80—
support.type.property-name.json punctuation#4ade80—
Rhodium by mataga - VS Code Theme