diff --git a/src/images/editorOptions/font_down.svg b/src/images/editorOptions/font_down.svg
index 2429d307..ab2ef327 100644
--- a/src/images/editorOptions/font_down.svg
+++ b/src/images/editorOptions/font_down.svg
@@ -1,3 +1,9 @@
 <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+svg { color: #242424; }
+@media (prefers-color-scheme: dark) {
+	svg { color: #ffffff; }
+}
+</style>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M6 22L12.7 4.5H14.84L21.57 22H18.7L16.9 17H10.6L8.8 22H6ZM13.75 8L11.5 14.5H16L13.75 8Z" fill="currentColor"/>
 </svg>
diff --git a/src/images/editorOptions/font_up.svg b/src/images/editorOptions/font_up.svg
index e4a8786a..21db3ebf 100644
--- a/src/images/editorOptions/font_up.svg
+++ b/src/images/editorOptions/font_up.svg
@@ -1,3 +1,9 @@
 <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+svg { color: #242424; }
+@media (prefers-color-scheme: dark) {
+	svg { color: #ffffff; }
+}
+</style>
 <path fill-rule="evenodd" clip-rule="evenodd" d="M5.2 27H2L12.5 2H15.5L26 27H22.8L19.5 18.8367H8.5L5.2 27ZM9.5 16.2857L14 6.08163L18.5 16.2857H9.5Z" fill="currentColor"/>
 </svg>
diff --git a/src/images/editorOptions/highlight_tool_off.svg b/src/images/editorOptions/highlight_tool_off.svg
index 55a43bdd..a30b661f 100644
--- a/src/images/editorOptions/highlight_tool_off.svg
+++ b/src/images/editorOptions/highlight_tool_off.svg
@@ -1,4 +1,10 @@
 <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+svg { color: #242424; }
+@media (prefers-color-scheme: dark) {
+	svg { color: #ffffff; }
+}
+</style>
 <path d="M25.0303 2.96967C26.4278 4.36713 26.4278 6.63286 25.0303 8.03033L13.062 19.9987C12.7851 20.2755 12.4408 20.4754 12.063 20.5784L6.94731 21.9736C6.38744 22.1263 5.87371 21.6125 6.0264 21.0527L7.42159 15.937C7.52462 15.5592 7.72444 15.2149 8.00132 14.938L19.9696 2.96967C21.3671 1.5722 23.6328 1.5722 25.0303 2.96967ZM19.0001 6.06057L9.06198 15.9987C8.96969 16.0909 8.90308 16.2057 8.86874 16.3316L7.81889 20.1811L11.6683 19.1312C11.7942 19.0969 11.909 19.0303 12.0013 18.938L21.9391 8.99957L19.0001 6.06057ZM21.0303 4.03033L20.0601 4.99957L22.9991 7.93957L23.9696 6.96967C24.7813 6.15799 24.7813 4.842 23.9696 4.03033C23.158 3.21865 21.842 3.21865 21.0303 4.03033Z" fill="currentColor"/>
 <path d="M8.5 16C9.5 16 12 16.5 12 19.5001" stroke="currentColor" stroke-width="1.5"/>
 <rect x="1" y="24" width="26" height="4" rx="1" fill="#FEFE56"/>
diff --git a/src/styles/renderer.less b/src/styles/renderer.less
index 6126ee4c..33eec387 100644
--- a/src/styles/renderer.less
+++ b/src/styles/renderer.less
@@ -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 {
@@ -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
@@ -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.
@@ -52,7 +116,7 @@ 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 {
@@ -60,7 +124,7 @@ body { display: flex; }
 		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
@@ -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
@@ -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;
@@ -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; }
 }
 
@@ -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);
 	}
 }
 
@@ -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 {
@@ -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; }
 }
 
@@ -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; }
@@ -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;
 	}
 }
 
@@ -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; }
 }
@@ -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;
 }
@@ -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 {
@@ -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;
 }
 
@@ -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.