Add dark mode using Dark Reader

1 year ago · 967bbd888b
parent 1361c9d28b
commit 967bbd888b
8 changed files with 5337 additions and 21 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,2 @@
-/static/
+/static/ext/
 /scope
--- a/20
+++ b/20
@ -6,18 +6,18 @@ build:
 .PHONY: build

 static:
-	mkdir -p static
+	mkdir -p static/ext

-	wget https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css -O static/bulma.min.css
+	wget https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css -O static/ext/bulma.min.css

-	wget https://code.iconify.design/2/2.1.0/iconify.min.js -O static/iconify.min.js
+	wget https://code.iconify.design/2/2.1.0/iconify.min.js -O static/ext/iconify.min.js
 	
-	wget https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css -O static/katex.min.css
-	wget https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js -O static/katex.min.js
+	wget https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.css -O static/ext/katex.min.css
+	wget https://cdn.jsdelivr.net/npm/katex@0.15.1/dist/katex.min.js -O static/ext/katex.min.js

-	wget https://cdn.jsdelivr.net/npm/nerdamer@latest/nerdamer.core.js -O static/nerdamer.core.js
-	wget https://cdn.jsdelivr.net/npm/nerdamer@latest/Algebra.js -O static/Algebra.js
-	wget https://cdn.jsdelivr.net/npm/nerdamer@latest/Calculus.js -O static/Calculus.js
-	wget https://cdn.jsdelivr.net/npm/nerdamer@latest/Solve.js -O static/Solve.js
+	wget https://cdn.jsdelivr.net/npm/nerdamer@latest/nerdamer.core.js -O static/ext/nerdamer.core.js
+	wget https://cdn.jsdelivr.net/npm/nerdamer@latest/Algebra.js -O static/ext/Algebra.js
+	wget https://cdn.jsdelivr.net/npm/nerdamer@latest/Calculus.js -O static/ext/Calculus.js
+	wget https://cdn.jsdelivr.net/npm/nerdamer@latest/Solve.js -O static/ext/Solve.js

-	wget https://unpkg.com/function-plot/dist/function-plot.js -O static/function-plot.js
+	wget https://unpkg.com/function-plot/dist/function-plot.js -O static/ext/function-plot.js
--- a/README.md
+++ b/README.md
@ -93,4 +93,5 @@ This project uses many other projects. Those projects and the reasons for using
 - [Nerdamer](https://nerdamer.com/): Equation solver
 - [Function Plot](https://mauriciopoppe.github.io/function-plot/): Equation grapher
 - [Metaweather](https://www.metaweather.com/): Weather API
- [DuckDuckGo](https://duckduckgo.com/): Provides instant answers
+- [DuckDuckGo](https://duckduckgo.com/): Provides instant answers
+- [Dark Reader](https://darkreader.org/): Dark mode CSS
--- a/internal/cards/calc.go
+++ b/internal/cards/calc.go
@ -27,14 +27,14 @@ import (

 const calcExtraHead = `
 <!-- Import KaTeX for math rendering -->
-<link rel="stylesheet" href="/static/katex.min.css">
-<script defer src="/static/katex.min.js"></script>
+<link rel="stylesheet" href="/static/ext/katex.min.css">
+<script defer src="/static/ext/katex.min.js"></script>

 <!-- Import Nerdamer for equation evaluator -->
-<script src="/static/nerdamer.core.js"></script>
-<script src="/static/Algebra.js"></script>
-<script src="/static/Calculus.js"></script>
-<script src="/static/Solve.js"></script>`
+<script src="/static/ext/nerdamer.core.js"></script>
+<script src="/static/ext/Algebra.js"></script>
+<script src="/static/ext/Calculus.js"></script>
+<script src="/static/ext/Solve.js"></script>`

 const solveRenderScript = `
 <div id="calc-content" class="subtitle mx-2 my-0"></div>
--- a/internal/cards/plot.go
+++ b/internal/cards/plot.go
@ -25,7 +25,7 @@ import (
 )

 const plotExtraHead = `
-<script src="/static/function-plot.js"></script>
+<script src="/static/ext/function-plot.js"></script>
 <style>
 .top-right-legend {
 	display: none;
--- a/scope.toml
+++ b/scope.toml
@ -6,6 +6,7 @@
    name = "Scope"
    baseURL = "http://localhost:8080"
    sourceURL = "https://gitea.arsenm.dev/Arsen6331/scope"
+    theme = "dark"

 [search]
    engines = ["google", "ddg", "bing"]
--- a/static/DarkReader-scope.css
+++ b/static/DarkReader-scope.css
--- a/templates/base.html
+++ b/templates/base.html
@ -3,8 +3,11 @@
    <head>
        <title>{{template "page" .}} - {{.Config "site.name"}}</title>
        <link rel="search" type="application/opensearchdescription+xml" title='{{.Config "site.name"}}' href="/opensearch">
-        <link rel="stylesheet" href="/static/bulma.min.css">
-        <script async src="/static/iconify.min.js"></script>
+        <link rel="stylesheet" href="/static/ext/bulma.min.css">
+        <script async src="/static/ext/iconify.min.js"></script>
+        {{if .Config "site.theme" | ne "light"}}
+        <link rel="stylesheet" href="/static/DarkReader-scope.css">
+        {{end}}
        {{if .Card}}
        {{.Card.Head}}
        {{end}}