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#4d78cc
- activityBarBadge.foreground#f8fafd
- badge.background#94a3b81a
- 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
- 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 | — |
| constant | #fde68a | — |
| entity | #d1d5db | — |
| entity.name | #f472b6 | — |
| entity.name.function | #99f6e4 | — |
| keyword | #c4b5fd | — |
| meta.function.c,meta.function.cpp | #e06c75 | — |
| punctuation.section.block.begin.bracket.curly.cpp,punctuation.section.block.end.bracket.curly.cpp,punctuation.terminator.statement.c,punctuation.section.block.begin.bracket.curly.c,punctuation.section.block.end.bracket.curly.c,punctuation.section.parens.begin.bracket.round.c,punctuation.section.parens.end.bracket.round.c,punctuation.section.parameters.begin.bracket.round.c,punctuation.section.parameters.end.bracket.round.c | #abb2bf | — |
| keyword.operator.assignment,keyword.operator.comparison.c,keyword.operator.c,keyword.operator.increment.c,keyword.operator.decrement.c,keyword.operator.bitwise.shift.c,keyword.operator.assignment.cpp,keyword.operator.comparison.cpp,keyword.operator.cpp,keyword.operator.increment.cpp,keyword.operator.decrement.cpp,keyword.operator.bitwise.shift.cpp | #9ca3af | — |
| storage | #d1d5db | — |
| string, punctuation.definition.string | #7dd3fc | — |
| support | #c4b5fd | — |
| variable | #fda4af | — |
| variable.other.constant.object | #fda4af | — |
| 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 | — |
| variable.other.property.js | #d1d5db | — |
| meta.import keyword.control.import | #d1d5db | — |
| meta.import keyword.control.from, meta.import punctuation | #d1d5db | — |
| meta.import string, meta.import string punctuation.definition.string | #e5e7eb | — |
| meta.import variable.other.readwrite | #7dd3fc | — |
| 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 | — |