Allow passing custom themes to create layers

So far it was only possible to generate styles based on a set of fixed themes maintained by the protomaps project.

With this change, it is possible to pass a custom color theme to create layers, without interfering with the final style. Also passing partial themes is possible to override only a small set of properties.

styles/.gitignore

@@ -1 +1,2 @@
-dist
+dist
+node_modules

styles/src/index.ts

@@ -1,6 +1,6 @@
 import { LayerSpecification } from "@maplibre/maplibre-gl-style-spec";
 import { labels_layers, nolabels_layers } from "./base_layers";
-import themes from "./themes";
+import themes, { Theme } from "./themes";
 
 export default function (source: string, key: string): LayerSpecification[] {
   const theme = themes[key];
@@ -16,3 +16,20 @@ export function labels(source: string, key: string): LayerSpecification[] {
   const theme = themes[key];
   return labels_layers(source, theme);
 }
+
+export function layersWithCustomTheme(source: string, theme: Theme): LayerSpecification[] {
+  return nolabels_layers(source, theme).concat(labels_layers(source, theme));
+}
+
+export function layersWithPartialCustomTheme(source: string, key: string, partialTheme: Partial<Theme>): LayerSpecification[] {
+  const mergedTheme = { ...themes[key], ...partialTheme };
+  return nolabels_layers(source, mergedTheme).concat(labels_layers(source, mergedTheme));
+}
+
+export function noLabelsWithCustomTheme(source: string, theme: Theme): LayerSpecification[] {
+  return nolabels_layers(source, theme);
+}
+
+export function labelsWithCustomTheme(source: string, theme: Theme): LayerSpecification[] {
+  return labels_layers(source, theme);
+}

styles/test/custom_themes.test.ts

@@ -0,0 +1,41 @@
+import assert from "node:assert";
+import { test } from "node:test";
+import { validateStyleMin } from "@maplibre/maplibre-gl-style-spec";
+import {
+  labelsWithCustomTheme,
+  layersWithPartialCustomTheme,
+} from "../src/index";
+import themes from "../src/themes";
+
+const STUB = {
+  version: 8,
+  glyphs: "https://example.com/{fontstack}/{range}.pbf",
+  sources: {
+    sourcename: {
+      type: "vector",
+    },
+  },
+};
+
+test("validate custom themes", () => {
+  const customTheme = themes["dark"];
+  STUB.layers = labelsWithCustomTheme("sourcename", customTheme);
+  const errors = validateStyleMin(STUB);
+  assert.deepStrictEqual([], errors);
+});
+
+test("validate layers with partial custom theme overrides", () => {
+  const customBackgroundColor = "#fff";
+  const partialTheme = { background: customBackgroundColor };
+  STUB.layers = layersWithPartialCustomTheme(
+    "sourcename",
+    "dark",
+    partialTheme
+  );
+  const errors = validateStyleMin(STUB);
+  assert.deepStrictEqual([], errors);
+  assert.deepStrictEqual(
+    STUB.layers.find((l) => l.id == "background")["paint"],
+    { "background-color": customBackgroundColor }
+  );
+});

styles/test/index.test.ts

@@ -6,6 +6,7 @@ import themes from "../src/themes";
 
 import "./base_layers.test";
 import "./themes.test";
+import "./custom_themes.test"
 
 const STUB = {
   version: 8,