From 0e3b9cca2913b50f8d5f658f0a3f4759c864834d Mon Sep 17 00:00:00 2001
From: Wraith <54374743+wraith4081@users.noreply.github.com>
Date: Tue, 13 Jan 2026 23:28:12 +0300
Subject: [PATCH] fix(ui): add missing dark variant to styles.css (#2839)

## Description:

fix(ui): add missing dark variant to styles.css

Before:
<img width="549" height="77" alt="image"
src="https://github.com/user-attachments/assets/d7c2bf92-691b-473c-880a-da678eb792a3"
/>

After:
<img width="555" height="84" alt="image"
src="https://github.com/user-attachments/assets/a2c828db-7fea-409a-abdd-fefc0dc237f0"
/>


## 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

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

wraith4081

---------

Co-authored-by: Ryan <7389646+ryanbarlow97@users.noreply.github.com>
---
 src/client/FlagInput.ts | 3 +--
 src/client/styles.css   | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/client/FlagInput.ts b/src/client/FlagInput.ts
index 698e7260b..9bf17fce6 100644
--- a/src/client/FlagInput.ts
+++ b/src/client/FlagInput.ts
@@ -84,8 +84,7 @@ export class FlagInput extends LitElement {
     return html`
       <button
         id="flag-input"
-        class="flag-btn m-0 border-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 transition-all duration-200 hover:scale-105 bg-slate-900/80 hover:bg-slate-800/80 active:bg-slate-800/90 rounded-lg overflow-hidden"
-        style="padding: 0 !important;"
+        class="flag-btn p-0! m-0 border-0 w-full h-full flex cursor-pointer justify-center items-center focus:outline-none focus:ring-0 transition-all duration-200 hover:scale-105 bg-slate-900/80 hover:bg-slate-800/80 active:bg-slate-800/90 rounded-lg overflow-hidden"
         title=${buttonTitle}
         @click=${this.onInputClick}
       >
diff --git a/src/client/styles.css b/src/client/styles.css
index 699ed94e5..9873cd4f0 100644
--- a/src/client/styles.css
+++ b/src/client/styles.css
@@ -1,5 +1,6 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
 @custom-variant hover (&:hover);
 
 @theme {