Add dark mode using Dark Reader

This commit is contained in:
Arsen Musayelyan 2021-12-09 19:23:03 -08:00
parent 1361c9d28b
commit 967bbd888b
8 changed files with 5337 additions and 21 deletions

2
.gitignore vendored
View File

@ -1,2 +1,2 @@
/static/
/static/ext/
/scope

View File

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

View File

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

View File

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

View File

@ -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;

View File

@ -6,6 +6,7 @@
name = "Scope"
baseURL = "http://localhost:8080"
sourceURL = "https://gitea.arsenm.dev/Arsen6331/scope"
theme = "dark"
[search]
engines = ["google", "ddg", "bing"]

5311
static/DarkReader-scope.css Normal file

File diff suppressed because it is too large Load Diff

View File

@ -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}}