diff --git a/ht_booking/assets/i18n/en/main.ftl b/ht_booking/assets/i18n/en/main.ftl
index 10da76d..3857787 100644
--- a/ht_booking/assets/i18n/en/main.ftl
+++ b/ht_booking/assets/i18n/en/main.ftl
@@ -45,3 +45,6 @@ court-remove = Remove
 court-delete-prompt = To remove this court and all its bookings, type its name below to confirm:
 court-delete-mismatch = The name you typed does not match the court name.
 court-delete-error = Court name did not match — nothing was removed.
+theme-system = System
+theme-light = Light
+theme-dark = Dark
diff --git a/ht_booking/assets/i18n/sk/main.ftl b/ht_booking/assets/i18n/sk/main.ftl
index 8b4989d..e53c99a 100644
--- a/ht_booking/assets/i18n/sk/main.ftl
+++ b/ht_booking/assets/i18n/sk/main.ftl
@@ -45,3 +45,6 @@ court-remove = Odstrániť
 court-delete-prompt = Ak chcete odstrániť tento kurt a všetky jeho rezervácie, na potvrdenie napíšte nižšie jeho názov:
 court-delete-mismatch = Zadaný názov sa nezhoduje s názvom kurtu.
 court-delete-error = Názov kurtu sa nezhodoval — nič sa neodstránilo.
+theme-system = Systém
+theme-light = Svetlý
+theme-dark = Tmavý
diff --git a/ht_booking/assets/views/admin/booking_form.html b/ht_booking/assets/views/admin/booking_form.html
index 52f0bac..77307a9 100644
--- a/ht_booking/assets/views/admin/booking_form.html
+++ b/ht_booking/assets/views/admin/booking_form.html
@@ -13,11 +13,11 @@
     <a href="/admin" class="btn btn-ghost btn-sm">« {{ t(key="back-to-calendar", lang=lang) }}</a>
   </div>
 
-  <div class="card border border-gray-200 bg-white shadow-sm">
+  <div class="card border border-base-300 bg-base-100 shadow-sm">
     <div class="card-body">
       <form method="post" action="{{ action }}" class="space-y-2">
         <input type="hidden" name="court_id" value="{{ court_id }}">
-        <div class="text-sm text-gray-600">
+        <div class="text-sm opacity-70">
           {{ t(key="court-label", lang=lang) }}: <strong>{{ court_name }}</strong>
         </div>
         <div class="form-control">
@@ -35,7 +35,7 @@
         <div class="form-control">
           <label class="label"><span class="label-text">{{ t(key="booking-color", lang=lang) }}</span></label>
           <input type="color" name="color" value="{{ color }}"
-            class="h-10 w-20 cursor-pointer rounded border border-gray-300">
+            class="h-10 w-20 cursor-pointer rounded border border-base-300">
         </div>
         <div class="form-control">
           <label class="label"><span class="label-text">{{ t(key="booking-name", lang=lang) }}</span></label>
diff --git a/ht_booking/assets/views/admin/courts.html b/ht_booking/assets/views/admin/courts.html
index 42e9ab7..7c4831f 100644
--- a/ht_booking/assets/views/admin/courts.html
+++ b/ht_booking/assets/views/admin/courts.html
@@ -14,7 +14,7 @@
 </div>
 {% endif %}
 
-<div class="mb-6 overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm">
+<div class="mb-6 overflow-x-auto rounded-lg border border-base-300 bg-base-100 shadow-sm">
   <table class="table">
     <thead>
       <tr>
@@ -49,7 +49,7 @@
   </table>
 </div>
 
-<div class="card max-w-md border border-gray-200 bg-white shadow-sm">
+<div class="card max-w-md border border-base-300 bg-base-100 shadow-sm">
   <div class="card-body">
     <h2 class="card-title text-base">{{ t(key="add-court", lang=lang) }}</h2>
     <form method="post" action="/admin/courts" class="space-y-2">
diff --git a/ht_booking/assets/views/admin/login.html b/ht_booking/assets/views/admin/login.html
index f068ce3..8746ba5 100644
--- a/ht_booking/assets/views/admin/login.html
+++ b/ht_booking/assets/views/admin/login.html
@@ -4,7 +4,7 @@
 
 {% block content %}
 <div class="mx-auto mt-8 max-w-sm">
-  <div class="card border border-gray-200 bg-white shadow-sm">
+  <div class="card border border-base-300 bg-base-100 shadow-sm">
     <div class="card-body">
       <h1 class="card-title">{{ t(key="login-title", lang=lang) }}</h1>
       {% if error %}
diff --git a/ht_booking/assets/views/base.html b/ht_booking/assets/views/base.html
index e1396f2..626bc14 100644
--- a/ht_booking/assets/views/base.html
+++ b/ht_booking/assets/views/base.html
@@ -4,6 +4,31 @@
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <script>
+    // Resolve and apply the saved theme before first paint to avoid a flash.
+    function applyTheme(t) {
+      var dark = t === 'dark'
+        || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches);
+      document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
+    }
+    function highlightTheme(t) {
+      document.querySelectorAll('#theme-switch [data-theme-opt]').forEach(function (b) {
+        b.classList.toggle('btn-neutral', b.getAttribute('data-theme-opt') === t);
+      });
+    }
+    function setTheme(t) {
+      localStorage.setItem('theme', t);
+      applyTheme(t);
+      highlightTheme(t);
+    }
+    applyTheme(localStorage.getItem('theme') || 'system');
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function () {
+      if ((localStorage.getItem('theme') || 'system') === 'system') applyTheme('system');
+    });
+    document.addEventListener('DOMContentLoaded', function () {
+      highlightTheme(localStorage.getItem('theme') || 'system');
+    });
+  </script>
   <title>{% block title %}{{ t(key="brand", lang=lang) }}{% endblock title %}</title>
   <link href="https://cdn.jsdelivr.net/npm/daisyui@4/dist/full.min.css" rel="stylesheet" type="text/css" />
   <script src="https://cdn.tailwindcss.com"></script>
@@ -14,8 +39,8 @@
   {% block head %}{% endblock head %}
 </head>
 
-<body class="min-h-screen bg-gray-50 font-sans antialiased">
-  <div class="navbar bg-white shadow-sm">
+<body class="min-h-screen bg-base-200 font-sans text-base-content antialiased">
+  <div class="navbar bg-base-100 shadow-sm">
     <div class="mx-auto flex w-full max-w-6xl flex-wrap items-center justify-between gap-2 px-4">
       <a href="/" class="text-lg font-bold">{{ t(key="brand", lang=lang) }}</a>
       <nav class="flex flex-wrap items-center gap-1">
@@ -35,6 +60,14 @@
           <button onclick="setLang('sk')"
             class="btn btn-xs join-item {% if lang == 'sk' %}btn-neutral{% endif %}">SK</button>
         </div>
+        <div class="join" id="theme-switch">
+          <button type="button" data-theme-opt="system" onclick="setTheme('system')"
+            class="btn btn-xs join-item">{{ t(key="theme-system", lang=lang) }}</button>
+          <button type="button" data-theme-opt="light" onclick="setTheme('light')"
+            class="btn btn-xs join-item">{{ t(key="theme-light", lang=lang) }}</button>
+          <button type="button" data-theme-opt="dark" onclick="setTheme('dark')"
+            class="btn btn-xs join-item">{{ t(key="theme-dark", lang=lang) }}</button>
+        </div>
       </nav>
     </div>
   </div>
diff --git a/ht_booking/assets/views/calendar/week.html b/ht_booking/assets/views/calendar/week.html
index 6261e93..0462d0e 100644
--- a/ht_booking/assets/views/calendar/week.html
+++ b/ht_booking/assets/views/calendar/week.html
@@ -9,7 +9,7 @@
   </h1>
   {% if has_courts %}
   <form method="get" action="{{ base_path }}" class="flex items-center gap-2">
-    <label class="text-sm font-medium text-gray-600">{{ t(key="court-label", lang=lang) }}</label>
+    <label class="text-sm font-medium opacity-70">{{ t(key="court-label", lang=lang) }}</label>
     <input type="hidden" name="week" value="{{ week }}">
     <select name="court" onchange="this.form.submit()" class="select select-bordered select-sm">
       {% for c in courts %}
@@ -30,18 +30,18 @@
     <a href="{{ base_path }}?court={{ court_id }}&week={{ next_week }}"
       class="btn btn-sm join-item">{{ t(key="next-week", lang=lang) }} »</a>
   </div>
-  <div class="text-sm font-medium text-gray-500">{{ court_name }} · {{ week_label }}</div>
+  <div class="text-sm font-medium opacity-60">{{ court_name }} · {{ week_label }}</div>
 </div>
 
-<div class="overflow-x-auto rounded-lg border border-gray-200 bg-white shadow-sm">
+<div class="overflow-x-auto rounded-lg border border-base-300 bg-base-100 shadow-sm">
   <table class="w-full border-collapse text-sm">
     <thead>
-      <tr class="bg-gray-100">
-        <th class="w-16 border border-gray-200 p-2"></th>
+      <tr class="bg-base-200">
+        <th class="w-16 border border-base-300 p-2"></th>
         {% for d in days %}
-        <th class="border border-gray-200 p-2 text-center">
+        <th class="border border-base-300 p-2 text-center">
           <div class="font-semibold">{{ t(key=d.key, lang=lang) }}</div>
-          <div class="text-xs font-normal text-gray-400">{{ d.num }}</div>
+          <div class="text-xs font-normal opacity-50">{{ d.num }}</div>
         </th>
         {% endfor %}
       </tr>
@@ -49,9 +49,9 @@
     <tbody>
       {% for row in rows %}
       <tr>
-        <td class="border border-gray-200 bg-gray-50 p-2 text-center font-medium text-gray-500">{{ row.hour_label }}</td>
+        <td class="border border-base-300 bg-base-200 p-2 text-center font-medium opacity-70">{{ row.hour_label }}</td>
         {% for cell in row.cells %}
-        <td class="h-14 border border-gray-200 p-1 align-top">
+        <td class="h-14 border border-base-300 p-1 align-top">
           {% if cell.booked %}
             {% if is_admin %}
           <a href="/admin/booking/{{ cell.booking_id }}"
@@ -64,9 +64,9 @@
           {% else %}
             {% if is_admin %}
           <a href="/admin/booking?court={{ court_id }}&date={{ cell.date }}&hour={{ cell.hour }}"
-            class="flex h-full items-center justify-center rounded text-lg text-gray-300 transition hover:bg-gray-100 hover:text-gray-500">+</a>
+            class="flex h-full items-center justify-center rounded text-lg opacity-30 transition hover:bg-base-200 hover:opacity-100">+</a>
             {% else %}
-          <div class="px-1 py-1 text-xs text-gray-300">{{ t(key="free", lang=lang) }}</div>
+          <div class="px-1 py-1 text-xs opacity-30">{{ t(key="free", lang=lang) }}</div>
             {% endif %}
           {% endif %}
         </td>
@@ -77,8 +77,8 @@
   </table>
 </div>
 {% else %}
-<div class="card border border-gray-200 bg-white shadow-sm">
-  <div class="card-body items-center text-center text-gray-500">{{ t(key="no-courts", lang=lang) }}</div>
+<div class="card border border-base-300 bg-base-100 shadow-sm">
+  <div class="card-body items-center text-center opacity-60">{{ t(key="no-courts", lang=lang) }}</div>
 </div>
 {% endif %}
 {% endblock content %}