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#5871ef
• activityBar.background#f8fdff
• activityBar.border#a4c6e0
• activityBar.dropBackground#80808057
• activityBar.dropBorder#556de8
• activityBar.foreground#242424
• activityBar.inactiveForeground#000000
• activityBarBadge.background#5871ef
• activityBarBadge.foreground#242424
• badge.background#eaeaeb
• badge.foreground#242424
• breadcrumb.activeSelectionForeground#242424
• breadcrumb.focusForeground#242424
• breadcrumb.foreground#000000
• button.background#ffffff
• button.foreground#000000
• button.hoverBackground#f5f5f5
• debugTokenExpression.boolean#986806
• debugTokenExpression.error#f42a2a
• debugTokenExpression.name#ce4e42
• debugTokenExpression.number#986806
• debugTokenExpression.string#19881f
• debugTokenExpression.value#02769f
• debugToolBar.background#f2f2f3
• debugView.exceptionLabelBackground#e04b3e
• debugView.exceptionLabelForeground#000000
• debugView.stateLabelBackground#3bba54
• debugView.valueChangedHighlight#1f96ff
• descriptionForeground#404070
• diffEditor.border#dbdbdc
• diffEditor.diagonalFill#383a4233
• diffEditor.insertedTextBackground#0060003d
• diffEditor.removedTextBackground#f034343d
• dropdown.background#ffffff
• dropdown.border#dbdbdc
• dropdown.foreground#000000
• dropdown.listBackground#f2f2f3
• editor.background#f8fdff
• editor.findMatchBackground#526fff33
• editor.findMatchBorder#526fff
• editor.findMatchHighlightBackground#526fff33
• editor.findRangeHighlightBackground#e5e5e6
• editor.focusedStackFrameHighlightBackground#c49331
• editor.foldBackground#383a420d
• editor.foreground#383a42
• editor.hoverHighlightBackground#00000000
• editor.inactiveSelectionBackground#e5e5e6
• editor.lineHighlightBackground#383a420d
• editor.lineHighlightBorder#00000000
• editor.selectionBackground#e4d397
• editor.selectionHighlightBackground#383a420d
• editor.snippetFinalTabstopHighlightBorder#696c77
• editor.snippetTabstopHighlightBackground#526fff33
• editor.stackFrameHighlightBackground#c49331
• editor.wordHighlightBackground#00000000
• editor.wordHighlightStrongBackground#00000000
• editorBracketMatch.background#00000000
• editorBracketMatch.border#526fff
• editorCodeLens.foreground#5f8466
• editorCursor.foreground#526fff
• editorError.foreground#f42a2a
• editorGroup.border#ff0000
• editorGroup.dropBackground#80808057
• editorGroupHeader.border#dbdbdc
• editorGroupHeader.noTabsBackground#eaeaeb
• editorGroupHeader.tabsBackground#eaeaeb
• editorGroupHeader.tabsBorder#00000000
• editorGutter.addedBackground#006000
• editorGutter.background#f8fdff
• editorGutter.commentRangeForeground#383a4233
• editorGutter.deletedBackground#f03434
• editorGutter.modifiedBackground#f2a60d
• editorHint.foreground#1492ff
• editorHoverWidget.statusBarBackground#f2f2f3
• editorIndentGuide.activeBackground#9d9d9f
• editorIndentGuide.background#383a4233
• editorInfo.foreground#1492ff
• editorLineNumber.activeForeground#383a42
• editorLineNumber.foreground#9d9d9f
• editorLink.activeForeground#02769f
• editorMarkerNavigation.background#f5f5f5
• editorMarkerNavigationError.background#e04b3e
• editorMarkerNavigationInfo.background#1f96ff
• editorMarkerNavigationWarning.background#c49331
• editorOverviewRuler.addedForeground#006000
• editorOverviewRuler.border#00000000
• editorOverviewRuler.bracketMatchForeground#e5e5e6
• editorOverviewRuler.deletedForeground#f03434
• editorOverviewRuler.errorForeground#f42a2a
• editorOverviewRuler.findMatchForeground#e5e5e6
• editorOverviewRuler.infoForeground#1492ff
• editorOverviewRuler.modifiedForeground#f2a60d
• editorOverviewRuler.selectionHighlightForeground#e5e5e6
• editorOverviewRuler.warningForeground#903030
• editorOverviewRuler.wordHighlightForeground#e5e5e6
• editorOverviewRuler.wordHighlightStrongForeground#e5e5e6
• editorRuler.foreground#383a4233
• editorSuggestWidget.highlightForeground#242424
• editorWarning.foreground#903030
• editorWhitespace.foreground#383a4233
• editorWidget.background#f2f2f3
• editorWidget.border#dbdbdc
• editorWidget.resizeBorder#f2f2f3
• errorForeground#f42a2a
• extensionButton.prominentBackground#5871ef
• extensionButton.prominentForeground#ffffff
• extensionButton.prominentHoverBackground#5871ef
• focusBorder#556de8
• foreground#000000
• gitDecoration.addedResourceForeground#006000
• gitDecoration.deletedResourceForeground#f42a2a
• gitDecoration.ignoredResourceForeground#404070
• gitDecoration.modifiedResourceForeground#903030
• gitDecoration.untrackedResourceForeground#006000
• icon.foreground#000000
• imagePreview.border#dbdbdc
• input.background#ffffff
• input.border#dbdbdc
• input.foreground#242424
• input.placeholderForeground#404070
• inputOption.activeBackground#5871ef
• inputOption.activeBorder#00000000
• inputOption.activeForeground#050505
• inputValidation.errorBackground#e04b3e
• inputValidation.errorBorder#f42a2a
• inputValidation.errorForeground#242424
• inputValidation.infoBackground#1f96ff
• inputValidation.infoBorder#1492ff
• inputValidation.infoForeground#242424
• inputValidation.warningBackground#c49331
• inputValidation.warningBorder#903030
• inputValidation.warningForeground#242424
• list.activeSelectionBackground#5871ef
• list.activeSelectionForeground#ffffff
• list.deemphasizedForeground#404070
• list.dropBackground#f5f5f5
• list.errorForeground#f42a2a
• list.focusBackground#dbdbdc
• list.focusForeground#050505
• list.highlightForeground#556de8
• list.hoverBackground#00000000
• list.inactiveFocusBackground#dbdbdc
• list.inactiveSelectionBackground#dbdbdc
• list.invalidItemForeground#f42a2a
• list.warningForeground#903030
• listFilterWidget.background#ffffff
• listFilterWidget.noMatchesOutline#f42a2a
• listFilterWidget.outline#556de8
• menu.background#ffffff
• menu.foreground#242424
• menu.selectionBackground#5871ef
• menu.separatorBackground#dbdbdc
• menubar.selectionBackground#5871ef
• minimap.errorHighlight#f42a2a
• minimap.findMatchHighlight#526fff
• minimap.selectionHighlight#526fff33
• minimap.warningHighlight#903030
• minimapGutter.addedBackground#006000
• minimapGutter.deletedBackground#f42a2a
• minimapGutter.modifiedBackground#903030
• minimapSlider.activeBackground#c6c7c7cc
• minimapSlider.background#c6c7c780
• minimapSlider.hoverBackground#c6c7c7cc
• notificationCenterHeader.background#fafafa
• notificationCenterHeader.foreground#242424
• notifications.background#ffffff
• notifications.border#dbdbdcd9
• panel.background#f8fdff
• panel.border#ff0000
• panel.dropBackground#80808057
• panelInput.border#dbdbdc
• panelSectionHeader.background#fafafa
• panelTitle.activeBorder#00000000
• panelTitle.activeForeground#242424
• panelTitle.inactiveForeground#404070
• peekView.border#556de8
• peekViewEditor.background#ffffff
• peekViewEditor.matchHighlightBackground#526fff33
• peekViewResult.background#fafafa
• peekViewResult.fileForeground#242424
• peekViewResult.lineForeground#000000
• peekViewResult.matchHighlightBackground#526fff33
• peekViewResult.selectionBackground#5871ef
• peekViewResult.selectionForeground#ffffff
• peekViewTitle.background#fafafa
• peekViewTitleDescription.foreground#000000
• peekViewTitleLabel.foreground#242424
• pickerGroup.border#dbdbdc
• pickerGroup.foreground#000000
• progressBar.background#556de8
• quickInput.background#f2f2f3
• quickInputTitle.background#f2f2f3
• scrollbar.shadow#00000000
• scrollbarSlider.activeBackground#c6c7c7cc
• scrollbarSlider.background#c6c7c780
• scrollbarSlider.hoverBackground#c6c7c7cc
• searchEditor.findMatchBackground#526fff33
• selection.background#dadef1
• settings.headerForeground#242424
• settings.modifiedItemIndicator#006000
• sideBar.background#f8fdff
• sideBar.border#ff0000
• sideBar.dropBackground#80808057
• sideBar.foreground#000000
• sideBarSectionHeader.background#fafafa
• sideBarSectionHeader.foreground#000000
• sideBarTitle.foreground#242424
• statusBar.background#eaeaeb
• statusBar.border#dbdbdc
• statusBar.debuggingForeground#ffffff
• statusBar.foreground#000000
• statusBar.noFolderBackground#eaeaeb
• statusBarItem.activeBackground#e3e3e3
• statusBarItem.hoverBackground#dbdbdc
• statusBarItem.prominentBackground#5871ef
• statusBarItem.prominentForeground#ffffff
• statusBarItem.prominentHoverBackground#5871ef
• tab.activeBackground#fafafa
• tab.activeBorder#00000000
• tab.activeForeground#242424
• tab.activeModifiedBorder#556de8
• tab.border#dbdbdc
• tab.hoverForeground#242424
• tab.inactiveBackground#eaeaeb
• tab.inactiveForeground#404070
• tab.inactiveModifiedBorder#556de8
• tab.unfocusedActiveBorder#00000000
• tab.unfocusedActiveForeground#242424
• tab.unfocusedActiveModifiedBorder#556de8
• tab.unfocusedInactiveForeground#404070
• tab.unfocusedInactiveModifiedBorder#556de8
• textBlockQuote.background#ffffff
• textBlockQuote.border#00000000
• textCodeBlock.background#f5f5f5
• textLink.activeForeground#556de8
• textLink.foreground#556de8
• titleBar.activeBackground#eaeaeb
• titleBar.activeForeground#242424
• titleBar.border#dbdbdc
• titleBar.inactiveBackground#eaeaeb
• titleBar.inactiveForeground#000000
• tree.indentGuidesStroke#383a4233
• walkThrough.embeddedEditorBackground#ffffff
• welcomePage.buttonBackground#ffffff
• welcomePage.buttonHoverBackground#f5f5f5
• widget.shadow#00000066

tokenColors

TextMate scopes and font styles (syntax highlighting rules).