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#fffbf3
• activityBar.border#e8e7e4
• activityBar.foreground#5a6b7a
• activityBar.inactiveForeground#9b9894
• activityBarBadge.background#8b7e52
• activityBarBadge.foreground#f0efeb
• banner.background#f8f7f4
• banner.foreground#1a1d21
• banner.iconForeground#8b7e52
• button.background#8b7e52
• button.foreground#f0efeb
• button.hoverBackground#7d6f47
• button.secondaryBackground#d8d6d3
• button.secondaryForeground#1a1d21
• button.secondaryHoverBackground#ccc9be
• commandCenter.background#f0efeb
• commandCenter.border#e8e7e4
• commandCenter.foreground#5a6b7a
• debugToolBar.background#f0efeb
• debugToolBar.border#e8e7e4
• diffEditor.diagonalFill#9b9894
• diffEditor.insertedTextBackground#5a6b5a20
• diffEditor.removedTextBackground#8b666620
• dropdown.background#f8f7f4
• dropdown.border#e8e7e4
• dropdown.foreground#1a1d21
• editor.background#f0efeb
• editor.findMatchBackground#d8d6d3
• editor.findMatchHighlightBackground#e8e7e440
• editor.findRangeHighlightBackground#e8e7e440
• editor.foreground#1a1d21
• editor.inactiveSelectionBackground#e8e7e440
• editor.selectionBackground#d8d6d380
• editor.selectionForeground#1a1d21
• editor.wordHighlightBackground#e0ddd640
• editor.wordHighlightStrongBackground#d8d6d340
• editorBracketMatch.background#d8d6d3
• editorBracketMatch.border#8b7e52
• editorCursor.foreground#8b7e52
• editorError.foreground#8b6666
• editorGroup.border#e8e7e4
• editorGroupHeader.tabsBackground#fffbf3
• editorGroupHeader.tabsBorder#e8e7e4
• editorGutter.addedBackground#5a6b5a
• editorGutter.background#f0efeb
• editorGutter.deletedBackground#8b6666
• editorGutter.modifiedBackground#8b7e52
• editorHint.foreground#5a6b5a
• editorIndentGuide.activeBackground1#d8d6d3
• editorIndentGuide.background1#e8e7e4
• editorInfo.foreground#5a6b7a
• editorWarning.foreground#8b7e52
• editorWhitespace.foreground#d8d6d3
• extensionButton.prominentBackground#8b7e52
• extensionButton.prominentForeground#f0efeb
• extensionButton.prominentHoverBackground#7d6f47
• gitDecoration.addedResourceForeground#5a6b5a
• gitDecoration.conflictingResourceForeground#8b6666
• gitDecoration.deletedResourceForeground#8b6666
• gitDecoration.ignoredResourceForeground#9b9894
• gitDecoration.modifiedResourceForeground#8b7e52
• gitDecoration.renamedResourceForeground#5a6b7a
• gitDecoration.submoduleResourceForeground#64757d
• gitDecoration.untrackedResourceForeground#7d7a75
• input.background#f8f7f4
• input.border#e8e7e4
• input.foreground#1a1d21
• input.placeholderForeground#9b9894
• inputOption.activeBackground#8b7e52
• inputOption.activeBorder#8b7e52
• inputOption.activeForeground#f0efeb
• list.activeSelectionBackground#d8d6d3
• list.activeSelectionForeground#1a1d21
• list.errorForeground#8b6666
• list.focusBackground#e8e7e4
• list.focusForeground#1a1d21
• list.hoverBackground#f8f7f4
• list.hoverForeground#1a1d21
• list.inactiveSelectionBackground#e8e7e4
• list.inactiveSelectionForeground#5a6b7a
• list.invalidItemForeground#8b6666
• list.warningForeground#8b7e52
• notificationCenter.border#e8e7e4
• notificationCenterHeader.background#f0efeb
• notificationCenterHeader.foreground#5a6b7a
• notificationLink.foreground#5a6b7a
• notifications.background#fffbf3
• notifications.border#e8e7e4
• notifications.foreground#1a1d21
• panel.background#fffbf3
• panel.border#e8e7e4
• panelTitle.activeBorder#8b7e52
• panelTitle.activeForeground#1a1d21
• panelTitle.inactiveForeground#7d7a75
• scrollbar.shadow#00000020
• scrollbarSlider.activeBackground#9b9894
• scrollbarSlider.background#d8d6d3
• scrollbarSlider.hoverBackground#ccc9be
• sideBar.background#fffbf3
• sideBar.border#e8e7e4
• sideBar.foreground#1a1d21
• sideBarSectionHeader.background#f0efeb
• sideBarSectionHeader.border#e8e7e4
• sideBarSectionHeader.foreground#1a1d21
• sideBarTitle.foreground#8b7e52
• statusBar.background#fffbf3
• statusBar.border#e8e7e4
• statusBar.debuggingBackground#8b6666
• statusBar.debuggingForeground#f0efeb
• statusBar.foreground#5a6b7a
• statusBarItem.hoverBackground#e8e7e4
• statusBarItem.remoteBackground#5a6b7a
• statusBarItem.remoteForeground#f0efeb
• tab.activeBackground#f0efeb
• tab.activeForeground#1a1d21
• tab.border#e8e7e4
• tab.hoverBackground#f8f7f4
• tab.inactiveBackground#fffbf3
• tab.inactiveForeground#7d7a75
• tab.unfocusedActiveBackground#f0efeb
• tab.unfocusedActiveForeground#7d7a75
• tab.unfocusedInactiveBackground#fffbf3
• tab.unfocusedInactiveForeground#9b9894
• terminal.ansiBlack#5f5c58
• terminal.ansiBlue#5a6b7a
• terminal.ansiBrightBlack#9b9894
• terminal.ansiBrightBlue#5a6b7a
• terminal.ansiBrightCyan#64757d
• terminal.ansiBrightGreen#5a6b5a
• terminal.ansiBrightMagenta#8b7e52
• terminal.ansiBrightRed#8b6666
• terminal.ansiBrightWhite#2d2a27
• terminal.ansiBrightYellow#8b7e52
• terminal.ansiCyan#64757d
• terminal.ansiGreen#5a6b5a
• terminal.ansiMagenta#8b7e52
• terminal.ansiRed#8b6666
• terminal.ansiWhite#7d7a75
• terminal.ansiYellow#8b7e52
• terminal.background#f0efeb
• terminal.foreground#1a1d21
• terminal.selectionBackground#d8d6d3
• terminal.selectionForeground#1a1d21
• terminalCursor.background#8b7e52
• terminalCursor.foreground#8b7e52
• titleBar.activeBackground#fffbf3
• titleBar.activeForeground#1a1d21
• titleBar.border#e8e7e4
• titleBar.inactiveBackground#f0efeb
• titleBar.inactiveForeground#9b9894

tokenColors

TextMate scopes and font styles (syntax highlighting rules).

Shiki preview

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

Loading...