Compline

Color themes

• 

  Compline

• 

  Lauds

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#15181c
• activityBar.border#2a2e34
• activityBar.foreground#b4bcc4
• activityBar.inactiveForeground#515761
• activityBarBadge.background#d4ccb4
• activityBarBadge.foreground#1a1d21
• banner.background#1f2229
• banner.foreground#f0efeb
• banner.iconForeground#d4ccb4
• button.background#d4ccb4
• button.foreground#1a1d21
• button.hoverBackground#ccc4b0
• button.secondaryBackground#3d424a
• button.secondaryForeground#f0efeb
• button.secondaryHoverBackground#4a5157
• commandCenter.background#1a1d21
• commandCenter.border#2a2e34
• commandCenter.foreground#b4bcc4
• debugToolBar.background#1a1d21
• debugToolBar.border#2a2e34
• diffEditor.diagonalFill#515761
• diffEditor.insertedTextBackground#b8c4b815
• diffEditor.removedTextBackground#cdacac15
• dropdown.background#1f2229
• dropdown.border#2a2e34
• dropdown.foreground#f0efeb
• editor.background#1a1d21
• editor.findMatchBackground#3d424a
• editor.findMatchHighlightBackground#2a2e3440
• editor.findRangeHighlightBackground#2a2e3440
• editor.foreground#f0efeb
• editor.inactiveSelectionBackground#2a2e3440
• editor.selectionBackground#3d424a80
• editor.selectionForeground#f0efeb
• editor.wordHighlightBackground#4a515740
• editor.wordHighlightStrongBackground#3d424a40
• editorBracketMatch.background#3d424a
• editorBracketMatch.border#d4ccb4
• editorCursor.foreground#d4ccb4
• editorError.foreground#cdacac
• editorGroup.border#2a2e34
• editorGroupHeader.tabsBackground#15181c
• editorGroupHeader.tabsBorder#2a2e34
• editorGutter.addedBackground#b8c4b8
• editorGutter.background#1a1d21
• editorGutter.deletedBackground#cdacac
• editorGutter.modifiedBackground#d4ccb4
• editorHint.foreground#b8c4b8
• editorIndentGuide.activeBackground1#3d424a
• editorIndentGuide.background1#2a2e34
• editorInfo.foreground#b4bcc4
• editorWarning.foreground#d4ccb4
• editorWhitespace.foreground#3d424a
• extensionButton.prominentBackground#d4ccb4
• extensionButton.prominentForeground#1a1d21
• extensionButton.prominentHoverBackground#ccc4b0
• gitDecoration.addedResourceForeground#b8c4b8
• gitDecoration.conflictingResourceForeground#cdacac
• gitDecoration.deletedResourceForeground#cdacac
• gitDecoration.ignoredResourceForeground#515761
• gitDecoration.modifiedResourceForeground#d4ccb4
• gitDecoration.renamedResourceForeground#b4bcc4
• gitDecoration.submoduleResourceForeground#b4c0c8
• gitDecoration.untrackedResourceForeground#8b919a
• input.background#1f2229
• input.border#2a2e34
• input.foreground#f0efeb
• input.placeholderForeground#515761
• inputOption.activeBackground#d4ccb4
• inputOption.activeBorder#d4ccb4
• inputOption.activeForeground#1a1d21
• list.activeSelectionBackground#3d424a
• list.activeSelectionForeground#f0efeb
• list.errorForeground#cdacac
• list.focusBackground#2a2e34
• list.focusForeground#f0efeb
• list.hoverBackground#1f2229
• list.hoverForeground#f0efeb
• list.inactiveSelectionBackground#2a2e34
• list.inactiveSelectionForeground#b4bcc4
• list.invalidItemForeground#cdacac
• list.warningForeground#d4ccb4
• notificationCenter.border#2a2e34
• notificationCenterHeader.background#1a1d21
• notificationCenterHeader.foreground#b4bcc4
• notificationLink.foreground#b4bcc4
• notifications.background#15181c
• notifications.border#2a2e34
• notifications.foreground#f0efeb
• panel.background#15181c
• panel.border#2a2e34
• panelTitle.activeBorder#d4ccb4
• panelTitle.activeForeground#f0efeb
• panelTitle.inactiveForeground#8b919a
• scrollbar.shadow#00000030
• scrollbarSlider.activeBackground#515761
• scrollbarSlider.background#3d424a
• scrollbarSlider.hoverBackground#4a5157
• sideBar.background#15181c
• sideBar.border#2a2e34
• sideBar.foreground#f0efeb
• sideBarSectionHeader.background#1a1d21
• sideBarSectionHeader.border#2a2e34
• sideBarSectionHeader.foreground#f0efeb
• sideBarTitle.foreground#d4ccb4
• statusBar.background#15181c
• statusBar.border#2a2e34
• statusBar.debuggingBackground#cdacac
• statusBar.debuggingForeground#1a1d21
• statusBar.foreground#b4bcc4
• statusBarItem.hoverBackground#2a2e34
• statusBarItem.remoteBackground#b4bcc4
• statusBarItem.remoteForeground#1a1d21
• tab.activeBackground#1a1d21
• tab.activeForeground#f0efeb
• tab.border#2a2e34
• tab.hoverBackground#1f2229
• tab.inactiveBackground#15181c
• tab.inactiveForeground#8b919a
• tab.unfocusedActiveBackground#1a1d21
• tab.unfocusedActiveForeground#8b919a
• tab.unfocusedInactiveBackground#15181c
• tab.unfocusedInactiveForeground#515761
• terminal.ansiBlack#22262b
• terminal.ansiBlue#b4bcc4
• terminal.ansiBrightBlack#515761
• terminal.ansiBrightBlue#b4bcc4
• terminal.ansiBrightCyan#b4c0c8
• terminal.ansiBrightGreen#b8c4b8
• terminal.ansiBrightMagenta#ccc4b4
• terminal.ansiBrightRed#cdacac
• terminal.ansiBrightWhite#e0dcd4
• terminal.ansiBrightYellow#d4ccb4
• terminal.ansiCyan#b4c0c8
• terminal.ansiGreen#b8c4b8
• terminal.ansiMagenta#ccc4b4
• terminal.ansiRed#cdacac
• terminal.ansiWhite#8b919a
• terminal.ansiYellow#d4ccb4
• terminal.background#1a1d21
• terminal.foreground#f0efeb
• terminal.selectionBackground#3d424a
• terminal.selectionForeground#f0efeb
• terminalCursor.background#d4ccb4
• terminalCursor.foreground#d4ccb4
• titleBar.activeBackground#15181c
• titleBar.activeForeground#f0efeb
• titleBar.border#2a2e34
• titleBar.inactiveBackground#1a1d21
• titleBar.inactiveForeground#515761

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

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

Loading...