.gitea/workflows/build.yml

@@ -1,30 +0,0 @@
-name: Build and publish the docker image
-
-on:
-  push:
-    branches: ["custom"]
-
-env:
-  REGISTRY: git.ngn.tf
-  IMAGE: ${{gitea.repository}}
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout repository
-        uses: "https://github.com/actions/checkout@v4"
-
-      - name: Login to container repo
-        uses: "https://github.com/docker/login-action@v1"
-        with:
-          registry: ${{env.REGISTRY}}
-          username: ${{gitea.actor}}
-          password: ${{secrets.PACKAGES_TOKEN}}
-
-      - name: Build image
-        run: |
-          hash=${{gitea.sha}}
-          docker build . --tag ${{env.REGISTRY}}/${{env.IMAGE}}:latest --tag ${{env.REGISTRY}}/${{env.IMAGE}}:${hash::7}
-          docker push ${{env.REGISTRY}}/${{env.IMAGE}}:${hash::7}
-          docker push ${{env.REGISTRY}}/${{env.IMAGE}}:latest

.github/dependabot.yml

@@ -0,0 +1,21 @@
+version: 2
+updates:
+  # Maintain dependencies for GitHub Actions
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+    groups:
+      all:
+        patterns:
+          - "*"
+
+  # Maintain dependencies for Golang
+  - package-ecosystem: "gomod"
+    directory: "/"
+    schedule:
+      interval: "monthly"
+    groups:
+      all:
+        patterns:
+          - "*"

.github/workflows/image.yml

@@ -0,0 +1,86 @@
+name: Build and publish container images
+
+on:
+  push: { branches: [ main ] }
+
+permissions:
+  packages: write
+
+jobs:
+  build:
+    if: ${{ startsWith(github.event.head_commit.message, 'feat:') || startsWith(github.event.head_commit.message, 'fix:') }}
+    runs-on: ubuntu-20.04
+    outputs:
+      commit: ${{ steps.metadata.outputs.commit }}
+    strategy:
+      matrix:
+        architecture: [ amd64, arm64v8 ]
+        include: 
+          - architecture: amd64
+            platform: linux/amd64
+          - architecture: arm64v8
+            platform: linux/arm64
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Obtain project metadata 
+        id: metadata
+        run: echo "commit=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
+
+      - name: Setup Docker Buildx
+        uses: docker/setup-buildx-action@v3
+  
+      - name: Setup QEMU
+        uses: docker/setup-qemu-action@v3
+
+      - name: Login to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Generate image metadata
+        uses: docker/metadata-action@v5
+        id: image-metadata
+        with:
+          images: ghcr.io/${{ github.repository }}
+          tags: |
+            type=raw,value=${{ matrix.architecture }}-${{ steps.metadata.outputs.commit }},enable={{is_default_branch}}
+            type=raw,value=${{ matrix.architecture }},enable={{is_default_branch}}
+
+      - name: Build and push platform specific images
+        uses: docker/build-push-action@v6
+        with:
+          push: true
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+          platforms: ${{ matrix.platform }}
+          tags: ${{ steps.image-metadata.outputs.tags }}
+          build-args: |
+            BUILDKIT_CONTEXT_KEEP_GIT_DIR=true
+
+  merge:
+    runs-on: ubuntu-20.04
+    needs: [ build ]
+    env:
+      IMAGE: ghcr.io/${{ github.repository }}
+      COMMIT: ${{ needs.build.outputs.commit }}
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Log in to GitHub Container Registry
+        uses: docker/login-action@v3
+        with:
+          registry: ghcr.io
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Generate manifest for multi-arch images from source manifests
+        run: |
+          docker buildx imagetools create \
+            --tag ${IMAGE}:${COMMIT} ${IMAGE}:{amd64,arm64v8}-${COMMIT}
+          docker buildx imagetools create \
+            --tag ${IMAGE}:latest ${IMAGE}:{amd64,arm64v8}

.github/workflows/linter.yml

@@ -0,0 +1,26 @@
+name: linter
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+permissions:
+  contents: read
+
+jobs:
+  golangci:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-go@v5
+        with:
+          go-version-file: go.mod
+      - run: go install github.com/a-h/templ/cmd/templ@latest
+      - run: make build
+      - name: golangci-lint
+        uses: golangci/golangci-lint-action@v6.1.0
+        with:
+          version: latest
+          only-new-issues: true

.github/workflows/test.yml

@@ -0,0 +1,17 @@
+name: Test and Build
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+       - uses: actions/checkout@v4
+       - uses: actions/setup-go@v5
+         with:
+           go-version-file: go.mod
+       - run: go install github.com/a-h/templ/cmd/templ@latest
+       - run: make build
+         #- run: make test

Dockerfile

@@ -1,16 +1,29 @@
-FROM golang:1.23.4 AS build
+FROM docker.io/golang:1.22.2-alpine3.19 AS build
 
-RUN go install github.com/a-h/templ/cmd/templ@latest
+RUN apk add make git curl
 
 WORKDIR /code
-COPY go.mod ./
-COPY go.sum ./
 
+COPY go.mod go.sum ./
 RUN go mod download
-RUN make CGO_ENABLED=0
 
-FROM alpine:3.21
+COPY . .
+COPY .git .
+RUN make build
+
+###############################################################
+
+FROM scratch
+
+LABEL org.opencontainers.image.source="https://github.com/rramiachraf/dumb"
+LABEL org.opencontainers.image.url="https://github.com/rramiachraf/dumb"
+LABEL org.opencontainers.image.licenses="MIT"
+LABEL org.opencontainers.image.description="Private alternative front-end for Genius."
 
 COPY --from=build /code/dumb .
+COPY --from=build /etc/ssl/certs/ca-certificates.crt /etc/ssl/certs/
+
+EXPOSE 5555/tcp
 
 CMD ["./dumb"]
+

Makefile

@@ -1,15 +1,14 @@
-CGO_ENABLED=1
+VERSION=`git rev-parse --short HEAD`
 
-all:
+gentempl:
+	command -v templ &> /dev/null || go install github.com/a-h/templ/cmd/templ@latest
+esbuild:
+	[ ! -f ./esbuild ] && curl -fsSL https://esbuild.github.io/dl/latest | sh
+build:gentempl esbuild
 	templ generate
-	cat ./style/*.css > ./static/style.css
+	cat ./style/*.css | ./esbuild --loader=css --minify > ./static/style.css 
-	CGO_ENABLED=$(CGO_ENABLED) go build
+	go build -ldflags="-X 'github.com/rramiachraf/dumb/data.Version=$(VERSION)' -s -w"
-
 test:
 	go test ./... -v
-
+fmt:
-format:
-	gofmt -s -w .
 	templ fmt .
-
-.PHONY: test format

README.md

@@ -1,5 +1,51 @@
-# [ngn.tf] | dumb
+# dumb
+With the massive daily increase of useless scripts on Genius's web frontend, and having to download megabytes of clutter, [dumb](https://github.com/rramiachraf/dumb) tries to make reading lyrics from Genius a pleasant experience, and as lightweight as possible.
 
-![](https://git.ngn.tf/ngn/dumb/actions/workflows/build.yml/badge.svg)
+<a href="https://codeberg.org/rramiachraf/dumb"><img src="https://img.shields.io/badge/Codeberg-%232185d0" /></a>
+
+![Screenshot](https://raw.githubusercontent.com/rramiachraf/dumb/main/screenshot.png)
+
+## Installation & Usage
+### Docker
+```bash
+docker run -p 8080:5555 --name dumb ghcr.io/rramiachraf/dumb:latest
+```
+
+### Build from source
+[Go 1.22+](https://go.dev/dl) is required.
+```bash
+git clone https://github.com/rramiachraf/dumb
+cd dumb
+make build
+./dumb
+```
+
+#### Notes:
+- The default port is 5555, you can use other ports by setting the `PORT` environment variable.
+- Genius servers are behind a Cloudflare reverse proxy, which means certain IPs won't be able to send requests, to partially mitigate this, you can specify a proxy by setting the `PROXY` variable (must be a valid URI).
+
+## Public Instances
+| URL | Tor | I2P | Region | CDN? | Operator |
+| --- | :----: | :----: | :----: | :----: | --- |
+| <https://dumb.ducks.party> | No | No | NL | No | https://ducks.party |
+| <https://dumb.privacydev.net> | [Yes](http://dumb.g4c3eya4clenolymqbpgwz3q3tawoxw56yhzk4vugqrl6dtu3ejvhjid.onion) | No | FR | No | https://privacydev.net |
+| <https://dumb.hyperreal.coffee> | No | No | US | No | https://hyperreal.coffee |
+| <https://dm.vern.cc> | [Yes](http://dm.vernccvbvyi5qhfzyqengccj7lkove6bjot2xhh5kajhwvidqafczrad.onion) | [Yes](http://vernxpcpqi2y4uhu7to4rnjmyjjgzh3x3qxyzpmkhykefchkmleq.b32.i2p) | US | No | https://vern.cc |
+| <https://dumb.lunar.icu> | No | No | DE | Yes | @MaximilianGT500 |
+| <https://dumb.privacyfucking.rocks> | No | No | DE | - | https://privacyfucking.rocks |
+| <https://sing.whatever.social> | No | No | US/DE | Yes | Whatever Social |
+| <https://dumb.bloat.cat> | No | No | DE | No | https://bloat.cat |
+| <https://dumb.gitro.xyz> | No | No | DE | No | https://gitro.xyz |
+
+[Status Page](https://github.com/rramiachraf/dumb-instances)
+
+#### Notes:
+- Instances list in JSON format can be found in [instances.json](instances.json) file.
+- For people who might be capable and interested in hosting a public instance feel free to do so, and don't forget to open a pull request, so your instance can be included here.
+
+## Contributing
+Contributions are welcome.
+
+## License
+[MIT](https://github.com/rramiachraf/dumb/blob/main/LICENCE)
 
-A fork of the [dumb](https://github.com/rramiachraf/dumb) project, with my personal changes.

data/data.go

@@ -0,0 +1,3 @@
+package data
+
+var Version = "DEVELOPMENT"

data/proxy.go

@@ -13,3 +13,4 @@ func ExtractImageURL(image string) string {
 
 	return fmt.Sprintf("/images%s", u.Path)
 }
+

instances.json

@@ -0,0 +1,55 @@
+[
+	{
+		"clearnet": "https://dm.vern.cc/",
+		"tor": "http://dm.vernccvbvyi5qhfzyqengccj7lkove6bjot2xhh5kajhwvidqafczrad.onion/",
+		"i2p": "http://vernxpcpqi2y4uhu7to4rnjmyjjgzh3x3qxyzpmkhykefchkmleq.b32.i2p/",
+		"country": "US",
+		"cdn": false
+	},
+	{
+		"clearnet": "https://sing.whatever.social/",
+		"country": "US/DE",
+		"cdn": true
+	},
+	{
+		"clearnet": "https://dumb.lunar.icu/",
+		"country": "DE",
+		"cdn": true
+	},
+	{
+		"clearnet": "https://dumb.privacydev.net/",
+		"tor": "http://dumb.g4c3eya4clenolymqbpgwz3q3tawoxw56yhzk4vugqrl6dtu3ejvhjid.onion/",
+		"country": "FR",
+		"cdn": false
+	},
+	{
+		"clearnet": "https://dumb.ducks.party/",
+		"country": "NL",
+		"cdn": false
+	},
+	{
+		"clearnet": "https://dumb.privacyfucking.rocks/",
+		"country": "DE",
+		"cdn": false
+	},
+	{
+		"clearnet": "https://dumb.hyperreal.coffee/",
+		"country": "DE",
+		"cdn": true
+	},
+	{
+		"clearnet": "https://dumb.bloat.cat/",
+		"country": "DE",
+		"cdn": false
+	},
+	{
+		"clearnet": "https://dumb.gitro.xyz/",
+		"country": "DE",
+		"cdn": false
+	},
+	{
+		"clearnet": "https://dumb.jeikobu.net/",
+		"country": "DE",
+		"cdn": false
+	}
+]

static/script.js

@@ -75,3 +75,35 @@ function getAnnotation(e) {
 		}
 	};
 }
+
+window._currentTheme = localStorage.getItem("_theme") || "light";
+setTheme(window._currentTheme);
+
+const themeChooser = document.getElementById("choose-theme");
+themeChooser.addEventListener("click", function () {
+	if (window._currentTheme === "dark") {
+		setTheme("light");
+	} else {
+		setTheme("dark");
+	}
+});
+
+function setTheme(theme) {
+	const toggler = document.getElementById(
+		"ic_fluent_dark_theme_24_regular"
+	);
+	switch (theme) {
+		case "dark":
+			toggler.setAttribute("fill", "#fff");
+			localStorage.setItem("_theme", "dark");
+			document.body.classList.add("dark");
+			window._currentTheme = "dark";
+			return;
+		case "light":
+			toggler.setAttribute("fill", "#181d31");
+			localStorage.setItem("_theme", "light");
+			document.body.classList.remove("dark");
+			window._currentTheme = "light";
+			return;
+	}
+}

style/album.css

@@ -22,12 +22,20 @@
 }
 
 #album-single-track p {
-	color: #ddd;
+	color: #181d31;
 	font-weight: 500;
 }
 
+.dark #album-single-track p {
+	color: #ddd;
+}
+
 #album-single-track small {
 	font-size: 1.5rem;
+	color: #333;
+}
+
+.dark #album-single-track small {
 	color: #ccc;
 }
 

style/annotation.css

@@ -8,9 +8,9 @@
 blockquote {
 	padding: 1rem;
 	border-radius: 4px;
-	background-color: #272d44;
+	background: #eee;
-	color: inherit;
 	border: 1px solid #ddd;
+	color: #222;
 	margin: 1rem 0;
 }
 
@@ -37,3 +37,9 @@ blockquote ul {
 	color: #be3144;
 	margin-bottom: 1rem;
 }
+
+.dark .annotation,
+.dark blockquote {
+	background-color: #272d44;
+	color: inherit;
+}

style/article.css

@@ -8,11 +8,7 @@
 
 #article-body {
 	line-height: 1.75;
-	color: #eee;
+	color: #171717;
-}
-
-#article-title {
-	color: #eee;
 }
 
 #article-subtitle {
@@ -26,19 +22,39 @@
 	border-radius: 5px;
 	object-fit: contain;
 	object-position: center;
-	background-color: #151515;
+	background-color: #f7f7f7;
-	border: 1px solid #2f2f2f;
+	border: 1px solid #e4e4e4;
 }
 
 #metadata,
 #article-subtitle,
-#article-date,
+#article-date {
-#article-authors {
+	color: #333;
-	color: #ccc;
 }
 
 #article-authors {
+	color: #1e1e1e;
 	display: flex;
 	flex-direction: column;
 	gap: 0.5rem;
 }
+
+.dark #article-image {
+	background-color: #151515;
+	border: 1px solid #2f2f2f;
+}
+
+.dark #metadata,
+.dark #article-subtitle,
+.dark #article-date,
+.dark #article-authors {
+	color: #ccc;
+}
+
+.dark #article-title {
+	color: #eee;
+}
+
+.dark #article-body {
+	color: #eee;
+}

style/artist.css

@@ -30,7 +30,7 @@
 	text-align: center;
 }
 
-#artist-albumlist p {
+.dark #artist-albumlist p {
 	color: #ddd;
 }
 
@@ -39,11 +39,15 @@
 	color: #333;
 }
 
-#artist-albumlist small {
+.dark #artist-albumlist small {
 	color: #ccc;
 }
 
-.#metadata p {
+#metadata p {
+	color: #171717;
+}
+
+.dark #metadata p {
 	color: #ddd;
 }
 
@@ -60,5 +64,9 @@
 }
 
 #artist-section h2 {
+	font-size: 2rem;
+}
+
+.dark #artist-section h2 {
 	color: #ddd;
 }

style/error.css

@@ -10,12 +10,20 @@
 
 #error h1 {
 	font-size: 5rem;
-	color: #eee;
+	color: #111;
 }
 
 #error p {
 	text-transform: uppercase;
 	font-size: 1.6rem;
-	color: #ddd;
+	color: #222;
 	text-align: center;
 }
+
+.dark #error h1 {
+	color: #eee;
+}
+
+.dark #error p {
+	color: #ddd;
+}

style/footer.css

@@ -1,14 +1,14 @@
 footer {
-  background: #000;
+	background-color: #ffcd38;
-  border-top: solid 1px #fff;
 	padding: 1rem 0;
 }
 
 footer a {
-  color: #fff;
 	font-weight: 500;
+	color: #1b1a17;
 	transition: 0.3s ease text-decoration;
 	font-size: 1.4rem;
+	text-transform: uppercase;
 }
 
 footer a:hover {
@@ -18,12 +18,21 @@ footer a:hover {
 #footer-container {
 	width: 1024px;
 	display: flex;
-  justify-content: center;
+	justify-content: space-between;
 	align-items: center;
 	margin: 0 auto;
+}
+
+#footer-links {
+	display: flex;
 	gap: 1rem;
 }
 
+#version {
+	font-size: 1.3rem;
+	color: #1b1b1b;
+}
+
 @media screen and (max-width: 1080px) {
 	#footer-container {
 		width: 100%;
@@ -31,3 +40,7 @@ footer a:hover {
 		box-sizing: border-box;
 	}
 }
+
+.dark footer {
+	background-color: #fec260;
+}

style/home.css

@@ -14,11 +14,11 @@
 #home h1 {
 	font-weight: 600;
 	font-size: 2.2rem;
-	color: #eee;
+	color: #222;
 }
 
 #home p {
-	color: #ddd;
+	color: #333;
 }
 
 #home code {
@@ -34,6 +34,17 @@
 	box-sizing: border-box;
 	border-radius: 5px;
 	border: 1px solid #ddd;
-	background-color: #ddd;
 	color: #222;
 }
+
+.dark #home h1 {
+	color: #eee;
+}
+
+.dark #home p {
+	color: #ddd;
+}
+
+.dark #search-input {
+	background-color: #ddd;
+}

style/lyrics.css

@@ -1,19 +1,19 @@
 #lyrics {
+	color: #171717;
 	line-height: 2.5rem;
 	flex-basis: 0;
 	flex-shrink: 0;
 	flex-grow: 1;
-	color: #ccc;
 }
 
 #lyrics a {
 	color: inherit;
-	background-color: #272d44;
+	background-color: #ddd;
 	color: inherit;
 }
 
 #lyrics a:hover {
-	background-color: #32384f;
+	background-color: #ccc;
 }
 
 #metadata {
@@ -25,13 +25,13 @@
 
 #metadata h1 {
 	font-size: 2rem;
-	color: #ddd;
+	color: #171717;
 }
 
 #metadata h2 {
 	font-size: 1.4rem;
+	color: #1e1e1e;
 	font-weight: 500;
-	color: #eee;
 }
 
 #metadata-info {
@@ -55,9 +55,9 @@
 
 #description p {
 	font-size: 1.4rem;
+	color: #171717;
 	line-height: 1.8rem;
 	cursor: pointer;
-	color: #ccc;
 }
 
 #title {
@@ -78,10 +78,11 @@
 	gap: 0.5rem;
 }
 
+
 #credits summary {
 	font-size: 1.4rem;
 	cursor: pointer;
-	color: #ccc;
+	color: #1e1e1e;
 }
 
 #credits p {
@@ -94,10 +95,37 @@
 	display: none;
 }
 
-#title {
+.dark #lyrics {
+	color: #ccc;
+}
+
+.dark #lyrics a {
+	background-color: #272d44;
+	color: inherit;
+}
+
+.dark #lyrics a:hover {
+	background-color: #32384f;
+}
+
+.dark #metadata h1 {
 	color: #ddd;
 }
 
+.dark #metadata h2,
+.dark #credits p {
+	color: #eee;
+}
+
+.dark #title {
+	color: #ddd;
+}
+
+.dark #description p,
+.dark #credits summary {
+	color: #ccc;
+}
+
 @media screen and (max-width: 1080px) {
 	#metadata {
 		align-items: center;

style/main.css

@@ -49,7 +49,7 @@ html {
 body {
 	font-size: 1.5rem;
 	font-family: inter;
-	background-color: #000;
+	background-color: #f9f9f9;
 }
 
 
@@ -60,3 +60,7 @@ a {
 a:hover {
 	text-decoration: underline;
 }
+
+body.dark {
+	background-color: #181d31;
+}

style/navbar.css

@@ -1,6 +1,5 @@
 nav {
-  background: #000;
+	background-color: #ffcd38;
-  border-bottom: solid 1px #fff;
 	padding: 1rem 0;
 }
 
@@ -20,6 +19,26 @@ nav {
 	}
 }
 
+
 nav img {
 	width: 50px;
 }
+
+#nav-icons {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.nav-icon {
+	background: none;
+	border: none;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.dark nav {
+	background-color: #fec260;
+}

style/search.css

@@ -19,9 +19,9 @@
 }
 
 #search-results h2 {
+	color: #222;
 	font-size: 1.8rem;
 	font-weight: 500;
-	color: #ddd;
 }
 
 #search-section {
@@ -33,11 +33,11 @@
 #search-item {
 	display: flex;
 	height: 8rem;
+	border: 1px solid #eee;
 	border-radius: 5px;
 	gap: 1rem;
 	padding: 1rem;
 	box-shadow: 0 1px 1px #ddd;
-	border: 1px solid #888;
 }
 
 #search-item h3 {
@@ -47,7 +47,7 @@
 
 #search-item span {
 	font-size: 1.3rem;
-	color: #bbb;
+	color: #333;
 }
 
 #search-item img {
@@ -63,3 +63,19 @@
 	border: 1px solid #ddd;
 	color: #222;
 }
+
+.dark #search-page h2 {
+	color: #eee;
+}
+
+.dark #search-item {
+	border: 1px solid #888;
+}
+
+.dark #search-item h3 {
+	color: #ddd;
+}
+
+.dark #search-item span {
+	color: #bbb;
+}

views/footer.templ

@@ -5,8 +5,11 @@ import "github.com/rramiachraf/dumb/data"
 templ footer() {
 	<footer>
 		<div id="footer-container">
-      <a rel="noopener noreferrer" target="_blank" href="https://github.com/rramiachraf/dumb">Source</a>
+			<div id="footer-links">
-      <a rel="noopener noreferrer" target="_blank" href="https://git.ngn.tf/ngn/dumb">Modified Source</a>
+				<a rel="noopener noreferrer" target="_blank" href="https://github.com/rramiachraf/dumb">Source Code</a>
+				<a rel="noopener noreferrer" target="_blank" href="/instances.json">Instances</a>
+			</div>
+			<p id="version">v.{ data.Version }</p>
 		</div>
 	</footer>
 }

views/navbar.templ

@@ -4,6 +4,38 @@ templ navbar() {
 	<nav>
 		<div id="nav-container">
 			<a href="/"><img src="/static/logo.png" alt="Logo"/></a>
+			<div id="nav-icons">
+				<a
+					title="Go to Genius.com"
+					alt="Go to Genius.com"
+					class="nav-icon"
+					id="goto-genius"
+					rel="noopener noreferrer"
+					target="_blank"
+				>
+					<svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="25px" height="25px" fill="none" viewBox="0 0 24 24">
+						<path stroke="#181d31" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 14v4.833A1.166 1.166 0 0 1 16.833 20H5.167A1.167 1.167 0 0 1 4 18.833V7.167A1.166 1.166 0 0 1 5.167 6h4.618m4.447-2H20v5.768m-7.889 2.121 7.778-7.778"></path>
+					</svg>
+				</a>
+				<button id="choose-theme" class="nav-icon" type="button" aria-label="Change theme">
+					<svg
+						width="25px"
+						height="25px"
+						viewBox="0 0 24 24"
+						version="1.1"
+						xmlns="http://www.w3.org/2000/svg"
+						xmlns:xlink="http://www.w3.org/1999/xlink"
+					>
+						<g id="🔍-Product-Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+							<g id="ic_fluent_dark_theme_24_regular" fill="#181d31" fill-rule="nonzero">
+								<path
+									d="M12,22 C17.5228475,22 22,17.5228475 22,12 C22,6.4771525 17.5228475,2 12,2 C6.4771525,2 2,6.4771525 2,12 C2,17.5228475 6.4771525,22 12,22 Z M12,20.5 L12,3.5 C16.6944204,3.5 20.5,7.30557963 20.5,12 C20.5,16.6944204 16.6944204,20.5 12,20.5 Z"
+								></path>
+							</g>
+						</g>
+					</svg>
+				</button>
+			</div>
 		</div>
 	</nav>
 }