Relaxed Dark

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#121317ff
• activityBar.border#1F1E1Fff
• activityBar.foreground#C0B1AFff
• activityBarBadge.background#1F1E1Fff
• activityBarBadge.foreground#C0B1AFff
• badge.background#1F1E1Fff
• badge.foreground#C0B1AFff
• button.background#285270ff
• button.foreground#C0B1AFff
• button.hoverBackground#3581B8ff
• contrastBorder#191A1Fff
• debugExceptionWidget.background#008000ff
• debugExceptionWidget.border#008000ff
• debugToolBar.background#1F1E1Fff
• descriptionForeground#f3f0f0ff
• diffEditor.insertedTextBackground#493912ff
• diffEditor.insertedTextBorder#493912ff
• diffEditor.removedTextBackground#3D0A00ff
• diffEditor.removedTextBorder#3D0A00ff
• dropdown.background#121317ff
• dropdown.border#1F1E1Fff
• dropdown.foreground#C0B1AFff
• editor.background#121317ff
• editor.findMatchBackground#4A3C3Bff
• editor.findMatchHighlightBackground#2E2424ff
• editor.findRangeHighlightBackground#008000ff
• editor.foreground#C0B1AFff
• editor.hoverHighlightBackground#242D34ff
• editor.inactiveSelectionBackground#2E2424ff
• editor.lineHighlightBackground#1F1E1Fff
• editor.lineHighlightBorder#1F1E1Fff
• editor.rangeHighlightBackground#1F1E1Fff
• editor.selectionBackground#4A3C3Bff
• editor.selectionHighlightBackground#2E2424ff
• editor.wordHighlightBackground#1F1E1Fff
• editor.wordHighlightStrongBackground#453736ff
• editorBracketMatch.background#453736ff
• editorBracketMatch.border#453736ff
• editorCodeLens.foreground#C0B1AFff
• editorCursor.foreground#C0B1AFff
• editorError.border#A02C2Cff
• editorError.foreground#A02C2Cff
• editorGroup.border#1F1E1Fff
• editorGroup.dropBackground#C0B1AF60
• editorGroup.emptyBackground#121317ff
• editorGroupHeader.noTabsBackground#008000ff
• editorGroupHeader.tabsBackground#121317ff
• editorGroupHeader.tabsBorder#1F1E1Fff
• editorGutter.addedBackground#FFD085ff
• editorGutter.background#121317ff
• editorGutter.deletedBackground#7A160080
• editorGutter.modifiedBackground#73B2D3ff
• editorHoverWidget.background#1F1E1Fff
• editorHoverWidget.border#1F1E1Fff
• editorIndentGuide.background#C0B1AF30
• editorLineNumber.foreground#C0B1AF60
• editorLink.activeForeground#749BAAff
• editorMarkerNavigation.background#1F1E1Fff
• editorMarkerNavigationError.background#A02C2Cff
• editorMarkerNavigationWarning.background#FFB144ff
• editorOverviewRuler.border#121317ff
• editorOverviewRuler.commonContentForeground#008000ff
• editorOverviewRuler.currentContentForeground#008000ff
• editorOverviewRuler.incomingContentForeground#008000ff
• editorRuler.foreground#008000ff
• editorSuggestWidget.background#121317ff
• editorSuggestWidget.border#1F1E1Fff
• editorSuggestWidget.foreground#C0B1AF60
• editorSuggestWidget.highlightForeground#C0B1AFff
• editorSuggestWidget.selectedBackground#353435ff
• editorWarning.border#FFB144ff
• editorWarning.foreground#FFB144ff
• editorWhitespace.foreground#C0B1AFff
• editorWidget.background#121317ff
• editorWidget.border#1F1E1Fff
• errorForeground#C0B1AFff
• extensionButton.prominentBackground#285270ff
• extensionButton.prominentForeground#C0B1AFff
• extensionButton.prominentHoverBackground#3581B8ff
• focusBorder#353435ff
• foreground#C0B1AFff
• gitDecoration.conflictingResourceForeground#F52900ff
• gitDecoration.deletedResourceForeground#8F1800ff
• gitDecoration.ignoredResourceForeground#9C848160
• gitDecoration.modifiedResourceForeground#FFD085ff
• gitDecoration.untrackedResourceForeground#F59700ff
• input.background#1F1E1Fff
• input.border#1F1E1Fff
• input.foreground#C0B1AFff
• input.placeholderForeground#C0B1AF60
• inputOption.activeBorder#008000ff
• inputValidation.errorBackground#121317ff
• inputValidation.errorBorder#A02C2Cff
• inputValidation.infoBackground#121317ff
• inputValidation.infoBorder#285270ff
• inputValidation.warningBackground#121317ff
• inputValidation.warningBorder#FFB144ff
• list.activeSelectionBackground#353435ff
• list.activeSelectionForeground#C0B1AFff
• list.dropBackground#353435ff
• list.focusBackground#353435ff
• list.focusForeground#C0B1AFff
• list.highlightForeground#f3f0f0ff
• list.hoverBackground#353435ff
• list.hoverForeground#C0B1AFff
• list.inactiveSelectionBackground#353435ff
• list.inactiveSelectionForeground#C0B1AFff
• menu.background#121317ff
• merge.border#1F1E1Fff
• merge.commonContentBackground#008000ff
• merge.commonHeaderBackground#008000ff
• merge.currentContentBackground#493912ff
• merge.currentHeaderBackground#493912ff
• merge.incomingContentBackground#3D0A00ff
• merge.incomingHeaderBackground#3D0A00ff
• notificationCenter.border#1F1E1Fff
• notificationCenterHeader.background#121317ff
• notificationCenterHeader.foreground#C0B1AFff
• notificationLink.foreground#749BAAff
• notifications.background#121317ff
• notifications.border#1F1E1Fff
• notifications.foreground#C0B1AFff
• notificationToast.border#1F1E1Fff
• panel.background#121317ff
• panel.border#1F1E1Fff
• panelTitle.activeBorder#C0B1AFff
• panelTitle.activeForeground#C0B1AFff
• panelTitle.inactiveForeground#C0B1AF60
• peekView.border#121317ff
• peekViewEditor.background#242D34ff
• peekViewEditor.matchHighlightBackground#285270ff
• peekViewEditorGutter.background#242D34ff
• peekViewResult.background#242D34ff
• peekViewResult.fileForeground#008000ff
• peekViewResult.lineForeground#008000ff
• peekViewResult.matchHighlightBackground#285270ff
• peekViewResult.selectionBackground#285270ff
• peekViewResult.selectionForeground#C0B1AFff
• peekViewTitle.background#242D34ff
• peekViewTitleDescription.foreground#f3f0f0ff
• peekViewTitleLabel.foreground#f3f0f0ff
• pickerGroup.border#1F1E1Fff
• pickerGroup.foreground#242D34ff
• progressBar.background#4782FFff
• scrollbar.shadow#000000ff
• scrollbarSlider.activeBackground#353435ff
• scrollbarSlider.background#353435ff
• scrollbarSlider.hoverBackground#353435ff
• selection.background#C0B1AF60
• sideBar.background#121317ff
• sideBar.border#1F1E1Fff
• sideBar.foreground#9C8481ff
• sideBarSectionHeader.background#1F1E1Fff
• sideBarSectionHeader.foreground#C0B1AFff
• sideBarTitle.foreground#C0B1AFff
• statusBar.background#121317ff
• statusBar.border#1F1E1Fff
• statusBar.debuggingBackground#00277Aff
• statusBar.debuggingBorder#1F1E1Fff
• statusBar.debuggingForeground#C0B1AFff
• statusBar.foreground#C0B1AFff
• statusBar.noFolderBackground#121317ff
• statusBar.noFolderBorder#1F1E1Fff
• statusBar.noFolderForeground#C0B1AFff
• statusBarItem.activeBackground#1F1E1Fff
• statusBarItem.hoverBackground#353435ff
• statusBarItem.prominentBackground#1F66FFff
• statusBarItem.prominentHoverBackground#008000ff
• tab.activeBackground#121317ff
• tab.activeBorder#C0B1AFff
• tab.activeForeground#C0B1AFff
• tab.border#121317ff
• tab.inactiveBackground#1F1E1Fff
• tab.inactiveForeground#C0B1AF60
• tab.unfocusedActiveForeground#C0B1AF60
• tab.unfocusedInactiveForeground#C0B1AF60
• terminal.ansiBlack#666666
• terminal.ansiBlue#3776A9
• terminal.ansiBrightBlack#828188
• terminal.ansiBrightBlue#74A8D2
• terminal.ansiBrightCyan#A5DFDF
• terminal.ansiBrightGreen#4B9A47
• terminal.ansiBrightMagenta#E9359B
• terminal.ansiBrightRed#CF2E39
• terminal.ansiBrightWhite#F2F3F2
• terminal.ansiBrightYellow#FFEB85
• terminal.ansiCyan#3EAFAF
• terminal.ansiGreen#367033
• terminal.ansiMagenta#93105A
• terminal.ansiRed#861D24
• terminal.ansiWhite#D8DCA7
• terminal.ansiYellow#FFDD33
• terminal.background#121317ff
• terminal.foreground#C0B1AFff
• terminalCursor.background#008000ff
• terminalCursor.foreground#C0B1AFff
• textBlockQuote.background#1F1E1Fff
• textBlockQuote.border#353435ff
• textCodeBlock.background#008000ff
• textLink.activeForeground#749BAAff
• textLink.foreground#749BAAff
• textPreformat.foreground#f3f0f0ff
• textSeparator.foreground#008000ff
• titleBar.activeBackground#121317ff
• titleBar.activeForeground#C0B1AFff
• titleBar.inactiveBackground#1d1f25ff
• titleBar.inactiveForeground#3B3636ff
• walkThrough.embeddedEditorBackground#242D34ff
• welcomePage.buttonBackground#1F1E1Fff
• welcomePage.buttonHoverBackground#353435ff
• widget.shadow#000000ff

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

TypeScript sample highlighted with this variant's colors and tokenColors.

Loading...