From 999fd9157cd6d56cc671bce94aad27a68060b05a Mon Sep 17 00:00:00 2001
From: Manan Lalwani <me@mananlalwani.com>
Date: Sat, 2 Aug 2025 00:50:10 -0500
Subject: [PATCH] Enhance dark mode support (#1682)

## Description:

Improved dark mode styling for #1681

Old:

<img width="536" height="565" alt="image"
src="https://github.com/user-attachments/assets/8b7b5cc5-aa74-4e9b-a814-635c4373d5ab"
/>

New Look:
<img width="766" height="925" alt="image"
src="https://github.com/user-attachments/assets/acd00f2b-7248-4b63-b5c4-a345195d4414"
/>

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I have read and accepted the CLA agreement (only required once).

## Please put your Discord username so you can be contacted if a bug or
regression is found:

DISCORD_USERNAME
totalfailure
---
 src/client/LangSelector.ts              |   2 +-
 src/client/LanguageModal.ts             | 162 ++++++------------------
 src/client/components/NewsButton.ts     |   2 +-
 src/client/styles/components/button.css |  27 ++++
 src/client/styles/core/variables.css    |   7 +
 5 files changed, 76 insertions(+), 124 deletions(-)

diff --git a/src/client/LangSelector.ts b/src/client/LangSelector.ts
index ee534625f..03e141ac7 100644
--- a/src/client/LangSelector.ts
+++ b/src/client/LangSelector.ts
@@ -292,7 +292,7 @@ export class LangSelector extends LitElement {
         <button
           id="lang-selector"
           @click=${this.openModal}
-          class="text-center appearance-none w-full bg-blue-100 hover:bg-blue-200 text-blue-900 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md border-none cursor-pointer transition-colors duration-300 flex items-center gap-2 justify-center"
+          class="text-center appearance-none w-full bg-blue-100 dark:bg-gray-700 hover:bg-blue-200 dark:hover:bg-gray-600 text-blue-900 dark:text-gray-100 p-3 sm:p-4 lg:p-5 font-medium text-sm sm:text-base lg:text-lg rounded-md border-none cursor-pointer transition-colors duration-300 flex items-center gap-2 justify-center"
         >
           <img
             id="lang-flag"
diff --git a/src/client/LanguageModal.ts b/src/client/LanguageModal.ts
index 6cd95224f..b75173e16 100644
--- a/src/client/LanguageModal.ts
+++ b/src/client/LanguageModal.ts
@@ -1,4 +1,4 @@
-import { LitElement, css, html } from "lit";
+import { LitElement, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 import { translateText } from "../client/Utils";
 
@@ -8,117 +8,9 @@ export class LanguageModal extends LitElement {
   @property({ type: Array }) languageList: any[] = [];
   @property({ type: String }) currentLang = "en";
 
-  static styles = css`
-    .c-modal {
-      position: fixed;
-      padding: 1rem;
-      z-index: 1000;
-      left: 0;
-      bottom: 0;
-      right: 0;
-      top: 0;
-      background-color: rgba(0, 0, 0, 0.5);
-      overflow-y: auto;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .c-modal__wrapper {
-      background: #23232382;
-      border-radius: 8px;
-      min-width: 340px;
-      max-width: 480px;
-      width: 100%;
-    }
-
-    .c-modal__header {
-      position: relative;
-      border-top-left-radius: 4px;
-      border-top-right-radius: 4px;
-      font-size: 18px;
-      background: #000000a1;
-      text-align: center;
-      color: #fff;
-      padding: 1rem 2.4rem 1rem 1.4rem;
-    }
-
-    .c-modal__close {
-      cursor: pointer;
-      position: absolute;
-      right: 1rem;
-      top: 1rem;
-      font-weight: bold;
-    }
-
-    .c-modal__content {
-      position: relative;
-      color: #fff;
-      padding: 1.4rem;
-      max-height: 60dvh;
-      overflow-y: auto;
-      backdrop-filter: blur(8px);
-    }
-
-    .lang-button {
-      width: 100%;
-      display: flex;
-      align-items: center;
-      gap: 0.5rem;
-      padding: 0.5rem 1rem;
-      margin-bottom: 0.5rem;
-      border-radius: 0.375rem;
-      transition: background-color 0.3s;
-      border: 1px solid #aaa;
-      background-color: #505050;
-      color: #fff;
-    }
-
-    .lang-button:hover {
-      background-color: #969696;
-    }
-
-    .lang-button.active {
-      background-color: #aaaaaa;
-      border-color: #bbb;
-      color: #000;
-    }
-
-    .flag-icon {
-      width: 24px;
-      height: 16px;
-      object-fit: contain;
-    }
-
-    @keyframes rainbow {
-      0% {
-        background-color: #990033;
-      }
-      20% {
-        background-color: #996600;
-      }
-      40% {
-        background-color: #336600;
-      }
-      60% {
-        background-color: #008080;
-      }
-      80% {
-        background-color: #1c3f99;
-      }
-      100% {
-        background-color: #5e0099;
-      }
-    }
-
-    .lang-button.debug {
-      animation: rainbow 10s infinite;
-      font-weight: bold;
-      color: #fff;
-      border: 2px dashed aqua;
-      box-shadow: 0 0 4px aqua;
-    }
-  `;
+  createRenderRoot() {
+    return this; // Use Light DOM for TailwindCSS classes
+  }
 
   private close = () => {
     this.dispatchEvent(
@@ -158,27 +50,53 @@ export class LanguageModal extends LitElement {
     if (!this.visible) return null;
 
     return html`
-      <aside class="c-modal">
-        <div class="c-modal__wrapper">
-          <header class="c-modal__header">
+      <aside
+        class="fixed p-4 z-[1000] inset-0 bg-black/50 overflow-y-auto flex items-center justify-center"
+      >
+        <div
+          class="bg-gray-800/80 dark:bg-gray-900/90 backdrop-blur-md rounded-lg min-w-[340px] max-w-[480px] w-full"
+        >
+          <header
+            class="relative rounded-t-md text-lg bg-black/60 dark:bg-black/80 text-center text-white px-6 py-4 pr-10"
+          >
             ${translateText("select_lang.title")}
-            <div class="c-modal__close" @click=${this.close}>✕</div>
+            <div
+              class="cursor-pointer absolute right-4 top-4 font-bold hover:text-gray-300"
+              @click=${this.close}
+            >
+              ✕
+            </div>
           </header>
 
-          <section class="c-modal__content">
+          <section
+            class="relative text-white dark:text-gray-100 p-6 max-h-[60dvh] overflow-y-auto"
+          >
             ${this.languageList.map((lang) => {
               const isActive = this.currentLang === lang.code;
+              const isDebug = lang.code === "debug";
+
+              let buttonClasses =
+                "w-full flex items-center gap-2 p-2 mb-2 rounded-md transition-colors duration-300 border";
+
+              if (isDebug) {
+                buttonClasses +=
+                  " animate-pulse font-bold text-white border-2 border-dashed border-cyan-400 shadow-lg shadow-cyan-400/25 bg-gradient-to-r from-red-600 via-yellow-600 via-green-600 via-blue-600 to-purple-600";
+              } else if (isActive) {
+                buttonClasses +=
+                  " bg-gray-400 dark:bg-gray-500 border-gray-300 dark:border-gray-400 text-black dark:text-white";
+              } else {
+                buttonClasses +=
+                  " bg-gray-600 dark:bg-gray-700 border-gray-500 dark:border-gray-600 text-white dark:text-gray-100 hover:bg-gray-500 dark:hover:bg-gray-600";
+              }
+
               return html`
                 <button
-                  class="lang-button ${isActive ? "active" : ""} ${lang.code ===
-                  "debug"
-                    ? "debug"
-                    : ""}"
+                  class="${buttonClasses}"
                   @click=${() => this.selectLanguage(lang.code)}
                 >
                   <img
                     src="/flags/${lang.svg}.svg"
-                    class="flag-icon"
+                    class="w-6 h-4 object-contain"
                     alt="${lang.code}"
                   />
                   <span>${lang.native} (${lang.en})</span>
diff --git a/src/client/components/NewsButton.ts b/src/client/components/NewsButton.ts
index 86fb28a86..c1c4d22d5 100644
--- a/src/client/components/NewsButton.ts
+++ b/src/client/components/NewsButton.ts
@@ -48,7 +48,7 @@ export class NewsButton extends LitElement {
           @click=${this.handleClick}
         >
           <img
-            class="size-[48px]"
+            class="size-[48px] dark:invert"
             src="${megaphone}"
             alt=${translateText("news.title")}
           />
diff --git a/src/client/styles/components/button.css b/src/client/styles/components/button.css
index 3080f606f..b6d59ea80 100644
--- a/src/client/styles/components/button.css
+++ b/src/client/styles/components/button.css
@@ -55,3 +55,30 @@
     margin: 0 auto;
   }
 }
+
+.dark .c-button {
+  background: var(--primaryColorDark);
+  color: var(--fontColorLight);
+}
+
+.dark .c-button:hover,
+.dark .c-button:active,
+.dark .c-button:focus {
+  background: var(--primaryColorHoverDark);
+}
+
+.dark .c-button:disabled {
+  background: var(--primaryColorDisabledDark);
+  opacity: 0.7;
+}
+
+.dark .c-button--secondary {
+  background: var(--secondaryColorDark);
+  color: var(--fontColorDark);
+}
+
+.dark .c-button--secondary:hover,
+.dark .c-button--secondary:active,
+.dark .c-button--secondary:focus {
+  background: var(--secondaryColorHoverDark);
+}
diff --git a/src/client/styles/core/variables.css b/src/client/styles/core/variables.css
index 533b39cb8..bb1b48fd0 100644
--- a/src/client/styles/core/variables.css
+++ b/src/client/styles/core/variables.css
@@ -16,4 +16,11 @@
   --secondaryColor: #dbeafe;
   --secondaryColorHover: #bfdbfe;
   --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+
+  --primaryColorDark: #3b82f6;
+  --primaryColorHoverDark: #2563eb;
+  --primaryColorDisabledDark: #4b5563;
+  --secondaryColorDark: #374151;
+  --secondaryColorHoverDark: #4b5563;
+  --fontColorDark: #f3f4f6;
 }