fix(docs): make the docs respect light/dark mode (#334)

Closes #333

I'm very bad at design so I just picked colors that looked reasonable
enough to me. Hopefully this will be enough to get us to the next stage!

Signed-off-by: Xe Iaso <me@xeiaso.net>

.github/workflows/docs-test.yml

@@ -0,0 +1,39 @@
+name: Docs test build
+
+on:
+  pull_request:
+    branches: [ "main" ]
+
+permissions:
+  contents: read
+  actions: write
+
+jobs:
+  build:
+    runs-on: ubuntu-24.04
+
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+        with:
+          persist-credentials: false
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@b5ca514318bd6ebac0fb2aedd5d36ec1b5c232a2 # v3.10.0
+
+      - name: Docker meta
+        id: meta
+        uses: docker/metadata-action@902fa8ec7d6ecbf8d84d538b9b233a880e428804 # v5.7.0
+        with:
+          images: ghcr.io/techarohq/anubis/docs
+
+      - name: Build and push
+        id: build
+        uses: docker/build-push-action@471d1dc4e07e5cdedd4c2171150001c434f0b7a4 # v6.15.0
+        with:
+          context: ./docs
+          cache-to: type=gha
+          cache-from: type=gha
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          platforms: linux/amd64
+          push: false

docs/docusaurus.config.ts

@@ -70,6 +70,9 @@ const config: Config = {
   ],
 
   themeConfig: {
+    colorMode: {
+      respectPrefersColorScheme: true,
+    },
     // Replace with your project's social card
     image: 'img/docusaurus-social-card.jpg',
     navbar: {

docs/src/css/custom.css

@@ -21,16 +21,17 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme="dark"] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
-  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
-  --code-block-diff-add-line-color: #216932;
-  --code-block-diff-remove-line-color: #8b423b;
+  --ifm-color-primary: #e64a19;
+  --ifm-color-primary-dark: #b73a12;
+  --ifm-color-primary-darker: #8c2c0e;
+  --ifm-color-primary-darkest: #5a1e0a;
+  --ifm-color-primary-light: #eb6d45;
+  --ifm-color-primary-lighter: #f09178;
+  --ifm-color-primary-lightest: #f5b5a6;
+  --ifm-code-font-size: 95%;
+  --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.25);
+  --code-block-diff-add-line-color: #2d5a2c;
+  --code-block-diff-remove-line-color: #5a2d2c;
 }
 
 .code-block-diff-add-line {