/* ========================================== Bookhoard Reading Themes - 18 Themes Organized by Category for User Convenience ========================================== */ /* ========================================== CATEGORY 1: CLASSIC READING (6 themes) Time-tested, comfortable for long sessions ========================================== */ /* Light - Default theme */ .theme-light { --reader-bg: #fafafa; --reader-text: #1a1a1a; --reader-link: #0066cc; --reader-selection: #b3d9ff; } .theme-light.dark { --reader-bg: #1a1a1a; --reader-text: #e8e8e8; --reader-link: #60a5fa; --reader-selection: #1e3a8a; } /* Paper - Warmer, softer */ .theme-paper { --reader-bg: #fdfbf7; --reader-text: #2d2d2d; --reader-link: #0284c7; --reader-selection: #bae6fd; } .theme-paper.dark { --reader-bg: #1c1917; --reader-text: #ebe5dd; --reader-link: #38bdf8; --reader-selection: #0c4a6e; } /* Sepia - Classic e-reader */ .theme-sepia { --reader-bg: #f4ecd8; --reader-text: #4a3728; --reader-link: #8b4513; --reader-selection: #d4c4a8; } .theme-sepia.dark { --reader-bg: #2b2420; --reader-text: #d4c4a8; --reader-link: #d97706; --reader-selection: #451a03; } /* Parchment - Aged document feel */ .theme-parchment { --reader-bg: #f0e6d3; --reader-text: #5c4033; --reader-link: #92400e; --reader-selection: #e7c9a8; } .theme-parchment.dark { --reader-bg: #3d2b1f; --reader-text: #e8dcc8; --reader-link: #b45309; --reader-selection: #292524; } /* Warm - Cozy evening */ .theme-warm { --reader-bg: #faf8f0; --reader-text: #2b2b2b; --reader-link: #d97706; --reader-selection: #fef3c7; } .theme-warm.dark { --reader-bg: #2d2416; --reader-text: #f5e6d3; --reader-link: #fbbf24; --reader-selection: #451a03; } /* Candlelight - Intimate glow */ .theme-candlelight { --reader-bg: #fef3c7; --reader-text: #3d2b1f; --reader-link: #b45309; --reader-selection: #fde68a; } .theme-candlelight.dark { --reader-bg: #451a03; --reader-text: #fde68a; --reader-link: #fb923c; --reader-selection: #78350f; } /* ========================================== CATEGORY 2: SKY & ATMOSPHERE (4 themes) Open, airy, contemplative ========================================== */ /* Azure - Open sky */ .theme-azure { --reader-bg: #cedef5; --reader-text: #262d48; --reader-link: #2d53e5; --reader-selection: #a5b4fc; } .theme-azure.dark { --reader-bg: #282e47; --reader-text: #babee1; --reader-link: #0ea5e9; --reader-selection: #1e3a8a; } /* Sky - Clear day */ .theme-sky { --reader-bg: #e0f2fe; --reader-text: #1e3a5f; --reader-link: #0284c7; --reader-selection: #7dd3fc; } .theme-sky.dark { --reader-bg: #0c4a6e; --reader-text: #bae6fd; --reader-link: #0ea5e9; --reader-selection: #075985; } /* Arctic - Icy cool */ .theme-arctic { --reader-bg: #f0f9ff; --reader-text: #1e3a5f; --reader-link: #0284c7; --reader-selection: #bae6fd; } .theme-arctic.dark { --reader-bg: #1e293b; --reader-text: #bfdbfe; --reader-link: #38bdf8; --reader-selection: #0c4a6e; } /* Frost - Crisp winter */ .theme-frost { --reader-bg: #f8fafc; --reader-text: #334155; --reader-link: #38bdf8; --reader-selection: #e0f2fe; } .theme-frost.dark { --reader-bg: #0f172a; --reader-text: #e0f2fe; --reader-link: #7dd3fc; --reader-selection: #1e293b; } /* ========================================== CATEGORY 3: SUNSET & WARMTH (3 themes) Warm, energizing, relaxation ========================================== */ /* Dusk - Evening transition */ .theme-dusk { --reader-bg: #fef3e2; --reader-text: #3d2914; --reader-link: #ea580c; --reader-selection: #fed7aa; } .theme-dusk.dark { --reader-bg: #2d1f14; --reader-text: #f5d5b8; --reader-link: #fb923c; --reader-selection: #431407; } /* Sunset - Peak colors */ .theme-sunset { --reader-bg: #fff7ed; --reader-text: #4a1d1d; --reader-link: #f97316; --reader-selection: #ffedd5; } .theme-sunset.dark { --reader-bg: #431407; --reader-text: #fed7aa; --reader-link: #fb923c; --reader-selection: #7c2d12; } /* Twilight - Magical hour */ .theme-twilight { --reader-bg: #f5f3ff; --reader-text: #4c1d95; --reader-link: #8b5cf6; --reader-selection: #ddd6fe; } .theme-twilight.dark { --reader-bg: #2e1065; --reader-text: #ddd6fe; --reader-link: #a78bfa; --reader-selection: #4c1d95; } /* ========================================== CATEGORY 4: NATURE & EARTH (3 themes) Grounded, natural, calming ========================================== */ /* Forest - Deep woods */ .theme-forest { --reader-bg: #e8efe8; --reader-text: #1a2e1a; --reader-link: #15803d; --reader-selection: #bbf7d0; } .theme-forest.dark { --reader-bg: #1a2e1a; --reader-text: #c8dcc8; --reader-link: #22c55e; --reader-selection: #14532d; } /* Moss - Fresh spring */ .theme-moss { --reader-bg: #dcfce7; --reader-text: #14532d; --reader-link: #22c55e; --reader-selection: #86efac; } .theme-moss.dark { --reader-bg: #052e16; --reader-text: #86efac; --reader-link: #4ade80; --reader-selection: #064e3b; } /* Slate - Stone stability */ .theme-slate { --reader-bg: #f8fafc; --reader-text: #334155; --reader-link: #475569; --reader-selection: #e2e8f0; } .theme-slate.dark { --reader-bg: #1e293b; --reader-text: #e2e8f0; --reader-link: #94a3b8; --reader-selection: #334155; } /* ========================================== CATEGORY 5: HIGH PERFORMANCE (2 themes) Optimized for specific use cases ========================================== */ /* OLED - Battery saving, max contrast */ .theme-oled { --reader-bg: #ffffff; --reader-text: #000000; --reader-link: #0066cc; --reader-selection: #ffff00; } .theme-oled.dark { --reader-bg: #000000; --reader-text: #ffffff; --reader-link: #3b82f6; --reader-selection: #1e3a8a; } /* Solarized - Precision designed */ .theme-solarized { --reader-bg: #fdf6e3; --reader-text: #657b83; --reader-link: #268bd2; --reader-selection: #eee8d5; } .theme-solarized.dark { --reader-bg: #002b36; --reader-text: #839496; --reader-link: #268bd2; --reader-selection: #073642; } /* ========================================== BASE TYPOGRAPHY (applies to all themes) ========================================== */ html, body { background-color: var(--reader-bg); color: var(--reader-text); font-family: var(--reader-font, "Literata", serif); font-size: var(--reader-font-size, 16px); line-height: var(--reader-line-height, 1.6); margin: var(--reader-margin, 20px); padding: var(--reader-margin, 20px); } /* Links */ a { color: var(--reader-link); text-decoration: underline; } /* Text selection */ ::selection { background-color: var(--reader-selection); } /* Images */ img, svg, video { max-width: 100%; height: auto; display: block; margin: 0.5em auto; } /* Prevent orphans/widows */ p { orphans: 3; widows: 3; } /* Block quotes */ blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid var(--reader-link); font-style: italic; }