Skip to content

Adopt system dark mode in the Web Clipper popup #662

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 2 commits into
base: master
Choose a base branch
from
Draft

Adopt system dark mode in the Web Clipper popup #662

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c46868d
Initial plan
Copilot Jun 9, 2026
a25ab8e
Add dark mode styling to clipper popup
Copilot Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
136 changes: 100 additions & 36 deletions src/styles/renderer.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,69 @@
// Renderer window styles — sidebar panel for capture progress and preview
// Color values follow Fluent 2 design tokens (white theme).
// Color values follow Fluent 2 design tokens and adapt to system light/dark theme.

:root {
color-scheme: light;
--colorNeutralBackground1: #ffffff;
--colorNeutralBackground2: #fafafa;
--colorNeutralBackground3: #f5f5f5;
--colorNeutralForeground1: #242424;
--colorNeutralForeground2: #424242;
--colorNeutralForeground3: #707070;
--colorNeutralForeground4: #b4b4b4;
--colorNeutralStroke1: #d1d1d1;
--colorNeutralStroke2: #e0e0e0;
--colorNeutralStroke3: #f0f0f0;
--colorSubtleBackgroundHover: #f5f5f5;
--colorSubtleBackgroundPressed: #e0e0e0;
--previewAreaBackground: #e8e6e4;
--previewSurfaceBackground: #ffffff;
--previewFrameBorderColor: rgba(0,0,0,0.08);
--scrollbarThumbColor: rgba(0,0,0,0.2);
--layerShadow: 0 4px 8px rgba(0,0,0,0.12), 0 0 2px rgba(0,0,0,0.1);
--buttonForegroundOnBrand: #fff;
--dangerForeground: #a80000;
--dangerBackground: #fdeaea;
--regionRemoveBorder: rgba(0,0,0,0.08);
--regionRemoveBackground: rgba(0,0,0,0.05);
--regionRemoveHoverBackground: rgba(0,0,0,0.1);
--regionRemoveIcon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23242424' d='M6.5 1a1.5 1.5 0 0 0-1.5 1.5V3H3a.5.5 0 0 0 0 1h.5v8.5A1.5 1.5 0 0 0 5 14h6a1.5 1.5 0 0 0 1.5-1.5V4h.5a.5.5 0 0 0 0-1h-2v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zM4.5 4h7v8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V4zm2 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E");
--sectionPickerChevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' stroke='%23424242' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--modeIconImageFilter: brightness(0);
--modeIconSelectedImageFilter: brightness(0) saturate(100%) invert(15%) sepia(84%) saturate(4421%) hue-rotate(277deg) brightness(88%) contrast(92%);
--previewLoadingForeground: #666;
}

@media (prefers-color-scheme: dark) {
:root {
color-scheme: dark;
--colorNeutralBackground1: #1f1f1f;
--colorNeutralBackground2: #262626;
--colorNeutralBackground3: #2b2b2b;
--colorNeutralForeground1: #ffffff;
--colorNeutralForeground2: #d6d6d6;
--colorNeutralForeground3: #b3b3b3;
--colorNeutralForeground4: #8a8a8a;
--colorNeutralStroke1: #5c5c5c;
--colorNeutralStroke2: #3d3d3d;
--colorNeutralStroke3: #2f2f2f;
--colorSubtleBackgroundHover: #2b2b2b;
--colorSubtleBackgroundPressed: #333333;
--previewAreaBackground: #111111;
--previewSurfaceBackground: #1a1a1a;
--previewFrameBorderColor: rgba(255,255,255,0.12);
--scrollbarThumbColor: rgba(255,255,255,0.24);
--layerShadow: 0 4px 12px rgba(0,0,0,0.45), 0 0 2px rgba(0,0,0,0.35);
--dangerForeground: #ff99a4;
--dangerBackground: #4a1b20;
--regionRemoveBorder: rgba(255,255,255,0.16);
--regionRemoveBackground: rgba(255,255,255,0.08);
--regionRemoveHoverBackground: rgba(255,255,255,0.14);
--regionRemoveIcon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23ffffff' d='M6.5 1a1.5 1.5 0 0 0-1.5 1.5V3H3a.5.5 0 0 0 0 1h.5v8.5A1.5 1.5 0 0 0 5 14h6a1.5 1.5 0 0 0 1.5-1.5V4h.5a.5.5 0 0 0 0-1h-2v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zM4.5 4h7v8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V4zm2 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E");
--sectionPickerChevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' stroke='%23d6d6d6' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
--modeIconImageFilter: brightness(0) invert(1);
--previewLoadingForeground: #c8c8c8;
}
}

// Segoe UI for non-Windows users (matches V1; loaded from OneNote CDN).
@font-face {
Expand All @@ -12,18 +76,18 @@
}

// --- Fluent 2 neutral tokens (light theme) ---
@colorNeutralBackground1: #ffffff; // Sidebar / surface
@colorNeutralBackground2: #fafafa; // Subtle hover
@colorNeutralBackground3: #f5f5f5; // Input / field rest
@colorNeutralForeground1: #242424; // Primary text
@colorNeutralForeground2: #424242; // Labels / secondary text
@colorNeutralForeground3: #707070; // Tertiary text (source URL)
@colorNeutralForeground4: #b4b4b4; // Placeholder
@colorNeutralStroke1: #d1d1d1; // Input/button border
@colorNeutralStroke2: #e0e0e0; // Divider
@colorNeutralStroke3: #f0f0f0; // Subtle separator
@colorSubtleBackgroundHover: #f5f5f5;
@colorSubtleBackgroundPressed: #e0e0e0;
@colorNeutralBackground1: var(--colorNeutralBackground1); // Sidebar / surface
@colorNeutralBackground2: var(--colorNeutralBackground2); // Subtle hover
@colorNeutralBackground3: var(--colorNeutralBackground3); // Input / field rest
@colorNeutralForeground1: var(--colorNeutralForeground1); // Primary text
@colorNeutralForeground2: var(--colorNeutralForeground2); // Labels / secondary text
@colorNeutralForeground3: var(--colorNeutralForeground3); // Tertiary text (source URL)
@colorNeutralForeground4: var(--colorNeutralForeground4); // Placeholder
@colorNeutralStroke1: var(--colorNeutralStroke1); // Input/button border
@colorNeutralStroke2: var(--colorNeutralStroke2); // Divider
@colorNeutralStroke3: var(--colorNeutralStroke3); // Subtle separator
@colorSubtleBackgroundHover: var(--colorSubtleBackgroundHover);
@colorSubtleBackgroundPressed: var(--colorSubtleBackgroundPressed);

// --- OneNote brand ramp (from Fluent 2 "Colors/Brand/OneNote/*" in Figma) ---
// Used for primary button, focus ring, selected states
Expand All @@ -41,7 +105,7 @@ html, body {
width: 100%; height: 100%;
font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, sans-serif;
}
body { display: flex; }
body { display: flex; background: @colorNeutralBackground1; color: @colorNeutralForeground1; }

// Preview area wrapper — flex column for article header + content
// When .preview-ready is added (after capture), child panels gain a thin rounded frame.
Expand All @@ -52,15 +116,15 @@ body { display: flex; }
#preview-area {
flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100%;
position: relative;
background: #e8e6e4; // visible contrast against white page content inside the rounded frame
background: var(--previewAreaBackground); // visible contrast around page content inside the rounded frame

// Rounded frame — thin inner ring only, no drop shadow
&.preview-ready::after {
content: "";
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
pointer-events: none; z-index: 10;
border-radius: @preview-radius;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
box-shadow: inset 0 0 0 1px var(--previewFrameBorderColor);
}

// When ready, add real margin on child panels so content isn't hidden behind the rounded corners
Expand Down Expand Up @@ -125,7 +189,7 @@ iframe#content-frame {
iframe#preview-frame {
flex: 1; min-width: 0; min-height: 0;
border: none; display: block;
background: #fff;
background: var(--previewSurfaceBackground);
}

// Preview area — shown after capture with scrollable image
Expand All @@ -134,12 +198,12 @@ iframe#preview-frame {
#preview-container {
flex: 1; min-width: 0; min-height: 0;
overflow-y: auto; display: none;
background: #e8e6e4;
background: var(--previewAreaBackground);
// Full-width for full-page screenshot preview, but not for region thumbnails
> img { width: 100%; display: block; }
// Show scrollbar to indicate scrollable content
&::-webkit-scrollbar { display: block; width: 6px; }
&::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 3px; }
&::-webkit-scrollbar-thumb { background: var(--scrollbarThumbColor); border-radius: 3px; }
&::-webkit-scrollbar-track { background: transparent; }
&:focus-visible {
outline: none;
Expand Down Expand Up @@ -245,7 +309,7 @@ iframe#preview-frame {
// Visible scrollbar so user can see there's more content below
// !important overrides the global ::-webkit-scrollbar { display: none } at bottom of file
&::-webkit-scrollbar { display: block !important; width: 5px !important; }
&::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2) !important; border-radius: 3px; }
&::-webkit-scrollbar-thumb { background: var(--scrollbarThumbColor) !important; border-radius: 3px; }
&::-webkit-scrollbar-track { background: transparent; }
}

Expand Down Expand Up @@ -298,10 +362,10 @@ iframe#preview-frame {
// brand color of the selected text/border.
.mode-icon-img {
width: 20px; height: 20px; flex-shrink: 0;
filter: brightness(0);
filter: var(--modeIconImageFilter);
}
&.selected .mode-icon-img {
filter: brightness(0) saturate(100%) invert(15%) sepia(84%) saturate(4421%) hue-rotate(277deg) brightness(88%) contrast(92%);
filter: var(--modeIconSelectedImageFilter);
}
}

Expand Down Expand Up @@ -373,7 +437,7 @@ iframe#preview-frame {
user-select: none;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
// Chevron down arrow
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5l3.5 3.5 3.5-3.5' stroke='%23424242' stroke-width='1.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-image: var(--sectionPickerChevron);
background-repeat: no-repeat;
background-position: right 8px center;
&:focus {
Expand All @@ -397,10 +461,10 @@ iframe#preview-frame {
background: @colorNeutralBackground1;
border: 1px solid @colorNeutralStroke1;
border-radius: 4px;
box-shadow: 0 4px 8px rgba(0,0,0,0.12), 0 0 2px rgba(0,0,0,0.1);
box-shadow: var(--layerShadow);
z-index: 50;
&::-webkit-scrollbar { display: block !important; width: 5px !important; }
&::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2) !important; border-radius: 3px; }
&::-webkit-scrollbar-thumb { background: var(--scrollbarThumbColor) !important; border-radius: 3px; }
&::-webkit-scrollbar-track { background: transparent; }
}

Expand Down Expand Up @@ -475,7 +539,7 @@ iframe#preview-frame {
// Clip — Fluent primary (OneNote brand /80 rest → /60 hover → /50 pressed)
#save-btn {
background: @colorCompoundBrandBackground;
color: #fff;
color: var(--buttonForegroundOnBrand);
border: 1px solid @colorCompoundBrandBackground;
&:hover { background: @colorCompoundBrandBackgroundHover; border-color: @colorCompoundBrandBackgroundHover; }
&:active { background: @colorCompoundBrandBackgroundPressed; border-color: @colorCompoundBrandBackgroundPressed; }
Expand Down Expand Up @@ -664,19 +728,19 @@ iframe#preview-frame {
height: 28px; padding: 0; padding-inline: 8px 12px;
margin-bottom: 8px; // gap between button and image
border-radius: 4px;
border: 1px solid rgba(0,0,0,0.08);
background: rgba(0,0,0,0.05); // translucent black alpha 5% per sticky note
border: 1px solid var(--regionRemoveBorder);
background: var(--regionRemoveBackground);
color: @colorNeutralForeground1;
font-size: 13px; font-weight: 400; line-height: 20px;
font-family: inherit;
cursor: pointer;
transition: background 0.1s;
&:hover { background: rgba(0,0,0,0.1); }
&:hover { background: var(--regionRemoveHoverBackground); }
// Trash icon — clean filled path
&::before {
content: "";
display: inline-block; width: 16px; height: 16px; flex-shrink: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23242424' d='M6.5 1a1.5 1.5 0 0 0-1.5 1.5V3H3a.5.5 0 0 0 0 1h.5v8.5A1.5 1.5 0 0 0 5 14h6a1.5 1.5 0 0 0 1.5-1.5V4h.5a.5.5 0 0 0 0-1h-2v-.5A1.5 1.5 0 0 0 9.5 1h-3zm0 1h3a.5.5 0 0 1 .5.5V3H6v-.5a.5.5 0 0 1 .5-.5zM4.5 4h7v8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V4zm2 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-.5-.5zm3 0a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 1 0v-4a.5.5 0 0 0-.5-.5z'/%3E%3C/svg%3E") no-repeat center/contain;
background: var(--regionRemoveIcon) no-repeat center/contain;
}
}

Expand Down Expand Up @@ -757,7 +821,7 @@ iframe#preview-frame {
cursor: pointer;
margin-bottom: 10px;
transition: background 0.1s;
background: @colorCompoundBrandBackground; color: #fff;
background: @colorCompoundBrandBackground; color: var(--buttonForegroundOnBrand);
&:hover { background: @colorCompoundBrandBackgroundHover; border-color: @colorCompoundBrandBackgroundHover; }
&:disabled { opacity: 0.4; cursor: default; }
}
Expand All @@ -772,7 +836,7 @@ iframe#preview-frame {

.signin-error {
font-size: 12px;
color: #a80000; // Fluent danger color
color: var(--dangerForeground);
margin-top: 8px;
line-height: 16px;
}
Expand Down Expand Up @@ -1116,8 +1180,8 @@ iframe#preview-frame {
}

.pdf-range-error {
color: #a80000; font-size: 12px; margin-top: 2px;
padding: 4px 8px; background: #fdeaea; border-radius: 4px;
color: var(--dangerForeground); font-size: 12px; margin-top: 2px;
padding: 4px 8px; background: var(--dangerBackground); border-radius: 4px;
}

#pdf-checkboxes {
Expand All @@ -1139,7 +1203,7 @@ iframe#preview-frame {
}

.pdf-attach-warning {
color: #a80000; font-size: 12px;
color: var(--dangerForeground); font-size: 12px;
padding: 4px 0 0 0; padding-inline-start: 20px;
}

Expand Down Expand Up @@ -1173,7 +1237,7 @@ iframe#preview-frame {
opacity: 0.3;
}
.pdf-loading-indicator {
text-align: center; padding: 20px; color: #666;
text-align: center; padding: 20px; color: var(--previewLoadingForeground);
font-size: 13px;
}
// V1 .attachment-overlay parity: 84x96 box, 48px icon, filename below.
Expand Down