Rui Color Themes

Color themes

• 

  Rui Cobalt

• 

  Rui Emerald

• 

  Rui Jade

• 

  Rui Opal

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.activeBorder#395ea8
• activityBar.background#0e3028
• activityBar.border#555555
• activityBar.dropBackground#80808040
• activityBar.dropBorder#528bff
• activityBar.foreground#d7dae0
• activityBar.inactiveForeground#9da5b4
• activityBarBadge.background#395ea8
• activityBarBadge.foreground#d7dae0
• badge.background#3e4451
• badge.foreground#d7dae0
• breadcrumb.activeSelectionForeground#d7dae0
• breadcrumb.focusForeground#d7dae0
• breadcrumb.foreground#9da5b4
• button.background#353b45
• button.foreground#9da5b4
• button.hoverBackground#3a3f4b
• debugTokenExpression.boolean#dda666
• debugTokenExpression.error#ff6347
• debugTokenExpression.name#e06c75
• debugTokenExpression.number#dda666
• debugTokenExpression.string#98c379
• debugTokenExpression.value#56b6c2
• debugToolBar.background#252930
• debugView.exceptionLabelBackground#d13b2e
• debugView.exceptionLabelForeground#9da5b4
• debugView.stateLabelBackground#2ba143
• debugView.valueChangedHighlight#0f82e6
• descriptionForeground#9da5b499
• diffEditor.border#181a1f
• diffEditor.diagonalFill#c6c6c626
• diffEditor.insertedTextBackground#43d08a3d
• diffEditor.removedTextBackground#e052523d
• dropdown.background#1b1d23
• dropdown.border#181a1f
• dropdown.foreground#9da5b4
• dropdown.listBackground#252930
• editor.background#0e3028
• editor.findMatchBackground#528bff3d
• editor.findMatchBorder#528bff
• editor.findMatchHighlightBackground#528bff3d
• editor.findRangeHighlightBackground#3e4451
• editor.focusedStackFrameHighlightBackground#ad7c0b
• editor.foldBackground#99bbff0a
• editor.foreground#c6c6c6
• editor.hoverHighlightBackground#00000000
• editor.inactiveSelectionBackground#3e4451
• editor.lineHighlightBackground#99bbff0a
• editor.lineHighlightBorder#00000000
• editor.selectionBackground#3e4451
• editor.selectionHighlightBackground#99bbff0a
• editor.snippetFinalTabstopHighlightBorder#828997
• editor.snippetTabstopHighlightBackground#528bff3d
• editor.stackFrameHighlightBackground#ad7c0b
• editor.wordHighlightBackground#00000000
• editor.wordHighlightStrongBackground#00000000
• editorBracketMatch.background#00000000
• editorBracketMatch.border#528bff
• editorCodeLens.foreground#5c6370
• editorCursor.foreground#528bff
• editorError.foreground#ff6347
• editorGroup.border#b5a236
• editorGroup.dropBackground#80808040
• editorGroupHeader.border#181a1f
• editorGroupHeader.noTabsBackground#21252b
• editorGroupHeader.tabsBackground#21252b
• editorGroupHeader.tabsBorder#00000000
• editorGutter.addedBackground#43d08a
• editorGutter.background#0e3028
• editorGutter.commentRangeForeground#c6c6c626
• editorGutter.deletedBackground#e05252
• editorGutter.modifiedBackground#e0c285
• editorHint.foreground#6494ed
• editorHoverWidget.statusBarBackground#252930
• editorIndentGuide.activeBackground#636d83
• editorIndentGuide.background#c6c6c626
• editorInfo.foreground#6494ed
• editorLineNumber.activeForeground#c6c6c6
• editorLineNumber.foreground#636d83
• editorLink.activeForeground#56b6c2
• editorMarkerNavigation.background#31363f
• editorMarkerNavigationError.background#d13b2e
• editorMarkerNavigationInfo.background#0f82e6
• editorMarkerNavigationWarning.background#ad7c0b
• editorOverviewRuler.addedForeground#43d08a
• editorOverviewRuler.border#00000000
• editorOverviewRuler.bracketMatchForeground#3e4451
• editorOverviewRuler.deletedForeground#e05252
• editorOverviewRuler.errorForeground#ff6347
• editorOverviewRuler.findMatchForeground#3e4451
• editorOverviewRuler.infoForeground#6494ed
• editorOverviewRuler.modifiedForeground#e0c285
• editorOverviewRuler.selectionHighlightForeground#3e4451
• editorOverviewRuler.warningForeground#e2c08d
• editorOverviewRuler.wordHighlightForeground#3e4451
• editorOverviewRuler.wordHighlightStrongForeground#3e4451
• editorRuler.foreground#c6c6c626
• editorSuggestWidget.highlightForeground#d7dae0
• editorWarning.foreground#e2c08d
• editorWhitespace.foreground#c6c6c626
• editorWidget.background#252930
• editorWidget.border#181a1f
• editorWidget.resizeBorder#252930
• errorForeground#ff6347
• extensionButton.prominentBackground#395ea8
• extensionButton.prominentForeground#ffffff
• extensionButton.prominentHoverBackground#395ea8
• focusBorder#528bff
• foreground#9da5b4
• gitDecoration.addedResourceForeground#73c990
• gitDecoration.deletedResourceForeground#ff6347
• gitDecoration.ignoredResourceForeground#9da5b499
• gitDecoration.modifiedResourceForeground#e2c08d
• gitDecoration.untrackedResourceForeground#73c990
• icon.foreground#9da5b4
• imagePreview.border#181a1f
• input.background#1b1d23
• input.border#181a1f
• input.foreground#d7dae0
• input.placeholderForeground#9da5b499
• inputOption.activeBackground#395ea8
• inputOption.activeBorder#00000000
• inputOption.activeForeground#ffffff
• inputValidation.errorBackground#d13b2e
• inputValidation.errorBorder#ff6347
• inputValidation.errorForeground#d7dae0
• inputValidation.infoBackground#0f82e6
• inputValidation.infoBorder#6494ed
• inputValidation.infoForeground#d7dae0
• inputValidation.warningBackground#ad7c0b
• inputValidation.warningBorder#e2c08d
• inputValidation.warningForeground#d7dae0
• list.activeSelectionBackground#395ea8
• list.activeSelectionForeground#ffffff
• list.deemphasizedForeground#9da5b499
• list.dropBackground#31363f
• list.errorForeground#ff6347
• list.focusBackground#3a3f4b
• list.focusForeground#ffffff
• list.highlightForeground#528bff
• list.hoverBackground#00000000
• list.inactiveFocusBackground#3a3f4b
• list.inactiveSelectionBackground#3a3f4b
• list.invalidItemForeground#ff6347
• list.warningForeground#e2c08d
• listFilterWidget.background#1b1d23
• listFilterWidget.noMatchesOutline#ff6347
• listFilterWidget.outline#528bff
• menu.background#31363f
• menu.foreground#d7dae0
• menu.selectionBackground#395ea8
• menu.separatorBackground#181a1f
• menubar.selectionBackground#395ea8
• minimap.errorHighlight#ff6347
• minimap.findMatchHighlight#528bff
• minimap.selectionHighlight#528bff3d
• minimap.warningHighlight#e2c08d
• minimapGutter.addedBackground#73c990
• minimapGutter.deletedBackground#ff6347
• minimapGutter.modifiedBackground#e2c08d
• minimapSlider.activeBackground#4b5362cc
• minimapSlider.background#4b536280
• minimapSlider.hoverBackground#4b5362cc
• notificationCenterHeader.background#282c34
• notificationCenterHeader.foreground#d7dae0
• notifications.background#31363f
• notifications.border#181b20d9
• panel.background#0e3028
• panel.border#b53636
• panel.dropBackground#80808040
• panelInput.border#181a1f
• panelSectionHeader.background#282c34
• panelTitle.activeBorder#00000000
• panelTitle.activeForeground#d7dae0
• panelTitle.inactiveForeground#9da5b499
• peekView.border#528bff
• peekViewEditor.background#31363f
• peekViewEditor.matchHighlightBackground#528bff3d
• peekViewResult.background#282c34
• peekViewResult.fileForeground#d7dae0
• peekViewResult.lineForeground#9da5b4
• peekViewResult.matchHighlightBackground#528bff3d
• peekViewResult.selectionBackground#395ea8
• peekViewResult.selectionForeground#ffffff
• peekViewTitle.background#282c34
• peekViewTitleDescription.foreground#9da5b4
• peekViewTitleLabel.foreground#d7dae0
• pickerGroup.border#181a1f
• pickerGroup.foreground#9da5b4
• progressBar.background#528bff
• quickInput.background#252930
• quickInputTitle.background#252930
• scrollbar.shadow#00000000
• scrollbarSlider.activeBackground#4b5362cc
• scrollbarSlider.background#4b536280
• scrollbarSlider.hoverBackground#4b5362cc
• searchEditor.findMatchBackground#528bff3d
• selection.background#528afe
• settings.headerForeground#d7dae0
• settings.modifiedItemIndicator#73c990
• sideBar.background#0e3028
• sideBar.border#b53636
• sideBar.dropBackground#80808040
• sideBar.foreground#9da5b4
• sideBarSectionHeader.background#282c34
• sideBarSectionHeader.foreground#9da5b4
• sideBarTitle.foreground#d7dae0
• statusBar.background#21252b
• statusBar.border#181a1f
• statusBar.debuggingForeground#ffffff
• statusBar.foreground#9da5b4
• statusBar.noFolderBackground#21252b
• statusBarItem.activeBackground#282c34
• statusBarItem.hoverBackground#2f333d
• statusBarItem.prominentBackground#395ea8
• statusBarItem.prominentForeground#ffffff
• statusBarItem.prominentHoverBackground#395ea8
• tab.activeBackground#0e3028
• tab.activeBorder#00000000
• tab.activeForeground#d7dae0
• tab.activeModifiedBorder#528bff
• tab.border#181a1f
• tab.hoverForeground#d7dae0
• tab.inactiveBackground#21252b
• tab.inactiveForeground#9da5b499
• tab.inactiveModifiedBorder#528bff
• tab.unfocusedActiveBorder#00000000
• tab.unfocusedActiveForeground#d7dae0
• tab.unfocusedActiveModifiedBorder#528bff
• tab.unfocusedInactiveForeground#9da5b499
• tab.unfocusedInactiveModifiedBorder#528bff
• textBlockQuote.background#31363f
• textBlockQuote.border#00000000
• textCodeBlock.background#31363f
• textLink.activeForeground#528bff
• textLink.foreground#528bff
• titleBar.activeBackground#21252b
• titleBar.activeForeground#d7dae0
• titleBar.border#181a1f
• titleBar.inactiveBackground#21252b
• titleBar.inactiveForeground#9da5b4
• tree.indentGuidesStroke#c6c6c626
• walkThrough.embeddedEditorBackground#31363f
• welcomePage.buttonBackground#353b45
• welcomePage.buttonHoverBackground#3a3f4b
• widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).