diff --git a/frontend/src/components/viewer/EmbedPdfViewer.tsx b/frontend/src/components/viewer/EmbedPdfViewer.tsx
index 89eb08738..b4590db00 100644
--- a/frontend/src/components/viewer/EmbedPdfViewer.tsx
+++ b/frontend/src/components/viewer/EmbedPdfViewer.tsx
@@ -175,7 +175,6 @@ const EmbedPdfViewerContent = ({
             <LocalEmbedPDF
               file={effectiveFile.file}
               url={effectiveFile.url}
-              colorScheme={colorScheme}
             />
           </Box>
         </>
@@ -219,7 +218,6 @@ const EmbedPdfViewerContent = ({
       <ThumbnailSidebar
         visible={isThumbnailSidebarVisible}
         onToggle={toggleThumbnailSidebar}
-        colorScheme={colorScheme}
       />
     </Box>
   );
diff --git a/frontend/src/components/viewer/LocalEmbedPDF.tsx b/frontend/src/components/viewer/LocalEmbedPDF.tsx
index ac090cccd..f9a8e3fc9 100644
--- a/frontend/src/components/viewer/LocalEmbedPDF.tsx
+++ b/frontend/src/components/viewer/LocalEmbedPDF.tsx
@@ -31,15 +31,12 @@ import { RotateAPIBridge } from './RotateAPIBridge';
 interface LocalEmbedPDFProps {
   file?: File | Blob;
   url?: string | null;
-  colorScheme: 'light' | 'dark' | 'auto';
+  colorScheme?: 'light' | 'dark' | 'auto'; // Optional since we use CSS variables
 }
 
-export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
+export function LocalEmbedPDF({ file, url }: LocalEmbedPDFProps) {
   const [pdfUrl, setPdfUrl] = useState<string | null>(null);
 
-  // Convert color scheme (handle 'auto' mode by defaulting to 'light')
-  const actualColorScheme = colorScheme === 'auto' ? 'light' : colorScheme;
-
   // Convert File to URL if needed
   useEffect(() => {
     if (file) {
@@ -129,8 +126,8 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
         justifyContent: 'center',
         alignItems: 'center',
         height: '100%',
-        background: actualColorScheme === 'dark' ? '#1a1b1e' : '#f8f9fa',
-        color: actualColorScheme === 'dark' ? '#ffffff' : '#666666',
+        background: 'var(--bg-surface)',
+        color: 'var(--text-secondary)',
       }}>
         <div style={{ textAlign: 'center' }}>
           <div style={{ fontSize: '24px', marginBottom: '16px' }}>📄</div>
@@ -147,8 +144,8 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
         justifyContent: 'center',
         alignItems: 'center',
         height: '100%',
-        background: actualColorScheme === 'dark' ? '#1a1b1e' : '#f1f3f5',
-        color: actualColorScheme === 'dark' ? '#ffffff' : '#666666',
+        background: 'var(--bg-surface)',
+        color: 'var(--text-secondary)',
       }}>
         <div style={{ textAlign: 'center' }}>
           <div style={{ fontSize: '24px', marginBottom: '16px' }}>⏳</div>
@@ -165,8 +162,8 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
         justifyContent: 'center',
         alignItems: 'center',
         height: '100%',
-        background: actualColorScheme === 'dark' ? '#1a1b1e' : '#f1f3f5',
-        color: '#ff6b6b',
+        background: 'var(--bg-surface)',
+        color: 'var(--color-red-500)',
       }}>
         <div style={{ textAlign: 'center' }}>
           <div style={{ fontSize: '24px', marginBottom: '16px' }}>❌</div>
@@ -199,7 +196,7 @@ export function LocalEmbedPDF({ file, url, colorScheme }: LocalEmbedPDFProps) {
         <GlobalPointerProvider>
           <Viewport
             style={{
-              backgroundColor: actualColorScheme === 'dark' ? '#1a1b1e' : '#f1f3f5',
+              backgroundColor: 'var(--bg-surface)',
               height: '100%',
               width: '100%',
               maxHeight: '100%',
diff --git a/frontend/src/components/viewer/ThumbnailSidebar.tsx b/frontend/src/components/viewer/ThumbnailSidebar.tsx
index 5a9b46ed4..02f257786 100644
--- a/frontend/src/components/viewer/ThumbnailSidebar.tsx
+++ b/frontend/src/components/viewer/ThumbnailSidebar.tsx
@@ -6,19 +6,16 @@ import '../../types/embedPdf';
 interface ThumbnailSidebarProps {
   visible: boolean;
   onToggle: () => void;
-  colorScheme: 'light' | 'dark' | 'auto';
+  colorScheme?: 'light' | 'dark' | 'auto'; // Optional since we use CSS variables
 }
 
-export function ThumbnailSidebar({ visible, onToggle: _onToggle, colorScheme }: ThumbnailSidebarProps) {
+export function ThumbnailSidebar({ visible, onToggle: _onToggle }: ThumbnailSidebarProps) {
   const { getScrollState, scrollActions, getThumbnailAPI } = useViewer();
   const [thumbnails, setThumbnails] = useState<{ [key: number]: string }>({});
   
   const scrollState = getScrollState();
   const thumbnailAPI = getThumbnailAPI();
 
-  // Convert color scheme
-  const actualColorScheme = colorScheme === 'auto' ? 'light' : colorScheme;
-
   // Generate thumbnails when sidebar becomes visible
   useEffect(() => {
     if (!visible || scrollState.totalPages === 0) return;
@@ -100,8 +97,8 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, colorScheme }:
             top: 0,
             bottom: 0,
             width: '15rem',
-            backgroundColor: actualColorScheme === 'dark' ? '#1a1b1e' : '#f8f9fa',
-            borderLeft: `1px solid ${actualColorScheme === 'dark' ? '#373A40' : '#e9ecef'}`,
+            backgroundColor: 'var(--bg-surface)',
+            borderLeft: '1px solid var(--border-subtle)',
             zIndex: 998,
             display: 'flex',
             flexDirection: 'column',
@@ -125,10 +122,10 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, colorScheme }:
                       borderRadius: '8px',
                       padding: '8px',
                       backgroundColor: scrollState.currentPage === pageIndex + 1
-                        ? (actualColorScheme === 'dark' ? '#364FC7' : '#e7f5ff')
+                        ? 'var(--color-primary-100)'
                         : 'transparent',
                       border: scrollState.currentPage === pageIndex + 1 
-                        ? '2px solid #1c7ed6'
+                        ? '2px solid var(--color-primary-500)'
                         : '2px solid transparent',
                       transition: 'all 0.2s ease',
                       display: 'flex',
@@ -138,7 +135,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, colorScheme }:
                     }}
                     onMouseEnter={(e) => {
                       if (scrollState.currentPage !== pageIndex + 1) {
-                        e.currentTarget.style.backgroundColor = actualColorScheme === 'dark' ? '#25262b' : '#f1f3f5';
+                        e.currentTarget.style.backgroundColor = 'var(--hover-bg)';
                       }
                     }}
                     onMouseLeave={(e) => {
@@ -157,20 +154,20 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, colorScheme }:
                           height: 'auto',
                           borderRadius: '4px',
                           boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
-                          border: `1px solid ${actualColorScheme === 'dark' ? '#373A40' : '#e9ecef'}`
+                          border: '1px solid var(--border-subtle)'
                         }}
                       />
                     ) : thumbnails[pageIndex] === 'error' ? (
                       <div style={{
                         width: '11.5rem',
                         height: '15rem',
-                        backgroundColor: actualColorScheme === 'dark' ? '#2d1b1b' : '#ffebee',
-                        border: `1px solid ${actualColorScheme === 'dark' ? '#5d3737' : '#ffcdd2'}`,
+                        backgroundColor: 'var(--color-red-50)',
+                        border: '1px solid var(--color-red-200)',
                         borderRadius: '4px',
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
-                        color: '#d32f2f',
+                        color: 'var(--color-red-500)',
                         fontSize: '12px'
                       }}>
                         Failed
@@ -179,13 +176,13 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, colorScheme }:
                       <div style={{
                         width: '11.5rem',
                         height: '15rem',
-                        backgroundColor: actualColorScheme === 'dark' ? '#25262b' : '#f8f9fa',
-                        border: `1px solid ${actualColorScheme === 'dark' ? '#373A40' : '#e9ecef'}`,
+                        backgroundColor: 'var(--bg-muted)',
+                        border: '1px solid var(--border-subtle)',
                         borderRadius: '4px',
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
-                        color: actualColorScheme === 'dark' ? '#adb5bd' : '#6c757d',
+                        color: 'var(--text-muted)',
                         fontSize: '12px'
                       }}>
                         Loading...
@@ -197,8 +194,8 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, colorScheme }:
                       fontSize: '12px',
                       fontWeight: 500,
                       color: scrollState.currentPage === pageIndex + 1
-                        ? (actualColorScheme === 'dark' ? '#ffffff' : '#1c7ed6')
-                        : (actualColorScheme === 'dark' ? '#adb5bd' : '#6c757d')
+                        ? 'var(--color-primary-500)'
+                        : 'var(--text-muted)'
                     }}>
                       Page {pageIndex + 1}
                     </div>