Rhodium
Publisher: matagaThemes in package: 2
A minimal and elegant VS Code theme inspired by the modern colors of Tailwind and Next.js.
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).
| scope | foreground | fontStyle |
|---|---|---|
| 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 | — |