/* dark-mode.css — Dark mode color scheme */ /* Dark mode is activated by adding data-theme="dark" to */ [data-theme="dark"] { /* Background colors */ --bg-primary: #1a1a1a; --bg-secondary: #2a2a2a; --bg-tertiary: #3a3a3a; /* Text colors */ --text-primary: #e0e0e0; --text-secondary: #b0b0b0; --text-muted: #808080; /* Accent colors */ --accent-color: #4a9eff; --accent-hover: #6bb0ff; /* Border colors */ --border-color: #404040; } [data-theme="dark"] body { background-color: var(--bg-primary); color: var(--text-primary); } [data-theme="dark"] .nav { background-color: var(--bg-secondary); border-bottom-color: var(--border-color); } [data-theme="dark"] .nav-logo { color: var(--text-primary); } [data-theme="dark"] .nav-links a { color: var(--text-secondary); } [data-theme="dark"] .nav-links a:hover, [data-theme="dark"] .nav-links a.active { color: var(--accent-color); } [data-theme="dark"] .card { background-color: var(--bg-secondary); border-color: var(--border-color); } [data-theme="dark"] .card:hover { border-color: var(--accent-color); } [data-theme="dark"] .card-title a { color: var(--text-primary); } [data-theme="dark"] .card-excerpt { color: var(--text-secondary); } [data-theme="dark"] .card-tag { background-color: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border-color); } [data-theme="dark"] .footer { background-color: var(--bg-secondary); border-top-color: var(--border-color); } [data-theme="dark"] .footer-text { color: var(--text-secondary); } [data-theme="dark"] .section { border-color: var(--border-color); } [data-theme="dark"] .section-title { color: var(--text-primary); } [data-theme="dark"] .story-body { color: var(--text-primary); } [data-theme="dark"] .search-input { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] .search-input::placeholder { color: var(--text-muted); } [data-theme="dark"] input, [data-theme="dark"] textarea { background-color: var(--bg-tertiary); border-color: var(--border-color); color: var(--text-primary); } [data-theme="dark"] button { background-color: var(--accent-color); color: white; } [data-theme="dark"] button:hover { background-color: var(--accent-hover); } /* Dark mode toggle button */ .theme-toggle { position: fixed; bottom: 20px; right: 20px; width: 50px; height: 50px; border-radius: 50%; background-color: var(--bg-secondary, #2a2a2a); border: 2px solid var(--border-color, #404040); color: var(--text-primary, #e0e0e0); font-size: 24px; cursor: pointer; z-index: 1000; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 10px rgba(0,0,0,0.3); transition: all 0.3s ease; } .theme-toggle:hover { transform: scale(1.1); box-shadow: 0 4px 15px rgba(0,0,0,0.4); } .theme-toggle:active { transform: scale(0.95); }