📦 2.2.1

.github/workflows/main.yml

@@ -7,8 +7,8 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           cache: yarn
           node-version: 16
@@ -21,7 +21,7 @@ jobs:
   test-action:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: update action.yml to use image from local Dockerfile
         run: |
@@ -92,8 +92,8 @@ jobs:
   deploy-ghpages:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-      - uses: actions/setup-node@v2
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
         with:
           cache: yarn
           node-version: 16
@@ -103,7 +103,7 @@ jobs:
         env:
           GITHUB_USER_CONTRIBUTION_API_ENDPOINT: https://snk-one.vercel.app/api/github-user-contribution/
 
-      - uses: crazy-max/ghaction-github-pages@v2.6.0
+      - uses: crazy-max/ghaction-github-pages@v3.1.0
         if: success() && github.ref == 'refs/heads/main'
         with:
           target_branch: gh-pages

.github/workflows/release.yml

@@ -21,19 +21,19 @@ jobs:
     permissions:
       contents: write
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
-      - uses: docker/setup-qemu-action@v1
+      - uses: docker/setup-qemu-action@v2
 
-      - uses: docker/setup-buildx-action@v1
+      - uses: docker/setup-buildx-action@v2
 
-      - uses: docker/login-action@v1
+      - uses: docker/login-action@v2
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: build and publish the docker image
-        uses: docker/build-push-action@v2
+        uses: docker/build-push-action@v4
         id: docker-build
         with:
           push: true
@@ -45,7 +45,7 @@ jobs:
         run: |
           sed -i "s/image: .*/image: docker:\/\/platane\/snk@${{ steps.docker-build.outputs.digest }}/" action.yml
 
-      - uses: actions/setup-node@v2
+      - uses: actions/setup-node@v3
         with:
           cache: yarn
           node-version: 16
@@ -81,7 +81,7 @@ jobs:
             echo "prerelease=true" >> $GITHUB_OUTPUT
           fi
 
-      - uses: ncipollo/release-action@v1.11.1
+      - uses: ncipollo/release-action@v1.12.0
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         with:

README.md

@@ -1,5 +1,6 @@
 # snk
 
+[![GitHub Workflow Status](https://img.shields.io/github/actions/workflow/status/platane/platane/main.yml?label=action&style=flat-square)](https://github.com/Platane/Platane/actions/workflows/main.yml)
 [![GitHub release](https://img.shields.io/github/release/platane/snk.svg?style=flat-square)](https://github.com/platane/snk/releases/latest)
 [![GitHub marketplace](https://img.shields.io/badge/marketplace-snake-blue?logo=github&style=flat-square)](https://github.com/marketplace/actions/generate-snake-game-from-github-contribution-grid)
 ![type definitions](https://img.shields.io/npm/types/typescript?style=flat-square)
@@ -7,7 +8,24 @@
 
 Generates a snake game from a github user contributions graph
 
-![](https://github.com/Platane/snk/raw/output/github-contribution-grid-snake.svg)
+<picture>
+  <source
+    media="(prefers-color-scheme: dark)"
+    srcset="
+      https://raw.githubusercontent.com/platane/snk/output/github-contribution-grid-snake-dark.svg
+    "
+  />
+  <source
+    media="(prefers-color-scheme: light)"
+    srcset="
+      https://raw.githubusercontent.com/platane/snk/output/github-contribution-grid-snake.svg
+    "
+  />
+  <img
+    alt="github contribution grid snake animation"
+    src="https://raw.githubusercontent.com/platane/snk/output/github-contribution-grid-snake.svg"
+  />
+</picture>
 
 Pull a github user's contribution graph.
 Make it a snake Game, generate a snake path where the cells get eaten in an orderly fashion.
@@ -48,11 +66,14 @@ If you are only interested in generating a svg, consider using this faster actio
 
 **dark mode**
 
-For **dark mode** support on github, use this [special syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to=) in your readme.
+For **dark mode** support on github, use this [special syntax](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax#specifying-the-theme-an-image-is-shown-to) in your readme.
 
-```md
-![GitHub Snake Light](github-snake.svg#gh-light-mode-only)
-![GitHub Snake dark](github-snake-dark.svg#gh-dark-mode-only)
+```html
+<picture>
+  <source media="(prefers-color-scheme: dark)" srcset="github-snake-dark.svg" />
+  <source media="(prefers-color-scheme: light)" srcset="github-snake.svg" />
+  <img alt="github-snake" src="github-snake.svg" />
+</picture>
 ```
 
 **interactive demo**

action.yml

@@ -4,7 +4,7 @@ author: "platane"
 
 runs:
   using: docker
-  image: docker://platane/snk@sha256:dcb351bdad223f2a2161fa5d6e3c9102e6ebe9fbde99a10fa3bf443d69f61a0f
+  image: docker://platane/snk@sha256:bd0f7538482216785abbee29da431738f5ea9aff9fc3a4b8df37708a808f0968
 
 inputs:
   github_user_name:

package.json

@@ -1,17 +1,17 @@
 {
   "name": "snk",
   "description": "Generates a snake game from a github user contributions grid",
-  "version": "2.2.0",
+  "version": "2.2.1",
   "private": true,
   "repository": "github:platane/snk",
   "devDependencies": {
     "@sucrase/jest-plugin": "3.0.0",
-    "@types/jest": "29.2.1",
+    "@types/jest": "29.4.0",
     "@types/node": "16.11.7",
-    "jest": "29.2.2",
-    "prettier": "2.7.1",
-    "sucrase": "3.28.0",
-    "typescript": "4.8.4"
+    "jest": "29.4.3",
+    "prettier": "2.8.4",
+    "sucrase": "3.29.0",
+    "typescript": "4.9.5"
   },
   "workspaces": [
     "packages/**"

packages/action/__tests__/__snapshots__/outputsOptions.spec.ts.snap

@@ -1,81 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`should parse /out.svg       {"color_snake":"yellow"} 1`] = `
-{
-  "animationOptions": {
-    "frameDuration": 100,
-    "step": 1,
-  },
-  "drawOptions": {
-    "colorDotBorder": "#1b1f230a",
-    "colorDots": [
-      "#ebedf0",
-      "#9be9a8",
-      "#40c463",
-      "#30a14e",
-      "#216e39",
-    ],
-    "colorEmpty": "#ebedf0",
-    "colorSnake": "yellow",
-    "dark": {
-      "colorDotBorder": "#1b1f230a",
-      "colorDots": [
-        "#161b22",
-        "#01311f",
-        "#034525",
-        "#0f6d31",
-        "#00c647",
-      ],
-      "colorEmpty": "#161b22",
-      "colorSnake": "purple",
-    },
-    "sizeCell": 16,
-    "sizeDot": 12,
-    "sizeDotBorderRadius": 2,
-  },
-  "filename": "/out.svg",
-  "format": "svg",
-}
-`;
-
-exports[`should parse /out.svg?.gif.svg?color_snake=orange 1`] = `
-{
-  "animationOptions": {
-    "frameDuration": 100,
-    "step": 1,
-  },
-  "drawOptions": {
-    "colorDotBorder": "#1b1f230a",
-    "colorDots": [
-      "#ebedf0",
-      "#9be9a8",
-      "#40c463",
-      "#30a14e",
-      "#216e39",
-    ],
-    "colorEmpty": "#ebedf0",
-    "colorSnake": "orange",
-    "dark": {
-      "colorDotBorder": "#1b1f230a",
-      "colorDots": [
-        "#161b22",
-        "#01311f",
-        "#034525",
-        "#0f6d31",
-        "#00c647",
-      ],
-      "colorEmpty": "#161b22",
-      "colorSnake": "purple",
-    },
-    "sizeCell": 16,
-    "sizeDot": 12,
-    "sizeDotBorderRadius": 2,
-  },
-  "filename": "/out.svg?.gif.svg",
-  "format": "svg",
-}
-`;
-
 exports[`should parse /out.svg?{"color_snake":"yellow","color_dots":["#000","#111","#222","#333","#444"]} 1`] = `
 {
   "animationOptions": {
@@ -148,6 +72,7 @@ exports[`should parse /out.svg?color_snake=orange&color_dots=#000,#111,#222,#333
     "colorEmpty": "#000",
     "colorSnake": "orange",
     "dark": {
+      "colorDotBorder": "#1b1f230a",
       "colorDots": [
         "#a00",
         "#a11",
@@ -156,6 +81,7 @@ exports[`should parse /out.svg?color_snake=orange&color_dots=#000,#111,#222,#333
         "#a44",
       ],
       "colorEmpty": "#a00",
+      "colorSnake": "orange",
     },
     "sizeCell": 16,
     "sizeDot": 12,
@@ -183,18 +109,7 @@ exports[`should parse path/to/out.gif 1`] = `
     ],
     "colorEmpty": "#ebedf0",
     "colorSnake": "purple",
-    "dark": {
-      "colorDotBorder": "#1b1f230a",
-      "colorDots": [
-        "#161b22",
-        "#01311f",
-        "#034525",
-        "#0f6d31",
-        "#00c647",
-      ],
-      "colorEmpty": "#161b22",
-      "colorSnake": "purple",
-    },
+    "dark": undefined,
     "sizeCell": 16,
     "sizeDot": 12,
     "sizeDotBorderRadius": 2,

packages/action/__tests__/outputsOptions.spec.ts

@@ -1,17 +1,58 @@
 import { parseEntry } from "../outputsOptions";
 
+it("should parse options as json", () => {
+  expect(
+    parseEntry(`/out.svg       {"color_snake":"yellow"}`)?.drawOptions
+  ).toHaveProperty("colorSnake", "yellow");
+
+  expect(
+    parseEntry(`/out.svg?{"color_snake":"yellow"}`)?.drawOptions
+  ).toHaveProperty("colorSnake", "yellow");
+
+  expect(
+    parseEntry(`/out.svg?{"color_dots":["#000","#111","#222","#333","#444"]}`)
+      ?.drawOptions.colorDots
+  ).toEqual(["#000", "#111", "#222", "#333", "#444"]);
+});
+
+it("should parse options as searchparams", () => {
+  expect(parseEntry(`/out.svg?color_snake=yellow`)?.drawOptions).toHaveProperty(
+    "colorSnake",
+    "yellow"
+  );
+
+  expect(
+    parseEntry(`/out.svg?color_dots=#000,#111,#222,#333,#444`)?.drawOptions
+      .colorDots
+  ).toEqual(["#000", "#111", "#222", "#333", "#444"]);
+});
+
+it("should parse filename", () => {
+  expect(parseEntry(`/a/b/c.svg?{"color_snake":"yellow"}`)).toHaveProperty(
+    "filename",
+    "/a/b/c.svg"
+  );
+  expect(
+    parseEntry(`/a/b/out.svg?.gif.svg?{"color_snake":"yellow"}`)
+  ).toHaveProperty("filename", "/a/b/out.svg?.gif.svg");
+
+  expect(
+    parseEntry(`/a/b/{[-1].svg?.gif.svg?{"color_snake":"yellow"}`)
+  ).toHaveProperty("filename", "/a/b/{[-1].svg?.gif.svg");
+});
+
 [
+  // default
   "path/to/out.gif",
 
+  // overwrite colors (search params)
   "/out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444",
 
+  // overwrite colors (json)
   `/out.svg?{"color_snake":"yellow","color_dots":["#000","#111","#222","#333","#444"]}`,
 
-  `/out.svg       {"color_snake":"yellow"}`,
-
+  // overwrite dark colors
   "/out.svg?color_snake=orange&color_dots=#000,#111,#222,#333,#444&dark_color_dots=#a00,#a11,#a22,#a33,#a44",
-
-  "/out.svg?.gif.svg?color_snake=orange",
 ].forEach((entry) =>
   it(`should parse ${entry}`, () => {
     expect(parseEntry(entry)).toMatchSnapshot();

packages/action/outputsOptions.ts

@@ -32,6 +32,7 @@ export const parseEntry = (entry: string) => {
     sizeCell: 16,
     sizeDot: 12,
     ...palettes["default"],
+    dark: palettes["default"].dark && { ...palettes["default"].dark },
   };
   const animationOptions: AnimationOptions = { step: 1, frameDuration: 100 };
 
@@ -43,6 +44,14 @@ export const parseEntry = (entry: string) => {
     }
   }
 
+  {
+    const dark_palette = palettes[sp.get("dark_palette")!];
+    if (dark_palette) {
+      const clone = { ...dark_palette, dark: undefined };
+      drawOptions.dark = clone;
+    }
+  }
+
   if (sp.has("color_snake")) drawOptions.colorSnake = sp.get("color_snake")!;
   if (sp.has("color_dots")) {
     const colors = sp.get("color_dots")!.split(/[,;]/);
@@ -56,6 +65,8 @@ export const parseEntry = (entry: string) => {
   if (sp.has("dark_color_dots")) {
     const colors = sp.get("dark_color_dots")!.split(/[,;]/);
     drawOptions.dark = {
+      colorDotBorder: drawOptions.colorDotBorder,
+      colorSnake: drawOptions.colorSnake,
       ...drawOptions.dark,
       colorDots: colors,
       colorEmpty: colors[0],

packages/action/package.json

@@ -10,7 +10,7 @@
     "@snk/types": "1.0.0"
   },
   "devDependencies": {
-    "@vercel/ncc": "0.34.0"
+    "@vercel/ncc": "0.36.1"
   },
   "scripts": {
     "build": "ncc build --external canvas --external gifsicle --out dist ./index.ts",

packages/action/palettes.ts

@@ -1,6 +1,6 @@
 import { DrawOptions as DrawOptions } from "@snk/svg-creator";
 
-export const palettes: Record<
+export const basePalettes: Record<
   string,
   Pick<
     DrawOptions,
@@ -22,8 +22,6 @@ export const palettes: Record<
 };
 
 // aliases
-palettes["github"] = {
-  ...palettes["github-light"],
-  dark: { ...palettes["github-dark"] },
-};
+export const palettes = { ...basePalettes };
+palettes["github"] = palettes["github-light"];
 palettes["default"] = palettes["github"];

packages/demo/demo.interactive.ts

@@ -14,6 +14,7 @@ import { createSvg } from "@snk/svg-creator";
 import { createRpcClient } from "./worker-utils";
 import type { API as WorkerAPI } from "./demo.interactive.worker";
 import { AnimationOptions } from "@snk/gif-creator";
+import { basePalettes } from "@snk/action/palettes";
 
 const createForm = ({
   onSubmit,
@@ -119,13 +120,18 @@ const createViewer = ({
   grid0,
   chain,
   cells,
-  drawOptions,
 }: {
   grid0: Grid;
   chain: Snake[];
   cells: Point[];
-  drawOptions: DrawOptions;
 }) => {
+  const drawOptions: DrawOptions = {
+    sizeDotBorderRadius: 2,
+    sizeCell: 16,
+    sizeDot: 12,
+    ...basePalettes["github-light"],
+  };
+
   //
   // canvas
   const canvas = document.createElement("canvas");
@@ -171,12 +177,12 @@ const createViewer = ({
 
   //
   // controls
-  const input = document.createElement("input") as any;
+  const input = document.createElement("input");
   input.type = "range";
-  input.value = 0;
-  input.step = 1;
-  input.min = 0;
-  input.max = chain.length;
+  input.value = "0";
+  input.step = "1";
+  input.min = "0";
+  input.max = "" + chain.length;
   input.style.width = "calc( 100% - 20px )";
   input.addEventListener("input", () => {
     spring.target = +input.value;
@@ -190,10 +196,49 @@ const createViewer = ({
   window.addEventListener("click", onClickBackground);
   document.body.append(input);
 
+  //
+  const schemaSelect = document.createElement("select");
+  schemaSelect.style.margin = "10px";
+  schemaSelect.style.alignSelf = "flex-start";
+  schemaSelect.value = "github-light";
+  schemaSelect.addEventListener("change", () => {
+    Object.assign(drawOptions, basePalettes[schemaSelect.value]);
+
+    svgString = createSvg(grid0, cells, chain, drawOptions, {
+      frameDuration: 100,
+    } as AnimationOptions);
+    const svgImageUri = `data:image/*;charset=utf-8;base64,${btoa(svgString)}`;
+    svgLink.href = svgImageUri;
+
+    if (schemaSelect.value.includes("dark"))
+      document.body.parentElement?.classList.add("dark-mode");
+    else document.body.parentElement?.classList.remove("dark-mode");
+
+    loop();
+  });
+  for (const name of Object.keys(basePalettes)) {
+    const option = document.createElement("option");
+    option.value = name;
+    option.innerText = name;
+    schemaSelect.appendChild(option);
+  }
+  document.body.append(schemaSelect);
+
+  //
+  // dark mode
+  const style = document.createElement("style");
+  style.innerText = `
+  html { transition:background-color 180ms }
+  a { transition:color 180ms }
+  html.dark-mode{ background-color:#0d1117 }
+  html.dark-mode a{ color:rgb(201, 209, 217) }
+  `;
+  document.head.append(style);
+
   //
   // svg
   const svgLink = document.createElement("a");
-  const svgString = createSvg(grid0, cells, chain, drawOptions, {
+  let svgString = createSvg(grid0, cells, chain, drawOptions, {
     frameDuration: 100,
   } as AnimationOptions);
   const svgImageUri = `data:image/*;charset=utf-8;base64,${btoa(svgString)}`;
@@ -203,7 +248,10 @@ const createViewer = ({
   svgLink.addEventListener("click", (e) => {
     const w = window.open("")!;
     w.document.write(
-      `<a href="${svgImageUri}" download="github-user-contribution.svg">` +
+      (document.body.parentElement?.classList.contains("dark-mode")
+        ? "<style>html{ background-color:#0d1117 }</style>"
+        : "") +
+        `<a href="${svgLink.href}" download="github-user-contribution.svg">` +
         svgString +
         "<a/>"
     );
@@ -233,23 +281,13 @@ const onSubmit = async (userName: string) => {
   );
   const cells = (await res.json()) as Res;
 
-  const drawOptions: DrawOptions = {
-    sizeDotBorderRadius: 2,
-    sizeCell: 16,
-    sizeDot: 12,
-    colorDotBorder: "#1b1f230a",
-    colorDots: ["#ebedf0", "#9be9a8", "#40c463", "#30a14e", "#216e39"],
-    colorEmpty: "#ebedf0",
-    colorSnake: "purple",
-  };
-
   const grid = userContributionToGrid(cells);
 
   const chain = await getChain(grid);
 
   dispose();
 
-  createViewer({ grid0: grid, chain, cells, drawOptions });
+  createViewer({ grid0: grid, chain, cells });
 };
 
 const worker = new Worker(

packages/demo/package.json

@@ -15,8 +15,8 @@
     "html-webpack-plugin": "5.5.0",
     "ts-loader": "9.4.1",
     "ts-node": "10.9.1",
-    "webpack": "5.74.0",
-    "webpack-cli": "4.10.0",
+    "webpack": "5.75.0",
+    "webpack-cli": "5.0.1",
     "webpack-dev-server": "4.11.1"
   },
   "scripts": {

packages/gif-creator/package.json

@@ -12,7 +12,7 @@
   "devDependencies": {
     "@types/gifsicle": "5.2.0",
     "@types/tmp": "0.2.3",
-    "@vercel/ncc": "0.34.0"
+    "@vercel/ncc": "0.36.1"
   },
   "scripts": {
     "benchmark": "ncc run __tests__/benchmark.ts --quiet"

packages/github-user-contribution-service/package.json

@@ -3,6 +3,6 @@
   "version": "1.0.0",
   "dependencies": {
     "@snk/github-user-contribution": "1.0.0",
-    "@vercel/node": "2.6.1"
+    "@vercel/node": "2.9.8"
   }
 }

packages/github-user-contribution/package.json

@@ -2,10 +2,9 @@
   "name": "@snk/github-user-contribution",
   "version": "1.0.0",
   "dependencies": {
-    "cheerio": "1.0.0-rc.10",
     "node-fetch": "2.6.7"
   },
   "devDependencies": {
-    "@types/node-fetch": "2.6.1"
+    "@types/node-fetch": "2.6.2"
   }
 }

svg-only/dist/317.index.js

@@ -689,14 +689,14 @@ const generateContributionSnake = async (userName, outputs) => {
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "V0": () => (/* binding */ isInside),
-/* harmony export */   "HJ": () => (/* binding */ isInsideLarge),
-/* harmony export */   "VJ": () => (/* binding */ copyGrid),
-/* harmony export */   "Lq": () => (/* binding */ getColor),
-/* harmony export */   "xb": () => (/* binding */ isEmpty),
-/* harmony export */   "vk": () => (/* binding */ setColor),
 /* harmony export */   "Dy": () => (/* binding */ setColorEmpty),
-/* harmony export */   "u1": () => (/* binding */ createEmptyGrid)
+/* harmony export */   "HJ": () => (/* binding */ isInsideLarge),
+/* harmony export */   "Lq": () => (/* binding */ getColor),
+/* harmony export */   "V0": () => (/* binding */ isInside),
+/* harmony export */   "VJ": () => (/* binding */ copyGrid),
+/* harmony export */   "u1": () => (/* binding */ createEmptyGrid),
+/* harmony export */   "vk": () => (/* binding */ setColor),
+/* harmony export */   "xb": () => (/* binding */ isEmpty)
 /* harmony export */ });
 /* unused harmony exports isGridEmpty, gridEquals */
 const isInside = (grid, x, y) => x >= 0 && y >= 0 && x < grid.width && y < grid.height;
@@ -733,13 +733,13 @@ const createEmptyGrid = (width, height) => ({
 /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
 
 /* harmony export */ __webpack_require__.d(__webpack_exports__, {
-/* harmony export */   "If": () => (/* binding */ getHeadX),
 /* harmony export */   "IP": () => (/* binding */ getHeadY),
+/* harmony export */   "If": () => (/* binding */ getHeadX),
 /* harmony export */   "JJ": () => (/* binding */ getSnakeLength),
+/* harmony export */   "Ks": () => (/* binding */ snakeToCells),
 /* harmony export */   "kE": () => (/* binding */ snakeEquals),
 /* harmony export */   "kv": () => (/* binding */ nextSnake),
 /* harmony export */   "nJ": () => (/* binding */ snakeWillSelfCollide),
-/* harmony export */   "Ks": () => (/* binding */ snakeToCells),
 /* harmony export */   "xG": () => (/* binding */ createSnakeFromCells)
 /* harmony export */ });
 /* unused harmony export copySnake */

svg-only/dist/index.js

@@ -2991,7 +2991,7 @@ var external_path_ = __nccwpck_require__(1017);
 // EXTERNAL MODULE: ../../node_modules/@actions/core/lib/core.js
 var core = __nccwpck_require__(7117);
 ;// CONCATENATED MODULE: ./palettes.ts
-const palettes = {
+const basePalettes = {
     "github-light": {
         colorDotBorder: "#1b1f230a",
         colorDots: ["#ebedf0", "#9be9a8", "#40c463", "#30a14e", "#216e39"],
@@ -3006,10 +3006,8 @@ const palettes = {
     },
 };
 // aliases
-palettes["github"] = {
-    ...palettes["github-light"],
-    dark: { ...palettes["github-dark"] },
-};
+const palettes = { ...basePalettes };
+palettes["github"] = palettes["github-light"];
 palettes["default"] = palettes["github"];
 
 ;// CONCATENATED MODULE: ./outputsOptions.ts
@@ -3039,6 +3037,7 @@ const parseEntry = (entry) => {
         sizeCell: 16,
         sizeDot: 12,
         ...palettes["default"],
+        dark: palettes["default"].dark && { ...palettes["default"].dark },
     };
     const animationOptions = { step: 1, frameDuration: 100 };
     {
@@ -3048,6 +3047,13 @@ const parseEntry = (entry) => {
             drawOptions.dark = palette.dark && { ...palette.dark };
         }
     }
+    {
+        const dark_palette = palettes[sp.get("dark_palette")];
+        if (dark_palette) {
+            const clone = { ...dark_palette, dark: undefined };
+            drawOptions.dark = clone;
+        }
+    }
     if (sp.has("color_snake"))
         drawOptions.colorSnake = sp.get("color_snake");
     if (sp.has("color_dots")) {
@@ -3061,6 +3067,8 @@ const parseEntry = (entry) => {
     if (sp.has("dark_color_dots")) {
         const colors = sp.get("dark_color_dots").split(/[,;]/);
         drawOptions.dark = {
+            colorDotBorder: drawOptions.colorDotBorder,
+            colorSnake: drawOptions.colorSnake,
             ...drawOptions.dark,
             colorDots: colors,
             colorEmpty: colors[0],