fix auto theme

chrishrb · Dec 26, 2024 · cb46075 · cb46075
1 parent 5ce64fd
commit cb46075
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 27 deletions.
diff --git a/Makefile b/Makefile
@@ -1,4 +1,4 @@
-.PHONY: all format lint clean
+.PHONY: all run format emojiscraper build vendor test compile format lint clean
 
 # If the first argument is "run"...
 ifeq (run,$(firstword $(MAKECMDGOALS)))
@@ -11,7 +11,7 @@ endif
 GOCMD=go
 LDFLAGS="-s -w ${LDFLAGS_OPT}"
 
-all: build format lint ## Format, lint and build
+all: vendor build format lint ## Format, lint and build
 
 run: ## Run
 	go run -tags debug main.go $(RUN_ARGS)
@@ -22,6 +22,9 @@ emojiscraper: ## Run emojiscraper
 build: ## Build
 	go build -tags debug -o bin/go-grip main.go
 
+vendor: ## Vendor
+	go mod vendor
+
 test: ## Test
 	${GOCMD} test ./...
 

diff --git a/defaults/templates/layout.html b/defaults/templates/layout.html
@@ -1,28 +1,74 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
-<head>
-  <meta charset="utf-8">
-	<title>go-grip - markdown preview</title>
-  <link rel="icon" type="image/x-icon" href="/static/images/favicon.ico">
-  {{if eq .Theme "dark" }}
-  <link rel="stylesheet" href="/static/css/github-markdown-dark.css">
-  {{else if eq .Theme "light" }}
-  <link rel="stylesheet" href="/static/css/github-markdown-light.css">
-  {{else}}
-  <link rel="stylesheet" href="/static/css/github-markdown-auto.css">
-  {{end}}
-  <link rel="stylesheet" href="/static/css/github-print.css" media="print">
-</head>
-<body class="markdown-body">
-  <div class="container">
-    <div {{if .BoundingBox }} class="container-inner" {{end}}>
-      {{ .Content }}
+  <head>
+    <meta charset="utf-8" />
+    <title>go-grip - markdown preview</title>
+    <link rel="icon" type="image/x-icon" href="/static/images/favicon.ico" />
+    {{if eq .Theme "dark" }}
+    <link rel="stylesheet" href="/static/css/github-markdown-dark.css" />
+    {{else if eq .Theme "light" }}
+    <link rel="stylesheet" href="/static/css/github-markdown-light.css" />
+    {{else}}
+    <link
+      rel="stylesheet"
+      href="/static/css/github-markdown-light.css"
+      media="(prefers-color-scheme: light)"
+    />
+    <link
+      rel="stylesheet"
+      href="/static/css/github-markdown-dark.css"
+      media="(prefers-color-scheme: dark)"
+    />
+    {{end}}
+    <link rel="stylesheet" href="/static/css/github-print.css" media="print" />
+  </head>
+
+  <body class="markdown-body">
+    <div class="container">
+      <button
+        class="theme-toggle"
+        id="theme-toggle"
+        title="Toggles light & dark"
+        aria-label="auto"
+        aria-live="polite"
+      >
+        <svg
+          class="sun-and-moon"
+          aria-hidden="true"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+        >
+          <mask class="moon" id="moon-mask">
+            <rect x="0" y="0" width="100%" height="100%" fill="white" />
+            <circle cx="24" cy="10" r="6" fill="black" />
+          </mask>
+          <circle
+            class="sun"
+            cx="12"
+            cy="12"
+            r="6"
+            mask="url(#moon-mask)"
+            fill="currentColor"
+          />
+          <g class="sun-beams" stroke="currentColor">
+            <line x1="12" y1="1" x2="12" y2="3" />
+            <line x1="12" y1="21" x2="12" y2="23" />
+            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+            <line x1="1" y1="12" x2="3" y2="12" />
+            <line x1="21" y1="12" x2="23" y2="12" />
+            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+          </g>
+        </svg>
+      </button>
+      <div {{if .BoundingBox }} class="container-inner" {{end}}>
+        {{ .Content }}
+      </div>
     </div>
-  </div>
-  {{if .BoundingBox}}
-  <footer class="container footer">
-    Made with &hearts; by chrishrb
-  </footer>
-  {{end}}
-</body>
+    {{if .BoundingBox}}
+    <footer class="container footer">Made with &hearts; by chrishrb</footer>
+    {{end}}
+  </body>
 </html>