Rouge Theme
Publisher: josefThemes in package: 3
Warm and cozy dark theme for VSCode
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#17182B
- activityBar.border#151627
- activityBar.foreground#A2A3AA
- activityBarBadge.background#C6797E
- activityBarBadge.foreground#F9F2F2
- badge.background#C6797E
- badge.foreground#F9F2F2
- breadcrumb.activeSelectionForeground#C6797E
- breadcrumb.background#151627
- breadcrumb.focusForeground#E8C9CB
- breadcrumb.foreground#A2A3AA
- breadcrumbPicker.background#151627
- button.background#39555A
- button.foreground#EBEEEF
- button.hoverBackground#74888C
- debugConsole.errorForeground#DB6375
- debugConsole.infoForeground#1E6378
- debugConsole.sourceForeground#A2A3AA
- debugConsole.warningForeground#EA9881
- debugExceptionWidget.background#17182B
- debugExceptionWidget.border#B26D7166
- debugIcon.breakpointCurrentStackframeForeground#C5B99A
- debugIcon.breakpointDisabledForeground#833B46
- debugIcon.breakpointForeground#DB6375
- debugIcon.breakpointUnverifiedForeground#C5B99A
- debugIcon.continueForeground#39555A
- debugIcon.disconnectForeground#39555A
- debugIcon.pauseForeground#B7B8C9
- debugIcon.startForeground#878E83
- debugIcon.stepBackForeground#39555A
- debugIcon.stepIntoForeground#39555A
- debugIcon.stepOutForeground#39555A
- debugIcon.stepOverForeground#39555A
- debugIcon.stopForeground#C55969
- debugToolBar.background#17182B
- debugToolBar.border#969E9299
- descriptionForeground#5D5D6B
- diffEditor.border#5D5D6B4c
- diffEditor.diagonalFill#5D5D6B4c
- diffEditor.insertedTextBackground#878E834c
- diffEditor.removedTextBackground#C559694c
- dropdown.background#17182B
- dropdown.border#C6797E
- dropdown.foreground#A2A3AA
- dropdown.listBackground#17182B
- editor.background#151627
- editor.findMatchBackground#39555A99
- editor.findMatchHighlightBackground#39555A99
- editor.findRangeHighlightBackground#39555A4c
- editor.foreground#A2A3AA
- editor.hoverHighlightBackground#39555A4c
- editor.inactiveSelectionBackground#39555A4c
- editor.lineHighlightBackground#39555A21
- editor.selectionBackground#39555A99
- editor.selectionForeground#39555A
- editor.symbolHighlightBackground#39555A99
- editor.wordHighlightBackground#39555A99
- editor.wordHighlightStrongBackground#39555Ad8
- editorBracketMatch.background#5D5D6B33
- editorBracketMatch.border#5A5F58
- editorCodeLens.foreground#758095
- editorCursor.background#969E92
- editorCursor.foreground#969E92
- editorError.foreground#DB6375e5
- editorGroup.background#17182B
- editorGroupHeader.noTabsBackground#17182B
- editorGroupHeader.tabsBackground#17182B
- editorGroupHeader.tabsBorder#44466C99
- editorGutter.addedBackground#969E92cc
- editorGutter.background#151627
- editorGutter.deletedBackground#DB6375cc
- editorGutter.modifiedBackground#DBCDABcc
- editorHoverWidget.background#151627
- editorHoverWidget.border#44466C
- editorLightBulbAutoFix.background#EA9881
- editorLineNumber.activeForeground#A2A3AA
- editorLineNumber.foreground#5D5D6Bb2
- editorLink.activeForeground#A2A3AA
- editorMarkerNavigation.background#17182B
- editorMarkerNavigationError.background#DB637566
- editorMarkerNavigationInfo.background#4C4E7866
- editorMarkerNavigationWarning.background#EA988166
- editorOverviewRuler.addedForeground#878E83
- editorOverviewRuler.border#5D5D6B4c
- editorOverviewRuler.currentContentForeground#A2A3AA
- editorOverviewRuler.deletedForeground#C55969
- editorOverviewRuler.errorForeground#DB6375
- editorOverviewRuler.findMatchForeground#334D51
- editorOverviewRuler.incomingContentForeground#A2A3AA
- editorOverviewRuler.infoForeground#6292A1
- editorOverviewRuler.modifiedForeground#C5B99A
- editorOverviewRuler.selectionHighlightForeground#39555A66
- editorSuggestWidget.background#17182B
- editorSuggestWidget.border#44466C
- editorSuggestWidget.foreground#A2A3AA
- editorSuggestWidget.highlightForeground#D7A1A5
- editorSuggestWidget.selectedBackground#5D5D6B4c
- editorWarning.foreground#EA9881e5
- editorWidget.background#17182B
- editorWidget.border#C6797E
- editorWidget.resizeBorder#C6797E
- errorForeground#C55969
- extensionButton.prominentBackground#39555A
- extensionButton.prominentForeground#EBEEEF
- extensionButton.prominentHoverBackground#74888C
- focusBorder#5D5D6B
- gitDecoration.conflictingResourceForeground#8283A1
- gitDecoration.deletedResourceForeground#C55969
- gitDecoration.ignoredResourceForeground#5D5D6B
- gitDecoration.modifiedResourceForeground#C5B99A
- gitDecoration.untrackedResourceForeground#878E83
- input.background#17182B
- input.border#B26D71
- input.foreground#A2A3AA
- input.placeholderForeground#5D5D6B
- inputOption.activeBorder#C6797E
- inputValidation.errorBackground#833B46
- inputValidation.errorForeground#F1C1C8
- inputValidation.infoBackground#1A1C32
- inputValidation.infoForeground#A5A5AF
- list.activeSelectionBackground#C6797Ebf
- list.activeSelectionForeground#F9F2F2
- list.dropBackground#5D5D6B4c
- list.errorForeground#C55969
- list.filterMatchBackground#5D5D6B7f
- list.focusBackground#5D5D6B7f
- list.focusForeground#E8E8EA
- list.highlightForeground#D7A1A5
- list.hoverBackground#5D5D6B4c
- list.hoverForeground#E8E8EA
- list.inactiveFocusBackground#5D5D6B26
- list.inactiveFocusForeground#5D5D6B
- list.inactiveSelectionBackground#5D5D6B4c
- list.inactiveSelectionForeground#E8E8EAe5
- list.invalidItemForeground#C55969
- list.warningForeground#DB6375cc
- listFilterWidget.background#17182B
- listFilterWidget.noMatchesOutline#77494C
- listFilterWidget.outline#C6797E
- merge.commonContentBackground#5D5D6B33
- merge.commonHeaderBackground#5D5D6B4c
- merge.currentContentBackground#39555A66
- merge.currentHeaderBackground#5A5F58
- merge.incomingContentBackground#123B4866
- merge.incomingHeaderBackground#123B48
- minimap.errorHighlight#878E83
- minimap.findMatchHighlight#39555A
- minimap.selectionHighlight#5D5D6B
- minimap.warningHighlight#DBCDAB
- minimapGutter.addedBackground#878E83
- minimapGutter.deletedBackground#C55969
- minimapGutter.modifiedBackground#C5B99Acc
- notificationCenter.border#44466C
- notificationCenterHeader.background#111322
- notificationCenterHeader.foreground#A2A3AA
- notificationLink.foreground#74888C
- notifications.background#1A1C32
- notifications.border#44466C
- notifications.foreground#A2A3AA
- notificationToast.border#44466C
- panel.background#17182B
- panel.border#44466C66
- panel.dropBackground#5D5D6B19
- panelTitle.activeBorder#8283A1
- panelTitle.activeForeground#A2A3AA
- panelTitle.inactiveForeground#5D5D6B
- peekView.border#44466C
- peekViewEditor.background#17182B
- peekViewEditor.matchHighlightBackground#39555A7f
- peekViewEditor.matchHighlightBorder#39555Acc
- peekViewEditorGutter.background#151627
- peekViewResult.background#17182B
- peekViewResult.matchHighlightBackground#39555Ab2
- peekViewResult.matchHighlightBorder#39555Ae5
- peekViewResult.selectionBackground#5D5D6B33
- peekViewResult.selectionForeground#E8E8EA
- peekViewTitle.background#0E0E1A
- peekViewTitleDescription.foreground#A2A3AA
- peekViewTitleLabel.foreground#E8E8EA
- pickerGroup.border#8283A1
- pickerGroup.foreground#D7A1A5
- progressBar.background#B26D71
- quickInput.list.focusBackground#5D5D6B7f
- sash.hoverBorder#C6797E
- scrollbar.shadow#77494C19
- scrollbarSlider.activeBackground#C6797Ebf
- scrollbarSlider.background#B26D7199
- scrollbarSlider.hoverBackground#C6797E99
- selection.background#39555A99
- settings.checkboxBackground#17182B
- settings.checkboxBorder#44466Ce5
- settings.checkboxForeground#A2A3AA
- settings.dropdownBackground#17182B
- settings.dropdownBorder#44466Ce5
- settings.dropdownForeground#A2A3AA
- settings.headerForeground#A2A3AA
- settings.inactiveSelectedItemBorder#44466C99
- settings.modifiedItemIndicator#C6797E
- settings.numberInputBackground#17182B
- settings.numberInputBorder#44466Ce5
- settings.numberInputForeground#A2A3AA
- settings.textInputBackground#17182B
- settings.textInputBorder#44466Ce5
- settings.textInputForeground#A2A3AA
- sideBar.background#17182B
- sideBar.border#44466C66
- sideBar.dropBackground#C6797E
- sideBar.foreground#A2A3AA
- sideBarSectionHeader.background#17182B
- sideBarSectionHeader.foreground#E8E8EA
- statusBar.background#17182B
- statusBar.debuggingBackground#878E83
- statusBar.debuggingForeground#F5F5F4
- statusBar.foreground#A2A3AA
- statusBar.noFolderBackground#B26D71
- statusBar.noFolderForeground#F9F2F2
- statusBarItem.activeBackground#C6797E
- statusBarItem.activeForeground#F9F2F2
- statusBarItem.hoverBackground#5D5D6B7f
- statusBarItem.prominentBackground#4C4E78
- statusBarItem.prominentHoverBackground#8283A199
- tab.activeBackground#5D5D6B4c
- tab.activeForeground#E8E8EA
- tab.border#44466C66
- tab.inactiveBackground#17182B
- tab.inactiveForeground#A2A3AA
- tab.unfocusedActiveForeground#E8E8EA7f
- tab.unfocusedInactiveForeground#5D5D6B
- terminal.ansiBlack#5D5D6B
- terminal.ansiBlue#6e94b9
- terminal.ansiBrightBlack#616274
- terminal.ansiBrightBlue#98b3cd
- terminal.ansiBrightCyan#abcbd3
- terminal.ansiBrightGreen#B6BBB3
- terminal.ansiBrightMagenta#8283A1
- terminal.ansiBrightRed#C6797E
- terminal.ansiBrightWhite#E8E8EA
- terminal.ansiBrightYellow#E6DCC4
- terminal.ansiCyan#8ab6c1
- terminal.ansiGreen#969E92
- terminal.ansiMagenta#4C4E78
- terminal.ansiRed#C6797E
- terminal.ansiWhite#E8E8EA
- terminal.ansiYellow#DBCDAB
- terminal.background#17182B
- terminal.foreground#A2A3AA
- terminalCursor.background#969E92
- terminalCursor.foreground#969E92
- textBlockQuote.background#39555A4c
- textBlockQuote.border#39555A
- textCodeBlock.background#07070D
- textLink.activeForeground#E8C9CB
- textLink.foreground#74888C
- textPreformat.foreground#C6797E
- titleBar.activeBackground#17182B
- titleBar.activeForeground#A2A3AA
- titleBar.inactiveBackground#B26D71d8
- titleBar.inactiveForeground#E8C9CB
- tree.indentGuidesStroke#44466C
- walkThrough.embeddedEditorBackground#151627
- welcomePage.background#151627
- welcomePage.buttonBackground#151627
- welcomePage.buttonHoverBackground#39555A4c
- widget.shadow#0E0E1A
tokenColors
TextMate scopes and font styles (syntax highlighting rules).
| scope | foreground | fontStyle |
|---|---|---|
| comment, punctuation.definition.comment, unused.comment, wildcard.comment | #5D5D6B | italic |
| constant | #F0B7A7 | — |
| entity, entity.name.function | #D7A1A5 | — |
| entity.name | #C6797E | — |
| entity.name.type | #D7A1A5 | — |
| invalid | — | — |
| keyword | #8283A1 | italic |
| keyword.operator | #8283A1 | regular |
| keyword.operator.new | — | italic |
| variable.language.this | — | italic |
| meta.object-literal.key | #A2A3AA | — |
| meta.function.expression | #8283A1 | — |
| variable | #C6797E | — |
| support | #DBCDABe5 | — |
| support.function | #D7A1A5 | — |
| support.variable | #C6797E | — |
| support.variable | #DBCDABe5 | — |
| punctuation | #8283A1 | — |
| punctuation.definition | #8283A1 | — |
| meta.brace | #8283A1 | — |
| punctuation.accessor | #8283A1 | — |
| punctuation.terminator | #8283A1 | — |
| punctuation.separator | #8283A1 | — |
| entity.other.attribute-name | #DBCDABe5 | italic |
| entity.name.tag, entity.name.tag.other.html | #C6797E | — |
| text.html meta.element.metadata.svg | #A2A3AA | — |
| support.type.property-name.json | #A2A3AA | — |
| source.shell | #A2A3AA | — |
| storage | #8283A1 | italic |
| storage.type.function.arrow | #8283A1 | regular |
| string, punctuation.definition.string | #969E92 | — |
| variable.parameter, meta.parameter | #DB6375 | — |
| support.type.property-name.css, support.type.property-name.scss | #A2A3AA | — |
| support.constant.property-value.css, meta.property-value.css, source.css support.constant, source.css keyword.other.unit | #969E92 | none |
| punctuation.definition.constant.css | #969E92 | none |
| entity.name.tag.css | #C6797E | — |
| entity.other.attribute-name.class.css | #DBCDABe5 | none |
| source.css support | #A2A3AA | — |
| source.yaml entity.name.tag | #C6797E | — |
| punctuation.definition.tag.html, punctuation.definition.tag.begin.html, punctuation.definition.tag.end.html, meta.scope.between-tag-pair.html | #5D5D6B | — |
| punctuation.definition.tag.xml, punctuation.definition.tag.begin.xml, punctuation.definition.tag.end.xml, meta.scope.between-tag-pair.xml | #5D5D6B | — |
| entity.other.attribute-name.localname.xml, text.xml entity.other | #DBCDABe5 | italic |
| text.xml entity.name | #C6797E | — |
| meta.object-literal.key | #A2A3AA | — |
| source.js entity.name.tag.js, source.jsx entity.name.tag.js, entity.name.tag.js | #C6797E | — |
| source.js support.class.component, source.jsx support.class.component, support.class.component.js | #D7A1A5 | — |
| source.js punctuation.definition.tag.begin, source.js punctuation.definition.tag.end, source.jsx punctuation.definition.tag.begin, source.jsx punctuation.definition.tag.end, punctuation.definition.tag.begin.js, punctuation.definition.tag.end.js | #5D5D6B | — |
| source.js entity.other.attribute-name, source.jsx entity.other.attribute-name, entity.other.attribute-name.js meta.tag.attributes.js, entity.other.attribute-name.js | #DBCDABe5 | italic |
| source.js meta.jsx.children meta.object-literal.key, source.jsx meta.jsx.children meta.object-literal.key | #A2A3AA | — |
| source.js meta.tag variable.other.readwrite, source.jsx meta.tag variable.other.readwrite | #C6797E | — |
| source.js meta.jsx.children, source.jsx meta.jsx.children | #A2A3AA | — |
| source.svelte entity.name.tag | #C6797E | — |
| support.class.component.svelte | #D7A1A5 | — |
| entity.name.section.markdown, markup.heading.setext.1.markdown, markup.heading.setext.2.markdown | #B26D71 | bold |
| meta.paragraph.markdown | #A2A3AA | — |
| markup.quote.markdown meta.paragraph.markdown | — | italic |
| markup.inline.raw.string.markdown | #969E92 | — |
| markup.bold.markdown, markup.bold.markdown punctuation.definition.bold.markdown | — | bold |
| markup.italic.markdown | — | italic |
| string.other.link.title.markdown, string.other.link.description.markdown, string.other.link.description.title.markdown | #D7A1A5 | — |
| markup.underline.link.markdown, markup.underline.link.image.markdown | #74888C | — |
| meta.paragraph.markdown meta.other | #A2A3AA | — |
| markup.error | #C55969d8 | — |
| markup.inserted | #969E92 | — |
| markup.deleted | #C55969d8 | — |
| markup.changed | #DBCDABe5 | — |
Shiki preview
TypeScript sample highlighted with this variant's colors and tokenColors.
Loading...