colorsbymax 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 What changed in each colorsbymax release. Update with `npm install colorsbymax@latest`.
 
+## 0.3.2 (2026-09-25)
+
+- **`defaultMode` config option:** the mode first-time visitors start in, `'light'` (the default), `'dark'` or `'system'` to follow their device. Any site can start dark, since every theme has a dark twin, and visitors can still switch. The colorsbymax site now opens in dark mode.
+- The colorsbymax site's browser-tab icon is the mrmaxdesigns logo mark in the current theme's colours, with a version for light tabs and one for dark tabs, each checked to stand out.
+
+## 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,10 @@ 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
+  defaultMode: 'light',             // the mode first-time visitors start in: 'light' (default),
+                                    // 'dark', or 'system' to follow their device
+  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-BlWfKjRg.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,10 @@ 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 {'light' | 'dark' | 'system'} [defaultMode]  The mode a first-time visitor starts in
+*   (default 'light'; 'system' follows their device). Visitors can still change it.
+* @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 +2017,16 @@ function ThemeProvider({ config = {}, children }) {
 			recolourer.current = null;
 		};
 	}, [recolourMode]);
-	const [logoColouring, setLogoColouring] = useState(false);
+	const settingDefaults = useMemo(() => ({
+		...DEFAULT_SETTINGS,
+		colourLogo: Boolean(initialConfig.colourLogo),
+		mode: [
+			"light",
+			"dark",
+			"system"
+		].includes(initialConfig.defaultMode) ? initialConfig.defaultMode : DEFAULT_SETTINGS.mode
+	}), [initialConfig]);
+	const [logoColouring, setLogoColouring] = useState(() => loadSettings(storageKey, settingDefaults).colourLogo);
 	useLayoutEffect(() => {
 		recolourer.current?.setLogoColouring(logoColouring);
 	}, [logoColouring, pageColours]);
@@ -2077,7 +2094,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 +2107,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 +2152,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 +5730,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 +5756,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 +5932,7 @@ function Switcher() {
 	const storeSettings = (next) => {
 		saveSettings(storageKey, {
 			...next,
-			mode: loadSettings(storageKey).mode
+			mode: loadSettings(storageKey, settingDefaults).mode
 		});
 		return next;
 	};
@@ -5944,8 +5963,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-BlWfKjRg.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-BlWfKjRg.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.2",
   "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,16 @@ 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
+  /**
+   * The mode a first-time visitor starts in (default 'light'; 'system' follows their device). Any
+   * site can start dark: every theme has a dark twin. Visitors can still change it.
+   */
+  defaultMode?: 'light' | 'dark' | 'system'
 }
 
 export interface ThemeProviderProps {