From 7e688e9b398477d7a7fe62db9a2bb36dd06ec137 Mon Sep 17 00:00:00 2001
From: eth3lbert <eth3lbert+dev@gmail.com>
Date: Tue, 11 Mar 2025 18:35:54 +0800
Subject: [PATCH 1/2] loading-spinner: Adjust `--spinner-color` and
 `--spinner-bg-color` for color mode

---
 app/components/loading-spinner.module.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/components/loading-spinner.module.css b/app/components/loading-spinner.module.css
index 25207b434b0..e0a4f13141f 100644
--- a/app/components/loading-spinner.module.css
+++ b/app/components/loading-spinner.module.css
@@ -1,6 +1,6 @@
 .spinner {
-    --spinner-color: black;
-    --spinner-bg-color: rgba(0, 0, 0, .2);
+    --spinner-color: currentcolor;
+    --spinner-bg-color: var(--gray-border);
     --spinner-size: 16px;
 
     display: inline-block;

From 0e41e1a7add225fec07f62103c320508bcde3d3b Mon Sep 17 00:00:00 2001
From: eth3lbert <eth3lbert+dev@gmail.com>
Date: Tue, 11 Mar 2025 18:55:32 +0800
Subject: [PATCH 2/2] loading-spinner: Set spinner theme to light for certain
 buttons

Most spinners are either outside the button or inside a button whose
background changes accordingly with the color mode. However, there are
some buttons whose background color doesn't change with the color mode.
For those buttons that don't follow the color mode, we add a light theme
for them.
---
 app/components/follow-button.hbs          | 2 +-
 app/components/loading-spinner.hbs        | 2 +-
 app/components/loading-spinner.module.css | 4 ++++
 app/templates/index.hbs                   | 2 +-
 app/templates/settings/tokens/new.hbs     | 2 +-
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/components/follow-button.hbs b/app/components/follow-button.hbs
index cac0cb084f8..5dfa12612ab 100644
--- a/app/components/follow-button.hbs
+++ b/app/components/follow-button.hbs
@@ -11,7 +11,7 @@
   {{on "click" (perform this.toggleFollowTask)}}
 >
   {{#if (or this.followStateTask.isRunning this.toggleFollowTask.isRunning)}}
-    <LoadingSpinner data-test-spinner />
+    <LoadingSpinner @theme="light" data-test-spinner />
   {{else}}
     {{#if this.following}}
       Unfollow
diff --git a/app/components/loading-spinner.hbs b/app/components/loading-spinner.hbs
index df2a85cef0c..0e7464ab261 100644
--- a/app/components/loading-spinner.hbs
+++ b/app/components/loading-spinner.hbs
@@ -1,5 +1,5 @@
 <div
-  local-class="spinner"
+  local-class="spinner {{if (eq @theme 'light') 'light'}}"
   ...attributes
 >
   <span local-class="message">Loading…</span>
diff --git a/app/components/loading-spinner.module.css b/app/components/loading-spinner.module.css
index e0a4f13141f..e3b07de1af4 100644
--- a/app/components/loading-spinner.module.css
+++ b/app/components/loading-spinner.module.css
@@ -7,6 +7,10 @@
     height: var(--spinner-size);
     width: var(--spinner-size);
 
+    &.light {
+        --spinner-bg-color: rgba(0, 0, 0, .2);
+    }
+
     &:after {
         content: " ";
         display: block;
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index 2c0e2b3250a..5961f1f9901 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -51,7 +51,7 @@
   >
     Try Again
     {{#if this.dataTask.isRunning}}
-      <LoadingSpinner local-class="spinner" data-test-spinner />
+      <LoadingSpinner @theme="light" local-class="spinner" data-test-spinner />
     {{/if}}
   </button>
 {{else}}
diff --git a/app/templates/settings/tokens/new.hbs b/app/templates/settings/tokens/new.hbs
index c4e327a6082..a82194ad6d1 100644
--- a/app/templates/settings/tokens/new.hbs
+++ b/app/templates/settings/tokens/new.hbs
@@ -182,7 +182,7 @@
       Generate Token
 
       {{#if this.saveTokenTask.isRunning}}
-        <LoadingSpinner local-class="spinner" data-test-spinner />
+        <LoadingSpinner @theme="light" local-class="spinner" data-test-spinner />
       {{/if}}
     </button>