mirror of
https://github.com/microsoft/vscode.git
synced 2026-04-22 17:48:56 +01:00
Enhance 2026 Light Theme and Add Stealth Shadows Styles
- Updated color values in 2026-light.json for improved contrast and accessibility. - Introduced new styles.css file to implement stealth shadows for various UI elements, enhancing visual depth and aesthetics across the workbench. - Adjusted box-shadow properties for components like the activity bar, sidebar, panel, and editor to create a more cohesive design.
This commit is contained in:
mrleemurray
223
extensions/theme-2026/themes/styles.css
Normal file
223
extensions/theme-2026/themes/styles.css
Normal file
@@ -0,0 +1,223 @@
|
||||
/*---------------------------------------------------------------------------------------------
|
||||
* Copyright (c) Microsoft Corporation. All rights reserved.
|
||||
* Licensed under the MIT License. See License.txt in the project root for license information.
|
||||
*--------------------------------------------------------------------------------------------*/
|
||||
|
||||
/* Stealth Shadows - shadow-based depth for UI elements, controlled by workbench.stealthShadows.enabled */
|
||||
|
||||
/* styles.css */
|
||||
.monaco-workbench {
|
||||
--my-custom-color: blue;
|
||||
}
|
||||
|
||||
/* Activity Bar */
|
||||
.monaco-workbench .part.activitybar { box-shadow: 0 0 6px rgba(0, 0, 0, 0.08); z-index: 50; position: relative; }
|
||||
.monaco-workbench.activitybar-right .part.activitybar { box-shadow: 0 0 6px rgba(0, 0, 0, 0.08); }
|
||||
|
||||
/* Sidebar */
|
||||
.monaco-workbench .part.sidebar { box-shadow: 0 0 6px rgba(0, 0, 0, 0.08); z-index: 40; position: relative; }
|
||||
.monaco-workbench.sidebar-right .part.sidebar { box-shadow: 0 0 6px rgba(0, 0, 0, 0.08); }
|
||||
.monaco-workbench .part.auxiliarybar { box-shadow: 0 0 6px rgba(0, 0, 0, 0.08); z-index: 40; position: relative; }
|
||||
|
||||
/* Panel */
|
||||
.monaco-workbench .part.panel { box-shadow: 0 0 6px rgba(0, 0, 0, 0.08); z-index: 35; position: relative; }
|
||||
.monaco-workbench.panel-position-left .part.panel { box-shadow: 0 0 6px rgba(0, 0, 0, 0.08); }
|
||||
.monaco-workbench.panel-position-right .part.panel { box-shadow: 0 0 6px rgba(0, 0, 0, 0.08); }
|
||||
|
||||
/* Editor */
|
||||
.monaco-workbench .part.editor { position: relative; }
|
||||
.monaco-workbench .part.editor > .content .editor-group-container > .title { box-shadow: none; position: relative; z-index: 10; }
|
||||
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab.active { box-shadow: 0 0 5px rgba(0, 0, 0, 0.10); position: relative; z-index: 5; border-radius: 4px 4px 0 0; border-top: none !important; }
|
||||
.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab:hover:not(.active) { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); }
|
||||
|
||||
/* Title Bar */
|
||||
.monaco-workbench .part.titlebar { box-shadow: 0 0 6px rgba(0, 0, 0, 0.08); z-index: 60; position: relative; overflow: visible !important; }
|
||||
.monaco-workbench .part.titlebar .titlebar-container,
|
||||
.monaco-workbench .part.titlebar .titlebar-center,
|
||||
.monaco-workbench .part.titlebar .titlebar-center .window-title,
|
||||
.monaco-workbench .part.titlebar .command-center,
|
||||
.monaco-workbench .part.titlebar .command-center .monaco-action-bar,
|
||||
.monaco-workbench .part.titlebar .command-center .actions-container { overflow: visible !important; }
|
||||
|
||||
/* Status Bar */
|
||||
.monaco-workbench .part.statusbar { box-shadow: 0 0 6px rgba(0, 0, 0, 0.08); z-index: 55; position: relative; }
|
||||
|
||||
/* Quick Input (Command Palette) */
|
||||
.monaco-workbench .quick-input-widget { box-shadow: 0 0 20px rgba(0, 0, 0, 0.15) !important; border: none !important; border-radius: 12px; overflow: hidden; background: rgba(252, 252, 253, 0.2) !important; backdrop-filter: blur(20px) saturate(100%); -webkit-backdrop-filter: blur(40px) saturate(180%); }
|
||||
.monaco-workbench.vs-dark .quick-input-widget,
|
||||
.monaco-workbench.hc-black .quick-input-widget { background: rgba(10, 10, 11, 0.85) !important; backdrop-filter: blur(40px) saturate(180%); -webkit-backdrop-filter: blur(40px) saturate(180%); box-shadow: 0 0 20px rgba(0, 0, 0, 0.15) !important; }
|
||||
.monaco-workbench .quick-input-widget .monaco-list-rows { background-color: transparent !important; }
|
||||
.monaco-workbench .quick-input-widget,
|
||||
.monaco-workbench .quick-input-widget *,
|
||||
.monaco-workbench .quick-input-widget .quick-input-header,
|
||||
.monaco-workbench .quick-input-widget .quick-input-list,
|
||||
.monaco-workbench .quick-input-widget .quick-input-titlebar,
|
||||
.monaco-workbench .quick-input-widget .quick-input-title,
|
||||
.monaco-workbench .quick-input-widget .quick-input-description,
|
||||
.monaco-workbench .quick-input-widget .quick-input-filter,
|
||||
.monaco-workbench .quick-input-widget .quick-input-action,
|
||||
.monaco-workbench .quick-input-widget .quick-input-message,
|
||||
.monaco-workbench .quick-input-widget .monaco-inputbox,
|
||||
.monaco-workbench .quick-input-widget .monaco-list,
|
||||
.monaco-workbench .quick-input-widget .monaco-list-row { border: none !important; border-color: transparent !important; outline: none !important; }
|
||||
.monaco-workbench .quick-input-widget .monaco-inputbox { box-shadow: none !important; background: transparent !important; }
|
||||
.monaco-workbench .quick-input-widget .quick-input-filter .monaco-inputbox { background: rgba(249, 250, 251, 0.4) !important; border-radius: 6px; }
|
||||
.monaco-workbench.vs-dark .quick-input-widget .quick-input-filter .monaco-inputbox,
|
||||
.monaco-workbench.hc-black .quick-input-widget .quick-input-filter .monaco-inputbox { background: rgba(20, 20, 22, 0.6) !important; }
|
||||
|
||||
/* Chat Widget */
|
||||
.monaco-workbench .interactive-session .chat-input-container { box-shadow: 0 0 6px rgba(0, 0, 0, 0.1); border-radius: 6px; }
|
||||
.monaco-workbench .interactive-session .interactive-input-part .chat-editor-container .interactive-input-editor .monaco-editor,
|
||||
.monaco-workbench .interactive-session .interactive-input-part .chat-editor-container .interactive-input-editor .monaco-editor .monaco-editor-background { background-color: var(--vscode-panel-background, var(--vscode-sideBar-background)) !important; }
|
||||
.monaco-workbench .interactive-session .chat-editing-session .chat-editing-session-container { box-shadow: 0 0 6px rgba(0, 0, 0, 0.10); border-radius: 4px 4px 0 0; }
|
||||
.monaco-workbench .interactive-input-part:has(.chat-editing-session > .chat-editing-session-container) .chat-input-container { border-radius: 0 0 6px 6px; }
|
||||
.monaco-workbench .part.panel .interactive-session,
|
||||
.monaco-workbench .part.auxiliarybar .interactive-session { position: relative; }
|
||||
|
||||
/* Notifications */
|
||||
.monaco-workbench .notifications-toasts { box-shadow: 0 0 12px rgba(0, 0, 0, 0.14); }
|
||||
.monaco-workbench .notification-toast { box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); border: none; border-radius: 8px; overflow: hidden; }
|
||||
|
||||
/* Context Menus */
|
||||
.monaco-workbench .monaco-menu .monaco-action-bar.vertical { box-shadow: 0 0 12px rgba(0, 0, 0, 0.14); border: none; border-radius: 12px; overflow: hidden; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
|
||||
.monaco-workbench .context-view .monaco-menu { box-shadow: 0 0 12px rgba(0, 0, 0, 0.14); border: none; border-radius: 12px; }
|
||||
.monaco-workbench.vs-dark .monaco-menu .monaco-action-bar.vertical,
|
||||
.monaco-workbench.vs-dark .context-view .monaco-menu,
|
||||
.monaco-workbench.hc-black .monaco-menu .monaco-action-bar.vertical,
|
||||
.monaco-workbench.hc-black .context-view .monaco-menu { background: rgba(10, 10, 11, 0.85) !important; }
|
||||
.monaco-workbench.vs .monaco-menu .monaco-action-bar.vertical,
|
||||
.monaco-workbench.vs .context-view .monaco-menu { background: rgba(252, 252, 253, 0.85) !important; }
|
||||
|
||||
/* Suggest Widget */
|
||||
.monaco-workbench .monaco-editor .suggest-widget { box-shadow: 0 0 12px rgba(0, 0, 0, 0.14); border: none; border-radius: 12px; overflow: hidden; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
|
||||
.monaco-workbench.vs-dark .monaco-editor .suggest-widget,
|
||||
.monaco-workbench.hc-black .monaco-editor .suggest-widget { background: rgba(10, 10, 11, 0.85) !important; }
|
||||
.monaco-workbench.vs .monaco-editor .suggest-widget { background: rgba(252, 252, 253, 0.85) !important; }
|
||||
|
||||
/* Find Widget */
|
||||
.monaco-workbench .monaco-editor .find-widget { box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); border: none; border-radius: 8px; }
|
||||
|
||||
/* Dialog */
|
||||
.monaco-workbench .monaco-dialog-box { box-shadow: 0 0 20px rgba(0, 0, 0, 0.18); border: none; border-radius: 12px; overflow: hidden; }
|
||||
|
||||
/* Peek View */
|
||||
.monaco-workbench .monaco-editor .peekview-widget { box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); border: none; background: var(--vscode-editor-background, #EDEDED) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 8px; overflow: hidden; }
|
||||
.monaco-workbench .monaco-editor .peekview-widget .head,
|
||||
.monaco-workbench .monaco-editor .peekview-widget .body { background: transparent !important; }
|
||||
.monaco-workbench .monaco-editor .peekview-widget .ref-tree { background: var(--vscode-editor-background, #EDEDED) !important; }
|
||||
|
||||
/* Settings */
|
||||
.monaco-workbench .settings-editor .settings-toc-container { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); }
|
||||
|
||||
/* Welcome Tiles */
|
||||
.monaco-workbench .part.editor .welcomePageContainer .tile { box-shadow: 0 0 6px rgba(0, 0, 0, 0.10); border: none; border-radius: 8px; }
|
||||
.monaco-workbench .part.editor .welcomePageContainer .tile:hover { box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); }
|
||||
|
||||
/* Extensions */
|
||||
.monaco-workbench .extensions-list .extension-list-item { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); border: none; border-radius: 6px; margin: 4px 0; }
|
||||
.monaco-workbench .extensions-list .extension-list-item:hover { box-shadow: 0 0 6px rgba(0, 0, 0, 0.10); }
|
||||
|
||||
/* Breadcrumbs */
|
||||
.monaco-workbench .part.editor > .content .editor-group-container > .title .breadcrumbs-control { box-shadow: 0 0 6px rgba(0, 0, 0, 0.08) !important; background: rgba(252, 252, 253, 0.65) !important; backdrop-filter: blur(40px) saturate(180%) !important; -webkit-backdrop-filter: blur(40px) saturate(180%) !important; }
|
||||
.monaco-workbench.vs-dark .part.editor > .content .editor-group-container > .title .breadcrumbs-control,
|
||||
.monaco-workbench.hc-black .part.editor > .content .editor-group-container > .title .breadcrumbs-control { background: rgba(10, 10, 11, 0.85) !important; box-shadow: 0 0 6px rgba(0, 0, 0, 0.08) !important; }
|
||||
|
||||
/* Input Boxes */
|
||||
.monaco-workbench .monaco-inputbox { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); border: none; border-radius: 6px; }
|
||||
.monaco-workbench .monaco-inputbox.synthetic-focus,
|
||||
.monaco-workbench .monaco-inputbox:focus-within { box-shadow: 0 0 6px rgba(0, 0, 0, 0.10), 0 0 0 2px var(--vscode-focusBorder); }
|
||||
|
||||
/* Buttons */
|
||||
.monaco-workbench .monaco-button { box-shadow: 0 0 2px rgba(0, 0, 0, 0.06); }
|
||||
.monaco-workbench .monaco-button:hover { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); }
|
||||
.monaco-workbench .monaco-button:active { box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }
|
||||
|
||||
/* Dropdowns */
|
||||
.monaco-workbench .monaco-dropdown .dropdown-menu { box-shadow: 0 0 12px rgba(0, 0, 0, 0.14); border: none; border-radius: 8px; }
|
||||
|
||||
/* Terminal */
|
||||
.monaco-workbench .pane-body.integrated-terminal { box-shadow: inset 0 0 4px rgba(255, 255, 255, 0.1); }
|
||||
|
||||
/* SCM */
|
||||
.monaco-workbench .scm-view .scm-provider { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); border-radius: 6px; margin: 4px; }
|
||||
|
||||
/* Debug Toolbar */
|
||||
.monaco-workbench .debug-toolbar { box-shadow: 0 0 12px rgba(0, 0, 0, 0.14); border: none; border-radius: 8px; }
|
||||
|
||||
/* Action Widget */
|
||||
.monaco-workbench .action-widget { box-shadow: 0 0 12px rgba(0, 0, 0, 0.14) !important; border: none !important; border-radius: 8px; }
|
||||
|
||||
/* Parameter Hints */
|
||||
.monaco-workbench .monaco-editor .parameter-hints-widget { box-shadow: 0 0 8px rgba(0, 0, 0, 0.12); border: none; border-radius: 12px; overflow: hidden; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); }
|
||||
.monaco-workbench.vs-dark .monaco-editor .parameter-hints-widget,
|
||||
.monaco-workbench.hc-black .monaco-editor .parameter-hints-widget { background: rgba(10, 10, 11, 0.85) !important; }
|
||||
.monaco-workbench.vs .monaco-editor .parameter-hints-widget { background: rgba(252, 252, 253, 0.85) !important; }
|
||||
|
||||
/* Minimap */
|
||||
.monaco-workbench .monaco-editor .minimap { background: rgba(252, 252, 253, 0.65) !important; backdrop-filter: blur(40px) saturate(180%) !important; -webkit-backdrop-filter: blur(40px) saturate(180%) !important; border-radius: 8px 0 0 8px; }
|
||||
.monaco-workbench .monaco-editor .minimap canvas { opacity: 0.85; }
|
||||
.monaco-workbench.vs-dark .monaco-editor .minimap,
|
||||
.monaco-workbench.hc-black .monaco-editor .minimap { background: rgba(5, 5, 6, 0.85) !important; box-shadow: 0 0 6px rgba(0, 0, 0, 0.10) !important; }
|
||||
.monaco-workbench .monaco-editor .minimap-shadow-visible { box-shadow: 0 0 6px rgba(0, 0, 0, 0.10); }
|
||||
|
||||
/* Sticky Scroll */
|
||||
.monaco-workbench .monaco-editor .sticky-widget { box-shadow: 0 0 6px rgba(0, 0, 0, 0.10) !important; border-bottom: none !important; border: none !important; background: rgba(252, 252, 253, 0.65) !important; backdrop-filter: blur(40px) saturate(180%) !important; -webkit-backdrop-filter: blur(40px) saturate(180%) !important; border-radius: 0 0 8px 8px !important; }
|
||||
.monaco-workbench .monaco-editor .sticky-widget *,
|
||||
.monaco-workbench .monaco-editor .sticky-widget > *,
|
||||
.monaco-workbench .monaco-editor .sticky-widget .sticky-widget-line-numbers,
|
||||
.monaco-workbench .monaco-editor .sticky-widget .sticky-widget-lines-scrollable,
|
||||
.monaco-workbench .monaco-editor .sticky-widget .sticky-widget-lines,
|
||||
.monaco-workbench .monaco-editor .sticky-widget .sticky-line-number,
|
||||
.monaco-workbench .monaco-editor .sticky-widget .sticky-line-content,
|
||||
.monaco-workbench .monaco-editor .sticky-widget .sticky-line-content:hover { background-color: transparent !important; background: transparent !important; }
|
||||
.monaco-workbench.vs-dark .monaco-editor .sticky-widget,
|
||||
.monaco-workbench.hc-black .monaco-editor .sticky-widget { background: rgba(10, 10, 11, 0.85) !important; backdrop-filter: blur(40px) saturate(180%) !important; -webkit-backdrop-filter: blur(40px) saturate(180%) !important; box-shadow: 0 0 6px rgba(0, 0, 0, 0.10) !important; }
|
||||
.monaco-workbench .monaco-editor .sticky-widget-focus-preview,
|
||||
.monaco-workbench .monaco-editor .sticky-scroll-focus-line,
|
||||
.monaco-workbench .monaco-editor .focused .sticky-widget,
|
||||
.monaco-workbench .monaco-editor:has(.sticky-widget:focus-within) .sticky-widget { background: rgba(252, 252, 253, 0.75) !important; backdrop-filter: blur(40px) saturate(180%) !important; -webkit-backdrop-filter: blur(40px) saturate(180%) !important; box-shadow: 0 0 8px rgba(0, 0, 0, 0.12) !important; border-radius: 0 0 8px 8px !important; }
|
||||
.monaco-workbench.vs-dark .monaco-editor .sticky-widget-focus-preview,
|
||||
.monaco-workbench.vs-dark .monaco-editor .sticky-scroll-focus-line,
|
||||
.monaco-workbench.vs-dark .monaco-editor .focused .sticky-widget,
|
||||
.monaco-workbench.vs-dark .monaco-editor:has(.sticky-widget:focus-within) .sticky-widget,
|
||||
.monaco-workbench.hc-black .monaco-editor .sticky-widget-focus-preview,
|
||||
.monaco-workbench.hc-black .monaco-editor .sticky-scroll-focus-line,
|
||||
.monaco-workbench.hc-black .monaco-editor .focused .sticky-widget,
|
||||
.monaco-workbench.hc-black .monaco-editor:has(.sticky-widget:focus-within) .sticky-widget { background: rgba(10, 10, 11, 0.90) !important; box-shadow: 0 0 8px rgba(0, 0, 0, 0.12) !important; }
|
||||
|
||||
/* Notebook */
|
||||
.monaco-workbench .notebookOverlay .monaco-list .cell-focus-indicator { box-shadow: 0 0 4px rgba(0, 0, 0, 0.08); border-radius: 6px; }
|
||||
.monaco-workbench .notebookOverlay .monaco-list .monaco-list-row.focused .cell-focus-indicator { box-shadow: 0 0 6px rgba(0, 0, 0, 0.10); }
|
||||
|
||||
/* Inline Chat */
|
||||
.monaco-workbench .monaco-editor .inline-chat { box-shadow: 0 0 12px rgba(0, 0, 0, 0.14); border: none; border-radius: 12px; }
|
||||
|
||||
/* Command Center */
|
||||
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center { box-shadow: 0 0 8px rgba(0, 0, 0, 0.09) !important; border-radius: 8px !important; background: rgba(249, 250, 251, 0.55) !important; backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); overflow: visible !important; }
|
||||
.monaco-workbench .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center:hover { box-shadow: 0 0 10px rgba(0, 0, 0, 0.11) !important; background: rgba(249, 250, 251, 0.70) !important; }
|
||||
.monaco-workbench.vs-dark .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center,
|
||||
.monaco-workbench.hc-black .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center { background: rgba(10, 10, 11, 0.75) !important; backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); }
|
||||
.monaco-workbench.vs-dark .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center:hover,
|
||||
.monaco-workbench.hc-black .part.titlebar > .titlebar-container > .titlebar-center > .window-title > .command-center .action-item.command-center-center:hover { background: rgba(15, 15, 17, 0.85) !important; }
|
||||
.monaco-workbench .part.titlebar .command-center .agent-status-pill {
|
||||
box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
.monaco-workbench .part.titlebar .command-center .agent-status-pill:hover {
|
||||
box-shadow: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
/* .monaco-workbench .part.titlebar .command-center,
|
||||
.monaco-workbench .part.titlebar .command-center *,
|
||||
.monaco-workbench .part.titlebar .command-center-center,
|
||||
.monaco-workbench .part.titlebar .command-center .action-item,
|
||||
.monaco-workbench .part.titlebar .command-center .search-icon,
|
||||
.monaco-workbench .part.titlebar .command-center .search-label { border: none !important; border-color: transparent !important; outline: none !important; } */
|
||||
|
||||
/* Remove Borders */
|
||||
.monaco-workbench .part.sidebar { border-right: none !important; border-left: none !important; }
|
||||
.monaco-workbench .part.auxiliarybar { border-right: none !important; border-left: none !important; }
|
||||
.monaco-workbench .part.panel { border-top: none !important; }
|
||||
.monaco-workbench .part.activitybar { border-right: none !important; border-left: none !important; }
|
||||
.monaco-workbench .part.titlebar { border-bottom: none !important; }
|
||||
.monaco-workbench .part.statusbar { border-top: none !important; }
|
||||
.monaco-workbench .part.editor > .content .editor-group-container { border: none !important; }
|
||||
Reference in New Issue
Block a user