diff --git a/web/base.html b/web/base.html
index a95dc7b..52fbcf5 100644
--- a/web/base.html
+++ b/web/base.html
@@ -14,7 +14,9 @@
         <title>{% block title %}{{ title }}{% endblock %}</title>
         {% block head %} {% endblock %}
     </head>
-    <body class="min-h-screen flex flex-col">
+    <body
+        class="min-h-screen flex flex-col bg-white text-black dark:bg-neutral-900 dark:text-neutral-100"
+    >
         {% block pagecontent %} {{ pagecontent }} {% endblock %}
     </body>
 </html>
diff --git a/web/footer.html b/web/footer.html
index c312b90..964aeb6 100644
--- a/web/footer.html
+++ b/web/footer.html
@@ -1,5 +1,5 @@
 <footer
-    class="w-full h-full border-t border-neutral-300 bg-neutral-100 p-4 flex flex-col mt-auto"
+    class="w-full h-full border-t border-neutral-300 dark:border-neutral-700 bg-neutral-100 dark:bg-neutral-900 p-4 flex flex-col mt-auto"
 >
     <div class="flex flex-col sm:grid sm:grid-cols-3 gap-8 mx-auto">
         <section class="max-w-sm w-full">
@@ -11,30 +11,38 @@
                     Gractwo
                 </h1>
             </div>
-            <p class="text-neutral-500 text-sm">
+            <p class="text-neutral-500 dark:text-neutral-400 text-sm">
                 Poznańskie stowarzyszenie okołogrowe, anime-informatyzacyjno
                 konwentowo-hangoutowe.
             </p>
         </section>
         <section class="max-w-sm w-full">
-            <h1 class="font-medium text-lg text-neutral-500 pb-4">
+            <h1
+                class="font-medium text-lg text-neutral-500 dark:text-neutral-400 pb-4"
+            >
                 Informacje prawne
             </h1>
-            <p class="text-sm text-neutral-500 mb-2">
+            <p class="text-sm text-neutral-500 dark:text-neutral-400 mb-2">
                 Stowarzyszenie niezawiązane.
             </p>
         </section>
         <section class="max-w-sm w-full">
-            <h1 class="font-medium text-lg text-neutral-500 pb-4">Kontakt</h1>
-            <p class="text-sm text-neutral-500 mb-2">
+            <h1
+                class="font-medium text-lg text-neutral-500 dark:text-neutral-400 pb-4"
+            >
+                Kontakt
+            </h1>
+            <p class="text-sm text-neutral-500 dark:text-neutral-400 mb-2">
                 Kontakt poprzez Discorda.
             </p>
-            <p class="text-sm text-neutral-500">Poznań, Polska</p>
+            <p class="text-sm text-neutral-500 dark:text-neutral-400">
+                Poznań, Polska
+            </p>
         </section>
     </div>
     <!--<hr class="mt-4 border-neutral-300" />-->
     <p
-        class="text-center py-2 text-neutral-500 text-sm border-t border-neutral-300 mt-12 h-fit"
+        class="text-center py-2 text-neutral-500 dark:text-neutral-400 text-sm border-t border-neutral-300 dark:border-neutral-700 mt-12 h-fit"
     >
         &copy; 2020-2025 Gractwo. Wszystkie prawa zastrzeżone.
     </p>
diff --git a/web/index.html b/web/index.html
index 95bddc1..cb87f0b 100644
--- a/web/index.html
+++ b/web/index.html
@@ -3,26 +3,26 @@
 {% block title %}gractwo.pl | Witamy!{% endblock %} {% block pagecontent %}
 
 <div
-    class="bg-gractwo-index-light flex flex-col items-center text-center w-full h-full flex-1"
+    class="bg-gractwo-index flex flex-col items-center text-center w-full h-full flex-1"
 >
     <div class="mt-16 md:mt-56 mx-auto [&>svg]:size-24">
         {% include "gractwo.svg" %}
     </div>
     <h1
-        class="text-7xl font-semibold bg-gradient-to-r from-gractwo-red to-gractwo-blu from-30% to-70% text-transparent bg-clip-text"
+        class="text-7xl font-semibold bg-linear-to-r from-gractwo-red to-gractwo-blu from-30% to-70% text-transparent bg-clip-text"
     >
         Gractwo
     </h1>
     <p
-        class="text-xl font-light mt-8 text-neutral-600 text-balance max-w-[50ch]"
+        class="text-xl font-light mt-8 text-neutral-600 dark:text-neutral-300 text-balance max-w-[50ch]"
     >
         Zakładamy okołogrowe, anime-informatyzacyjno konwentowo-hangoutowe
         stowarzyszenie. Dołącz do nas!
     </p>
-    <div class="flex flex-row gap-4 mt-8">
+    <div class="flex flex-row gap-4 mt-8 dark:text-neutral-100">
         <a
             href="/discord"
-            class="flex gap-4 px-4 py-3 rounded text-neutral-100 hover:text-white font-semibold bg-gradient-to-r from-gractwo-red-semidark to-gractwo-red [text-rendering:geometricPrecision] hover:scale-[1.02] hover:-translate-y-[2px] hover:shadow-lg transition-all"
+            class="flex gap-4 px-4 py-3 rounded text-neutral-100 hover:text-white font-semibold bg-linear-to-r from-gractwo-red-semidark to-gractwo-red [text-rendering:geometricPrecision] hover:scale-[1.02] hover:-translate-y-[2px] hover:shadow-lg transition-all"
         >
             <span class="scale-[.75]">{% include "icons/users.svg" %}</span>
             <span>Dołącz na serwer Discord</span>
@@ -31,27 +31,29 @@
             >
         </a>
     </div>
-    <div class="flex flex-col sm:flex-row gap-2 mt-4 text-neutral-500">
+    <div
+        class="flex flex-col sm:flex-row gap-2 mt-4 text-neutral-500 dark:text-neutral-400"
+    >
         <a
             href="/github"
-            class="flex gap-2 px-3 py-1 rounded-full hover:bg-neutral-300 hover:text-black transition"
+            class="flex gap-2 px-3 py-1 rounded-full hover:bg-neutral-300 dark:hover:bg-neutral-700 hover:text-black dark:hover:text-white transition"
             ><span class="scale-[.75]">{% include "icons/github.svg" %}</span>
             GitHub</a
         >
         <a
             href="/bsky"
-            class="flex gap-2 px-3 py-1 rounded-full hover:bg-neutral-300 hover:text-black transition"
+            class="flex gap-2 px-3 py-1 rounded-full hover:bg-neutral-300 dark:hover:bg-neutral-700 hover:text-black dark:hover:text-white transition"
             ><span class="scale-[.75]">{% include "icons/twitter.svg" %}</span>
             Bluesky</a
         >
         <a
             href="/youtube"
-            class="flex gap-2 px-3 py-1 rounded-full hover:bg-neutral-300 hover:text-black transition"
+            class="flex gap-2 px-3 py-1 rounded-full hover:bg-neutral-300 dark:hover:bg-neutral-700 hover:text-black dark:hover:text-white transition"
             ><span class="scale-[.75]">{% include "icons/youtube.svg" %}</span>
             YouTube</a
         >
     </div>
-    <div class="my-16 flex flex-col sm:flex-row gap-4">
+    <div class="my-16 flex flex-col sm:flex-row gap-4 dark:text-neutral-100">
         {%call statcard::statcard(dsc_members, "członków na discordzie")%}
         {%call statcard::statcard(days_community, "dni istnienia
         społeczności")%}
diff --git a/web/input.css b/web/input.css
index 68550c4..17b2bd3 100644
--- a/web/input.css
+++ b/web/input.css
@@ -9,61 +9,22 @@
     --color-gractwo-blu-dark: #3e8f9b;
 }
 
-.bg-gractwo-index-light {
-    background-size: "100% 100%";
-    background-image:
-        radial-gradient(125% 125% at 50% 90%, #ffffff 40%, transparent 95%),
-        linear-gradient(to right, #ff637e 15%, #00d3f2 100%);
-}
-
-.dashed-top-fade-grid {
-    position: absolute;
-    inset: 0;
-    z-index: 0;
-
-    background-image:
-        linear-gradient(to right, #e7e5e4 1px, transparent 1px),
-        linear-gradient(to bottom, #e7e5e4 1px, transparent 1px);
-    background-size: 20px 20px;
-    background-position:
-        0 0,
-        0 0;
-
-    mask-image:
-        repeating-linear-gradient(
-            to right,
-            black 0px,
-            black 3px,
-            transparent 3px,
-            transparent 8px
-        ),
-        repeating-linear-gradient(
-            to bottom,
-            black 0px,
-            black 3px,
-            transparent 3px,
-            transparent 8px
-        ),
-        radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);
-    -webkit-mask-image:
-        repeating-linear-gradient(
-            to right,
-            black 0px,
-            black 3px,
-            transparent 3px,
-            transparent 8px
-        ),
-        repeating-linear-gradient(
-            to bottom,
-            black 0px,
-            black 3px,
-            transparent 3px,
-            transparent 8px
-        ),
-        radial-gradient(ellipse 70% 60% at 50% 0%, #000 60%, transparent 100%);
-
-    mask-composite: intersect;
-    -webkit-mask-composite: source-in;
+@layer components {
+    .bg-gractwo-index {
+        background-size: "100% 100%";
+        background-image:
+            radial-gradient(125% 125% at 50% 90%, #ffffff 40%, transparent 95%),
+            linear-gradient(to right, #ff637e 15%, #00d3f2 100%);
+        @variant dark {
+            background-image:
+                radial-gradient(
+                    125% 125% at 50% 90%,
+                    #1a1a1a 40%,
+                    transparent 95%
+                ),
+                linear-gradient(to right, #ad415377 15%, #3e8f9b77 85%);
+        }
+    }
 }
 
 .dashed-bottom-fade-grid {
diff --git a/web/notfound.html b/web/notfound.html
index fd20194..3bfbdfc 100644
--- a/web/notfound.html
+++ b/web/notfound.html
@@ -2,16 +2,20 @@
 {% block title %}gractwo.pl | Błąd 404{% endblock %} {% block pagecontent %}
 
 <div class="w-full h-full flex-1 flex justify-center items-center relative">
-    <div class="dashed-bottom-fade-grid w-full h-full z-10"></div>
+    <div
+        class="dashed-bottom-fade-grid w-full h-full z-10 dark:opacity-50"
+    ></div>
     <div class="sm:flex gap-2 z-20">
         <div class="[&>svg]:size-16 pl-2 sm:pl-0">
             {% include "gractwo.svg" %}
         </div>
         <div class="px-2">
-            <h1 class="font-bold text-2xl">Błąd 404</h1>
-            <p>
+            <h1 class="font-bold text-2xl dark:text-neutral-100">Błąd 404</h1>
+            <p class="dark:text-neutral-400">
                 Nie ma strony o podanym adresie.
-                <a class="text-gractwo-blu-dark hover:underline" href="/"
+                <a
+                    class="text-gractwo-blu-dark hover:underline dark:text-gractwo-blu"
+                    href="/"
                     >Wróć.</a
                 >
             </p>
diff --git a/web/statcard.html b/web/statcard.html
index 0449e38..f46245e 100644
--- a/web/statcard.html
+++ b/web/statcard.html
@@ -1,8 +1,10 @@
 {% macro statcard(number, description) %}
 <div
-    class="min-w-64 flex-1 p-4 bg-neutral-100 border border-neutral-300 shadow rounded"
+    class="min-w-64 flex-1 p-4 bg-neutral-100 dark:bg-neutral-800 border border-neutral-300 dark:border-neutral-600 shadow rounded"
 >
     <h1 class="font-bold text-2xl">{{ number }}</h1>
-    <p class="text-neutral-500 whitespace-nowrap">{{ description }}</p>
+    <p class="text-neutral-500 dark:text-neutral-400 whitespace-nowrap">
+        {{ description }}
+    </p>
 </div>
 {% endmacro %}
