feat: image loading and theme icon on homepage, fix view button color var

public/globals.css

@@ -32,4 +32,18 @@ html {
     padding: 0;
     width: 100vw;
     height: 100vh;
-}
+}
+
+.icon {
+    width: 2rem;
+    min-width: 2rem;
+    height: 2rem;
+    min-height: 2rem;
+    cursor: pointer;
+}
+
+.icon img {
+    background: white;
+    border-radius: 50%;
+    padding: .25rem;
+}

public/home.css

@@ -52,7 +52,7 @@ body {
     border: 2px solid transparent;
     border-radius: 3px;
 
-    background-color: var(-input-bg);
+    background-color: var(--input-bg);
 
     color: var(--text-color);
 
@@ -79,6 +79,8 @@ body {
 
 .options {
     margin-top: 1rem;
+    display: flex;
+    gap: .5rem;
 }
 
 .title {

public/icons/image.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+  <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909m-18 3.75h16.5a1.5 1.5 0 001.5-1.5V6a1.5 1.5 0 00-1.5-1.5H3.75A1.5 1.5 0 002.25 6v12a1.5 1.5 0 001.5 1.5zm10.5-11.25h.008v.008h-.008V8.25zm.375 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
+</svg>

public/question.css

@@ -29,20 +29,6 @@ body {
     justify-content: space-between;
 }
 
-.icon {
-    width: 2rem;
-    min-width: 2rem;
-    height: 2rem;
-    min-height: 2rem;
-    cursor: pointer;
-}
-
-.icon img {
-    background: white;
-    border-radius: 50%;
-    padding: .25rem;
-}
-
 code {
     background-color: var(--code-bg);
     padding: .15rem;

templates/home.html

@@ -51,9 +51,17 @@
                 </div>
             </form>
             <div class="options">
-                <a class="toggle" href="/options/images"
+                <div class="icon">
-                    >Toggle Image Loading</a
+                    <a href="/options/images">
-                >
+                        <img src="/static/icons/image.svg" alt="Toggle theme" />
+                    </a>
+                </div>
+                <div class="icon">
+                    <a href="/options/theme?redirect_url={{ .currentUrl }}">
+                        <img src="/static/icons/{{ if eq .theme "dark" }}sun{{
+                        else }}moon{{ end }}.svg" alt="Toggle theme" />
+                    </a>
+                </div>
             </div>
             <p class="footer">
                 Brought to you by