colorsbymax 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 What changed in each colorsbymax release. Update with `npm install colorsbymax@latest`.
 
+## 0.3.1 (2026-09-25)
+
+- **`colourLogo` config option:** start with "Colour the logo too" on, for sites whose logo is drawn in the theme's colours. It's off by default, so logos keep their own colours, and visitors can still change it in settings. It also applies when the switcher is hidden. The colorsbymax site turns it on for its wordmark.
+
 ## 0.3.0 (2026-09-25)
 
 - **Dark mode for every site, on every load.** The mode now lives in the theme provider: a saved Dark (or Auto on a dark device) turns the whole site dark as soon as it loads, not only when the mode is changed, and it keeps working when the switcher is hidden. Before, the panel could go dark while the site stayed light. Sites without a dark mode of their own get one: every theme's dark twin re-colours the page, contrast-checked.

package/README.md

@@ -326,6 +326,8 @@ Without a `siteName`, the site group is named from the page's `og:site_name`, it
   position: 'bottom-right',         // where the button starts: bottom-right (default), bottom-left,
                                     // top-left, or top-right (just under a floating nav bar)
   hidden: import.meta.env.PROD,     // hide the button (the theme still applies), e.g. in production
+  colourLogo: false,                // themes colour the logo too, for first-time visitors (default
+                                    // false: it keeps its own colours); visitors can change it
   intro: true,                      // the button pops in with a burst of the theme's colours a moment
                                     // after the page loads (default); reduced motion fades it in
 }

package/dist/{ThemeSwitcher-CFtLm7PM.js → ThemeSwitcher-Bl_5Us5y.js}

@@ -1709,24 +1709,28 @@ var PANEL_PRESETS = [
 		height: "full"
 	}
 ];
-/** @returns {PanelSettings} */
-function loadSettings(storageKey) {
+/**
+* @param {string} storageKey
+* @param {PanelSettings} [defaults]  the site's starting settings (see the config's colourLogo)
+* @returns {PanelSettings}
+*/
+function loadSettings(storageKey, defaults = DEFAULT_SETTINGS) {
 	try {
 		const saved = JSON.parse(window.localStorage.getItem(`${storageKey}:settings`) || "null");
-		if (!saved || typeof saved !== "object") return DEFAULT_SETTINGS;
-		const out = { ...DEFAULT_SETTINGS };
-		for (const [key, fallback] of Object.entries(DEFAULT_SETTINGS)) if (typeof saved[key] === typeof fallback) out[key] = saved[key];
+		if (!saved || typeof saved !== "object") return defaults;
+		const out = { ...defaults };
+		for (const [key, fallback] of Object.entries(defaults)) if (typeof saved[key] === typeof fallback) out[key] = saved[key];
 		if (![
 			"light",
 			"dark",
 			"system"
-		].includes(out.mode)) out.mode = DEFAULT_SETTINGS.mode;
+		].includes(out.mode)) out.mode = defaults.mode;
 		const size = (v) => typeof v === "number" && v > 0 && v < 1e4;
 		out.panelWidth = size(saved.panelWidth) ? saved.panelWidth : null;
 		out.panelHeight = size(saved.panelHeight) || saved.panelHeight === "full" ? saved.panelHeight : null;
 		return out;
 	} catch {
-		return DEFAULT_SETTINGS;
+		return defaults;
 	}
 }
 function saveSettings(storageKey, settings) {
@@ -1908,6 +1912,8 @@ var newId = () => `custom-${Date.now().toString(36)}-${Math.random().toString(36
 *   Where each token is used on this site, shown in the editors
 * @property {boolean} [scrollbars]  Colour the page's scrollbars from the theme (default true)
 * @property {() => Promise<any>} [pdf]  Enables PDF uploads: pass `loadPdf` from 'colorsbymax/pdf'
+* @property {boolean} [colourLogo]  Whether themes colour the site's logo for a first-time visitor
+*   (default false: the logo keeps its own colours). Visitors can still change it in settings.
 * @property {boolean} [intro]  Bring the colour button in with a short pop and burst of the theme's
 *   colours, a moment after the page loads (default true). Reduced motion fades it in instead.
 * @property {boolean} [hidden]  Hide the colour button and panel; the theme still applies. Use
@@ -2009,7 +2015,11 @@ function ThemeProvider({ config = {}, children }) {
 			recolourer.current = null;
 		};
 	}, [recolourMode]);
-	const [logoColouring, setLogoColouring] = useState(false);
+	const settingDefaults = useMemo(() => ({
+		...DEFAULT_SETTINGS,
+		colourLogo: Boolean(initialConfig.colourLogo)
+	}), [initialConfig]);
+	const [logoColouring, setLogoColouring] = useState(() => loadSettings(storageKey, settingDefaults).colourLogo);
 	useLayoutEffect(() => {
 		recolourer.current?.setLogoColouring(logoColouring);
 	}, [logoColouring, pageColours]);
@@ -2077,7 +2087,7 @@ function ThemeProvider({ config = {}, children }) {
 			tokens: theme.tokens
 		} : s.snapshot
 	})), []);
-	const [modeSetting, setModeSetting] = useState(() => loadSettings(storageKey).mode);
+	const [modeSetting, setModeSetting] = useState(() => loadSettings(storageKey, settingDefaults).mode);
 	const prefersDark = usePrefersDark();
 	const mode = modeSetting === "system" ? prefersDark ? "dark" : "light" : modeSetting;
 	const modeRef = useRef(mode);
@@ -2090,10 +2100,10 @@ function ThemeProvider({ config = {}, children }) {
 		].includes(next)) return;
 		setModeSetting(next);
 		saveSettings(storageKey, {
-			...loadSettings(storageKey),
+			...loadSettings(storageKey, settingDefaults),
 			mode: next
 		});
-	}, [storageKey]);
+	}, [storageKey, settingDefaults]);
 	useLayoutEffect(() => {
 		if (base.custom) return;
 		if (mode === "dark" && !isDarkTheme(base.tokens)) {
@@ -2135,6 +2145,8 @@ function ThemeProvider({ config = {}, children }) {
 	}, [setMode]);
 	const api = {
 		state,
+		/** The switcher's starting settings for this site. */
+		settingDefaults,
 		/** The mode in effect ('light' or 'dark'), the visitor's setting ('system' follows the device), and a setter. */
 		mode,
 		modeSetting,
@@ -5711,7 +5723,7 @@ function ThemeSwitcher() {
 	return mount && createPortal(/* @__PURE__ */ jsx(Switcher, {}), mount);
 }
 function Switcher() {
-	const { issues, storageKey, tokens, position: requested, setLogoColouring, intro, mode, modeSetting, setMode } = useTheme();
+	const { issues, storageKey, tokens, position: requested, setLogoColouring, intro, mode, modeSetting, setMode, settingDefaults } = useTheme();
 	const position = CORNERS[requested] ? requested : "bottom-right";
 	const [open, setOpen] = useState(false);
 	const [arrived, setArrived] = useState(!intro);
@@ -5737,7 +5749,7 @@ function Switcher() {
 		}, BURST_TIME);
 		return () => clearTimeout(timer);
 	}, [burst]);
-	const [settings, setSettings] = useState(() => loadSettings(storageKey));
+	const [settings, setSettings] = useState(() => loadSettings(storageKey, settingDefaults));
 	useEffect(() => setLogoColouring(settings.colourLogo), [settings.colourLogo, setLogoColouring]);
 	const [auditOn, setAuditOn] = useState(false);
 	const [findings, setFindings] = useState([]);
@@ -5913,7 +5925,7 @@ function Switcher() {
 	const storeSettings = (next) => {
 		saveSettings(storageKey, {
 			...next,
-			mode: loadSettings(storageKey).mode
+			mode: loadSettings(storageKey, settingDefaults).mode
 		});
 		return next;
 	};
@@ -5944,8 +5956,8 @@ function Switcher() {
 			}));
 		},
 		reset: () => {
-			setMode(DEFAULT_SETTINGS.mode);
-			setSettings(storeSettings(DEFAULT_SETTINGS));
+			setMode(settingDefaults.mode);
+			setSettings(storeSettings(settingDefaults));
 		},
 		resetButton: saved ? resetPosition : null
 	};

package/dist/auto.js

@@ -1,4 +1,4 @@
-import { o as ThemeProvider, t as ThemeSwitcher } from "./ThemeSwitcher-CFtLm7PM.js";
+import { o as ThemeProvider, t as ThemeSwitcher } from "./ThemeSwitcher-Bl_5Us5y.js";
 import { createElement } from "react";
 import { createRoot } from "react-dom/client";
 //#region src/auto.js

package/dist/index.js

@@ -1,2 +1,2 @@
-import { A as PAIRINGS, C as TOKEN_KEYS, D as MIN_CONTRAST_NON_TEXT, E as MIN_CONTRAST_LARGE_TEXT, F as contrastRatio, I as normalizeHex, M as checkTheme, N as fixAll, O as MIN_CONTRAST_TEXT, P as suggestFix, S as TOKEN_GROUPS, T as deriveAppTokens, _ as darkTokens, a as themeFromPalette, b as BASE_TOKENS, c as useTheme, d as DEFAULT_SETTINGS, f as collectColors, g as themeFromRoles, h as suggestThemes, i as rolesFromPalette, j as checkRamp, k as MIN_RAMP_STEP_DELTA_E, l as DEFAULT_STORAGE_KEY, m as inferRoles, n as coloursFromFile, o as ThemeProvider, p as detectSiteName, r as dominantColours, s as applyTokens, t as ThemeSwitcher, u as prePaintScript, v as isDarkTheme, w as completeTokens, x as PRESETS, y as toDark } from "./ThemeSwitcher-CFtLm7PM.js";
+import { A as PAIRINGS, C as TOKEN_KEYS, D as MIN_CONTRAST_NON_TEXT, E as MIN_CONTRAST_LARGE_TEXT, F as contrastRatio, I as normalizeHex, M as checkTheme, N as fixAll, O as MIN_CONTRAST_TEXT, P as suggestFix, S as TOKEN_GROUPS, T as deriveAppTokens, _ as darkTokens, a as themeFromPalette, b as BASE_TOKENS, c as useTheme, d as DEFAULT_SETTINGS, f as collectColors, g as themeFromRoles, h as suggestThemes, i as rolesFromPalette, j as checkRamp, k as MIN_RAMP_STEP_DELTA_E, l as DEFAULT_STORAGE_KEY, m as inferRoles, n as coloursFromFile, o as ThemeProvider, p as detectSiteName, r as dominantColours, s as applyTokens, t as ThemeSwitcher, u as prePaintScript, v as isDarkTheme, w as completeTokens, x as PRESETS, y as toDark } from "./ThemeSwitcher-Bl_5Us5y.js";
 export { BASE_TOKENS, DEFAULT_SETTINGS, DEFAULT_STORAGE_KEY, MIN_CONTRAST_LARGE_TEXT, MIN_CONTRAST_NON_TEXT, MIN_CONTRAST_TEXT, MIN_RAMP_STEP_DELTA_E, PAIRINGS, PRESETS, TOKEN_GROUPS, TOKEN_KEYS, ThemeProvider, ThemeSwitcher, applyTokens, checkRamp, checkTheme, collectColors, coloursFromFile, completeTokens, contrastRatio, darkTokens, deriveAppTokens, detectSiteName, dominantColours, fixAll, inferRoles, isDarkTheme, normalizeHex, prePaintScript, rolesFromPalette, suggestFix, suggestThemes, themeFromPalette, themeFromRoles, toDark, useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "colorsbymax",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "A live theme switcher for any website: site themes, 700+ palettes, for light/dark modes and WCAG contrast checks.",
   "keywords": [
     "theme",

package/types/index.d.ts

@@ -90,6 +90,11 @@ export interface ColorsByMaxConfig {
    * the page loads (default true). With reduced motion it fades in instead.
    */
   intro?: boolean
+  /**
+   * Whether themes colour the site's logo for a first-time visitor (default false: the logo keeps
+   * its own colours). Visitors can still change it in the panel's settings.
+   */
+  colourLogo?: boolean
 }
 
 export interface ThemeProviderProps {