- add dark mode

TobiasMue91 · TobiasMue91 · commit c0271e26ca2c · 2025-02-28T21:08:30.000+01:00
diff --git a/index.html b/index.html
@@ -122,6 +122,32 @@
             .random-btn {margin-left:0; order:3; width:100%; margin-top:0.5rem;}
             .stat-card {min-width:100px;}
         }
+
+        @media (prefers-color-scheme: dark) {
+            :root { --primary: #4d84a3; --primary-hover: #7cbed1; --secondary: #f5a849; --secondary-hover: #ffbe59; --bg: #121212; --card: #1e1e1e; --dark: #d4d5d6; --gray: #2d2d2d; --text: #e4e6eb; --border: #333333; --shadow: 0 2px 6px rgba(0,0,0,0.2); }
+            body { background-color: var(--bg); color: var(--text); background-image: url('img/crossword_pattern.png'); background-blend-mode: soft-light; opacity: 1; }
+            header, .filter-bar, footer { background-color: var(--card); border-color: var(--border); }
+            .card, .stat-card, .filter-dropdown { background-color: var(--card); box-shadow: var(--shadow); }
+            .search-bar input, .sort-select, .category-select { background-color: var(--bg); color: var(--text); border-color: var(--border); }
+            .search-bar input::placeholder { color: #909090; }
+            .filter-btn { background-color: transparent; color: var(--text); border-color: var(--border); }
+            .filter-btn:hover:not(.active):not(.random-btn) { border-color: var(--primary); }
+            .filter-btn.active { background-color: var(--primary); color: white; }
+            .filter-btn.random-btn { background-color: var(--secondary); color: white; }
+            .section-title, .card-title { color: var(--dark); }
+            .card-desc { color: #b0b3b8; }
+            .card-btn.game { background-color: var(--primary); color: white; }
+            .card-btn.tool { background-color: var(--secondary); color: white; }
+            .view-btn { color: var(--primary); }
+            .view-btn:hover, .view-btn.active { color: var(--secondary); }
+            .footer-link { color: #b0b3b8; }
+            .footer-link:hover { color: var(--primary); }
+            .empty-state { color: #b0b3b8; }
+            .empty-state i { color: var(--border); }
+            .back-to-top { background-color: var(--primary); color: white; }
+            .pill.game { background: rgba(77, 132, 163, 0.3); color: var(--primary); }
+            .pill.tool { background: rgba(245, 168, 73, 0.3); color: var(--secondary); }
+        }
     </style>
 </head>
 <body>
