Allow passing custom themes to create layers

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,35 @@ 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,40 @@
+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

@@ -5,6 +5,7 @@ import layers from "../src/index";
 import themes from "../src/themes";
 
 import "./base_layers.test";
+import "./custom_themes.test";
 import "./themes.test";
 
 const STUB = {