diff --git a/files/templates/CHRISTMAS/header-tw.html b/files/templates/CHRISTMAS/header-tw.html
index b318fa3e06..75d9ed4986 100644
--- a/files/templates/CHRISTMAS/header-tw.html
+++ b/files/templates/CHRISTMAS/header-tw.html
@@ -127,8 +127,8 @@
   </div>
 
   <!-- Mobile menu, show/hide based on menu state. -->
-  <div class="offcanvas offcanvas-end bg-gray-200" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
-    <div class="relative flex w-full bg-gray-700 h-20 px-4 items-center">
+  <div class="offcanvas offcanvas-end bg-gray-200 dark:bg-gray-800" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
+    <div class="relative flex w-full bg-gray-700 dark:bg-gray-800 h-20 px-4 items-center">
       <a class="flex items-center" href="{{ '/' if v else '/logged_out'}}">
         <img class="block lg:hidden h-7 w-7 object-contain" src="/static/assets/images/Drama/headericon.webp?a=7" alt="logo">
         <img class="hidden lg:block h-7 w-7 object-contain" src="/static/assets/images/Drama/headericon.webp?a=7" alt="logo">
@@ -143,7 +143,7 @@
     <div class="offcanvas-body">
       <!-- Search box -->
       <form action="/search/posts/" method="get" class="relative mb-4">
-        <input placeholder="Search" class="block w-full rounded shadow-inner py-2 pl-2 pr-7 bg-white border border-gray-300 hover:border-gray-400 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" aria-label="Search" name="q" value="{{request.values.get('q', '')}}">
+        <input placeholder="Search" class="block w-full rounded shadow-inner py-2 pl-2 pr-7 bg-white dark:bg-white/[.06] border border-gray-300 dark:border-gray-900 hover:border-gray-400 focus:border-blue-300 focus:ring focus:ring-blue-200 focus:ring-opacity-50" aria-label="Search" name="q" value="{{request.values.get('q', '')}}">
         <i class="fas fa-search text-gray-400 absolute top-3 right-3"></i>
       </form>
       {% if v %}
@@ -153,12 +153,12 @@
         Create post
       </a>
       <!-- Meta links -->
-      <ul class="flex flex-col space-y-3 font-bold text-base text-gray-600">
+      <ul class="flex flex-col space-y-3 font-bold text-base text-gray-600 dark:text-gray-200">
         <li>
           <a class="inline-flex items-center" aria-current="page" href="/me">
             <img src="{{ v.profile_url }}" class="w-14 h-14 p-[3px] bg-white border border-gray-300 object-cover"/>
             <div class="pl-3">
-              <div class="text-base text-black leading-5">
+              <div class="text-base text-black dark:text-gray-100 leading-5">
                 {{ v.username }}
               </div>
               <div class="flex space-x-3 mt-1">
@@ -180,13 +180,13 @@
           </a>
         </li>
         <li>
-          <a class="text-gray-700 hover:text-gray-900" href="/@me">
+          <a class="text-gray-700 hover:text-gray-900 dark:text-gray-200 hover:text-gray-100" href="/@me">
             <i class="fas fa-user fa-fw mr-2"></i>
             My Profile
           </a>
         </li>
         <li>
-          <a class="text-gray-700 hover:text-gray-900" href="/notifications{% if v.notifications_count and v.notifications_count == v.post_notifications_count %}?posts=true{% endif %}">
+          <a class="text-gray-700 hover:text-gray-900 dark:text-gray-200 hover:text-gray-100" href="/notifications{% if v.notifications_count and v.notifications_count == v.post_notifications_count %}?posts=true{% endif %}">
             <i class="fas fa-envelope fa-fw mr-2"></i>
             Inbox
             {% if v.notifications_count %}
@@ -195,18 +195,18 @@
           </a>
         </li>
         <li>
-          <a class="text-gray-700 hover:text-gray-900" href="/settings">
+          <a class="text-gray-700 hover:text-gray-900 dark:text-gray-200 hover:text-gray-100" href="/settings">
             <i class="fas fa-cog fa-fw mr-2"></i>
             Settings
           </a>
         </li>
         <li>
-          <button class="text-gray-700 hover:text-gray-900 font-bold" data-bs-toggle="modal" data-bs-target="#themePickerModal">
+          <button class="text-gray-700 hover:text-gray-900 dark:text-gray-200 hover:text-gray-100 font-bold" data-bs-toggle="modal" data-bs-target="#themePickerModal">
             <i class="fas fa-paint-brush fa-fw mr-2"></i>
             Pick theme
           </button>
           <li>
-            <button class="text-gray-700 hover:text-gray-900 font-bold" onclick="post_toast('/logout', '1')">
+            <button class="text-gray-700 hover:text-gray-900 dark:text-gray-200 hover:text-gray-100 font-bold" onclick="post_toast('/logout', '1')">
               <i class="fas fa-power-off fa-fw mr-2"></i>
               Log out
             </button>