/* * Dark Mode + CSS Variable Foundation * * Defines all color tokens as CSS custom properties. * Light mode is the default; dark mode activates via: * 1. data-theme="dark" on (manual toggle, highest priority) * 2. @media (prefers-color-scheme: dark) (OS-level fallback) */ /* ======================== Light (default) ======================== */ :root { --ap-bg: #ffffff; --ap-text: #515151; --ap-text-strong: #303030; --ap-heading: #313131; --ap-link: #268bd2; --ap-muted: #6b7280; --ap-border: #e5e5e5; --ap-border-light: #eee; --ap-surface: #f9f9f9; --ap-surface-hover: #f5f5f5; --ap-code-color: #bf616a; --ap-code-bg: #f9f9f9; --ap-blockquote: #7a7a7a; --ap-masthead: #505050; --ap-masthead-small: #c0c0c0; --ap-post-date: #9a9a9a; --ap-pagination: #ccc; --ap-message-color: #717171; --ap-message-bg: #f9f9f9; --ap-tag-color: #000; --ap-tag-bg: #f3f3f3; --ap-table-stripe: #f9f9f9; /* Papers page tokens */ --ap-card: #fff; --ap-card-shadow: 0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04); --ap-toolbar-bg: linear-gradient(#fff, rgba(255,255,255,.92)); --ap-input-bg: #f8fafc; --ap-input-border: #cbd5e1; --ap-input-hover: #eef2f7; --ap-signal-bg: #f8fafc; --ap-signal-color: #374151; --ap-title-color: #0f172a; --ap-sort-label: #111827; --ap-sort-arrow: #9ca3af; --ap-badge-new-bg: #fff6d8; --ap-badge-new-border: #ffe3a3; --ap-badge-new-color: #8a5a00; --ap-loader-bg: white; --ap-loader-border: #ccc; /* Top nav tokens */ --ap-nav-bg: rgba(255,255,255,0.88); --ap-nav-border: rgba(0,0,0,0.06); /* Chat widget tokens */ --ap-chat-bg: #fff; --ap-chat-border: #e6e6e6; --ap-chat-header-bg: #fafafa; --ap-chat-header-border: #eee; --ap-chat-input-bg: #f8f9fa; --ap-chat-input-border: #aaa; --ap-chat-btn-bg: #f8f9fa; --ap-chat-btn-hover: #e9e9e9; --ap-chat-user-bg: #eef5ff; --ap-chat-bot-bg: #f4f8f4; --ap-chat-muted: #666; --ap-chat-spinner: rgba(0,0,0,0.2); } /* ======================== Dark theme ======================== */ [data-theme="dark"] { --ap-bg: #0f1117; --ap-text: #d1d5db; --ap-text-strong: #e5e7eb; --ap-heading: #f3f4f6; --ap-link: #60a5fa; --ap-muted: #9ca3af; --ap-border: #2d3748; --ap-border-light: #1f2937; --ap-surface: #1a1d27; --ap-surface-hover: #252830; --ap-code-color: #f0a8b0; --ap-code-bg: #1a1d27; --ap-blockquote: #9ca3af; --ap-masthead: #d1d5db; --ap-masthead-small: #6b7280; --ap-post-date: #9ca3af; --ap-pagination: #4b5563; --ap-message-color: #d1d5db; --ap-message-bg: #1a1d27; --ap-tag-color: #e5e7eb; --ap-tag-bg: #2d3748; --ap-table-stripe: #1a1d27; /* Papers page */ --ap-card: #1a1d27; --ap-card-shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.15); --ap-toolbar-bg: linear-gradient(#0f1117, rgba(15,17,23,.92)); --ap-input-bg: #1a1d27; --ap-input-border: #374151; --ap-input-hover: #252830; --ap-signal-bg: #1a1d27; --ap-signal-color: #d1d5db; --ap-title-color: #f3f4f6; --ap-sort-label: #e5e7eb; --ap-sort-arrow: #6b7280; --ap-badge-new-bg: rgba(251,191,36,0.12); --ap-badge-new-border: rgba(251,191,36,0.3); --ap-badge-new-color: #fbbf24; --ap-loader-bg: #1a1d27; --ap-loader-border: #374151; /* Top nav */ --ap-nav-bg: rgba(15,17,23,0.88); --ap-nav-border: rgba(255,255,255,0.08); /* Chat widget */ --ap-chat-bg: #1a1d27; --ap-chat-border: #2d3748; --ap-chat-header-bg: #151822; --ap-chat-header-border: #2d3748; --ap-chat-input-bg: #1a1d27; --ap-chat-input-border: #4b5563; --ap-chat-btn-bg: #1a1d27; --ap-chat-btn-hover: #252830; --ap-chat-user-bg: rgba(59,130,246,0.12); --ap-chat-bot-bg: rgba(34,197,94,0.08); --ap-chat-muted: #9ca3af; --ap-chat-spinner: rgba(255,255,255,0.2); } /* OS-level fallback when no manual toggle has been set */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ap-bg: #0f1117; --ap-text: #d1d5db; --ap-text-strong: #e5e7eb; --ap-heading: #f3f4f6; --ap-link: #60a5fa; --ap-muted: #9ca3af; --ap-border: #2d3748; --ap-border-light: #1f2937; --ap-surface: #1a1d27; --ap-surface-hover: #252830; --ap-code-color: #f0a8b0; --ap-code-bg: #1a1d27; --ap-blockquote: #9ca3af; --ap-masthead: #d1d5db; --ap-masthead-small: #6b7280; --ap-post-date: #9ca3af; --ap-pagination: #4b5563; --ap-message-color: #d1d5db; --ap-message-bg: #1a1d27; --ap-tag-color: #e5e7eb; --ap-tag-bg: #2d3748; --ap-table-stripe: #1a1d27; --ap-card: #1a1d27; --ap-card-shadow: 0 1px 2px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.15); --ap-toolbar-bg: linear-gradient(#0f1117, rgba(15,17,23,.92)); --ap-input-bg: #1a1d27; --ap-input-border: #374151; --ap-input-hover: #252830; --ap-signal-bg: #1a1d27; --ap-signal-color: #d1d5db; --ap-title-color: #f3f4f6; --ap-sort-label: #e5e7eb; --ap-sort-arrow: #6b7280; --ap-badge-new-bg: rgba(251,191,36,0.12); --ap-badge-new-border: rgba(251,191,36,0.3); --ap-badge-new-color: #fbbf24; --ap-loader-bg: #1a1d27; --ap-loader-border: #374151; --ap-nav-bg: rgba(15,17,23,0.88); --ap-nav-border: rgba(255,255,255,0.08); --ap-chat-bg: #1a1d27; --ap-chat-border: #2d3748; --ap-chat-header-bg: #151822; --ap-chat-header-border: #2d3748; --ap-chat-input-bg: #1a1d27; --ap-chat-input-border: #4b5563; --ap-chat-btn-bg: #1a1d27; --ap-chat-btn-hover: #252830; --ap-chat-user-bg: rgba(59,130,246,0.12); --ap-chat-bot-bg: rgba(34,197,94,0.08); --ap-chat-muted: #9ca3af; --ap-chat-spinner: rgba(255,255,255,0.2); } } /* ======================== Dark-mode element overrides ======================== */ /* DataTables dark overrides */ [data-theme="dark"] .dataTables_wrapper, :root:not([data-theme="light"]) .dataTables_wrapper { color: var(--ap-text); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .dataTables_wrapper { color: var(--ap-text); } } /* ======================== Page-level dark overrides ======================== */ /* Catches hardcoded light colors in page templates (inline styles excluded) */ /* --- Topic Explorer, Tags, Author Explorer, t-SNE pages --- */ [data-theme="dark"] .topic-panel, [data-theme="dark"] .tag-section, [data-theme="dark"] .author-card { background: var(--ap-surface) !important; border-color: var(--ap-border) !important; color: var(--ap-text) !important; } [data-theme="dark"] .topic-panel > summary:hover, [data-theme="dark"] .tag-section:hover { background: var(--ap-surface-hover) !important; } [data-theme="dark"] .topic-panel[open] > summary { border-bottom-color: var(--ap-border) !important; } /* Common light-bg utility classes */ [data-theme="dark"] .summary-hint, [data-theme="dark"] .small:not(.signal .small) { color: var(--ap-muted) !important; } /* Inputs and selects across all pages */ [data-theme="dark"] select, [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="search"], [data-theme="dark"] input[type="email"], [data-theme="dark"] input[type="number"], [data-theme="dark"] textarea { background-color: var(--ap-surface) !important; color: var(--ap-text) !important; border-color: var(--ap-border) !important; } /* Buttons (non-branded) */ [data-theme="dark"] button:not(.theme-toggle):not(.chat-launcher):not(.tag-chip.selected):not(.filter-toggle.active) { background-color: var(--ap-surface) !important; color: var(--ap-text) !important; border-color: var(--ap-border) !important; } [data-theme="dark"] button:not(.theme-toggle):not(.chat-launcher):hover { background-color: var(--ap-surface-hover) !important; } /* Tooltips */ [data-theme="dark"] .tooltip, [data-theme="dark"] [class*="tooltip"] { background: var(--ap-surface) !important; border-color: var(--ap-border) !important; color: var(--ap-text) !important; } /* Chatbot / chat page elements */ [data-theme="dark"] .chatbox, [data-theme="dark"] .chat-container { background: var(--ap-bg) !important; color: var(--ap-text) !important; } [data-theme="dark"] .message.user { background: rgba(59,130,246,0.12) !important; } [data-theme="dark"] .message.bot { background: rgba(34,197,94,0.08) !important; } [data-theme="dark"] .muted { color: var(--ap-muted) !important; } /* Pro page overrides */ [data-theme="dark"] .pro-box { background: var(--ap-surface) !important; border-color: var(--ap-border) !important; } [data-theme="dark"] .pro-features li { color: var(--ap-text) !important; } [data-theme="dark"] .llm-news-button { background: var(--ap-surface) !important; color: var(--ap-text) !important; border-color: var(--ap-border) !important; } [data-theme="dark"] .llm-news-button:hover { background: var(--ap-surface-hover) !important; } [data-theme="dark"] .llm-news-input, [data-theme="dark"] .llm-news-select { background: var(--ap-surface) !important; color: var(--ap-text) !important; border-color: var(--ap-border) !important; } /* Blog / opensource card overrides */ [data-theme="dark"] .blog-card, [data-theme="dark"] .tool-card, [data-theme="dark"] [class*="-card"] { background: var(--ap-surface) !important; border-color: var(--ap-border) !important; } /* Tag page chips */ [data-theme="dark"] .tag-chip:not(.selected) { background: var(--ap-surface) !important; border-color: var(--ap-border) !important; color: var(--ap-text) !important; } /* DataTables elements */ [data-theme="dark"] .dataTables_wrapper .dataTables_filter input, [data-theme="dark"] .dataTables_wrapper .dataTables_length select { background: var(--ap-surface) !important; color: var(--ap-text) !important; border-color: var(--ap-border) !important; } [data-theme="dark"] table.dataTable tbody tr { background: var(--ap-bg) !important; color: var(--ap-text) !important; } [data-theme="dark"] table.dataTable tbody tr:nth-child(even) { background: var(--ap-surface) !important; } /* Canvas/SVG visualization pages - tooltip overrides */ [data-theme="dark"] .d3-tooltip, [data-theme="dark"] .viz-tooltip { background: var(--ap-surface) !important; border-color: var(--ap-border) !important; color: var(--ap-text) !important; } /* Reset button hover */ [data-theme="dark"] .reset-inline:hover { background: var(--ap-surface-hover) !important; } /* Highlighted rows */ [data-theme="dark"] tr.highlighted, [data-theme="dark"] .highlighted { background-color: rgba(251,191,36,0.12) !important; } /* --- OS-level fallback mirrors --- */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .topic-panel, :root:not([data-theme="light"]) .tag-section, :root:not([data-theme="light"]) .author-card { background: var(--ap-surface) !important; border-color: var(--ap-border) !important; color: var(--ap-text) !important; } :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) input[type="text"], :root:not([data-theme="light"]) input[type="search"], :root:not([data-theme="light"]) input[type="email"], :root:not([data-theme="light"]) input[type="number"], :root:not([data-theme="light"]) textarea { background-color: var(--ap-surface) !important; color: var(--ap-text) !important; border-color: var(--ap-border) !important; } :root:not([data-theme="light"]) button:not(.theme-toggle):not(.chat-launcher):not(.tag-chip.selected):not(.filter-toggle.active) { background-color: var(--ap-surface) !important; color: var(--ap-text) !important; border-color: var(--ap-border) !important; } :root:not([data-theme="light"]) .pro-box { background: var(--ap-surface) !important; border-color: var(--ap-border) !important; } :root:not([data-theme="light"]) .pro-features li { color: var(--ap-text) !important; } :root:not([data-theme="light"]) .llm-news-button { background: var(--ap-surface) !important; color: var(--ap-text) !important; border-color: var(--ap-border) !important; } :root:not([data-theme="light"]) .llm-news-input, :root:not([data-theme="light"]) .llm-news-select { background: var(--ap-surface) !important; color: var(--ap-text) !important; border-color: var(--ap-border) !important; } :root:not([data-theme="light"]) .blog-card, :root:not([data-theme="light"]) .tool-card, :root:not([data-theme="light"]) [class*="-card"] { background: var(--ap-surface) !important; border-color: var(--ap-border) !important; } :root:not([data-theme="light"]) .tag-chip:not(.selected) { background: var(--ap-surface) !important; border-color: var(--ap-border) !important; color: var(--ap-text) !important; } :root:not([data-theme="light"]) table.dataTable tbody tr { background: var(--ap-bg) !important; color: var(--ap-text) !important; } :root:not([data-theme="light"]) table.dataTable tbody tr:nth-child(even) { background: var(--ap-surface) !important; } :root:not([data-theme="light"]) .message.user { background: rgba(59,130,246,0.12) !important; } :root:not([data-theme="light"]) .message.bot { background: rgba(34,197,94,0.08) !important; } :root:not([data-theme="light"]) .muted { color: var(--ap-muted) !important; } } /* ======================== View Transitions (Feature 3) ======================== */ @view-transition { navigation: auto; } @keyframes ap-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes ap-fade-out { from { opacity: 1; } to { opacity: 0; } } ::view-transition-old(root) { animation: ap-fade-out 0.12s ease-out; } ::view-transition-new(root) { animation: ap-fade-in 0.12s ease-in; }