vueless 0.0.519 → 0.0.520

package/composables/useDarkMode.ts

@@ -1,5 +1,6 @@
 import { onMounted, ref, nextTick } from "vue";
-import { DARK_MODE_SELECTOR } from "../constants.js";
+import { COLOR_MODE_KEY, DARK_MODE_SELECTOR } from "../constants.js";
+import { ColorMode } from "../types.js";
 
 export function useDarkMode() {
   const isDarkMode = ref(false);
@@ -7,9 +8,10 @@ export function useDarkMode() {
   onMounted(async () => {
     await nextTick(() => {
       const isDarkModeClass = document.documentElement.classList.contains(DARK_MODE_SELECTOR);
-      const isDarkModeCache = !!Number(localStorage.getItem(DARK_MODE_SELECTOR));
+      const cashedDarkMode = localStorage.getItem(COLOR_MODE_KEY) as ColorMode | null;
+      const isDarkModeCashed = cashedDarkMode !== null && cashedDarkMode === ColorMode.Dark;
 
-      isDarkMode.value = isDarkModeCache || isDarkModeClass;
+      isDarkMode.value = isDarkModeCashed || isDarkModeClass;
 
       window.addEventListener("darkModeChange", ((event: CustomEvent) => {
         isDarkMode.value = Boolean(event.detail);

package/constants.js

@@ -12,6 +12,7 @@ export const GRAYSCALE_COLOR = "grayscale";
 /* Vueless dark mode */
 export const DARK_MODE_SELECTOR = "vl-dark";
 export const LIGHT_MODE_SELECTOR = "vl-light";
+export const COLOR_MODE_KEY = "vl-color-mode";
 
 /* Vueless defaults */
 export const DEFAULT_BRAND_COLOR = GRAYSCALE_COLOR;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.519",
+  "version": "0.0.520",
   "license": "MIT",
   "description": "Vue Styleless UI Component Library, powered by Tailwind CSS.",
   "keywords": [

package/types.ts

@@ -39,6 +39,12 @@ import type { LocaleOptions } from "./adatper.locale/vueless.ts";
 
 export type TemplateRefElement = MaybeRef<HTMLElement | HTMLElement[] | null>;
 
+export enum ColorMode {
+  Dark = "dark",
+  Light = "light",
+  Auto = "auto",
+}
+
 export interface ExtendedKeyClasses {
   [key: string]: Ref<string>;
 }
@@ -80,9 +86,9 @@ export interface ThemeConfig {
   ringOffsetColorDark?: string;
 
   /**
-   * Default dark mode state.
+   * Default color mode.
    */
-  darkMode?: boolean;
+  colorMode?: `${ColorMode}`;
 }
 
 export interface Config extends ThemeConfig {

package/utils/theme.ts

@@ -20,37 +20,89 @@ import {
   COOL_COLOR,
   GRAY_COLOR,
   LIGHT_MODE_SELECTOR,
+  COLOR_MODE_KEY,
 } from "../constants.js";
 
 import type {
-  ThemeConfig,
   GrayColors,
   BrandColors,
   VuelessCssVariables,
   TailwindColorShades,
+  Config,
 } from "../types.ts";
 
-type DefaultColors = typeof tailwindColors;
+import { ColorMode } from "../types.ts";
 
-interface InternalThemeConfig extends ThemeConfig {
-  systemDarkMode?: boolean;
-}
+type DefaultColors = typeof tailwindColors;
 
 export function themeInit() {
   if (isSSR) return;
 
-  const prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
+  const themeSettings = {
+    colorMode: vuelessConfig.colorMode,
+    ringOffsetColorLight: vuelessConfig.ringOffsetColorLight,
+    ringOffsetColorDark: vuelessConfig.ringOffsetColorDark,
+    ringOffset: vuelessConfig.ringOffset,
+    ring: vuelessConfig.ring,
+    gray: vuelessConfig.gray,
+    brand: vuelessConfig.gray,
+    rounding: vuelessConfig.rounding,
+  } as Config;
+
+  setTheme(themeSettings);
 
-  setTheme({ systemDarkMode: prefersColorSchemeDark.matches, darkMode: vuelessConfig.darkMode });
+  const prefersColorSchemeDark = window.matchMedia("(prefers-color-scheme: dark)");
 
   prefersColorSchemeDark.addEventListener("change", (event) =>
-    setTheme({ systemDarkMode: event.matches, darkMode: vuelessConfig.darkMode }),
+    setTheme({ ...themeSettings, colorMode: event.matches ? ColorMode.Dark : ColorMode.Light }),
   );
 }
 
-export function setTheme(config: InternalThemeConfig = {}) {
-  const isDarkMode = setDarkMode(config);
+export function setColorMode(colorMode: `${ColorMode}`) {
+  const cashedColorMode = localStorage.getItem(COLOR_MODE_KEY) as ColorMode | null;
+
+  const isDark = colorMode === ColorMode.Dark;
+  const isLight = colorMode === ColorMode.Light;
+  const isAuto = colorMode === ColorMode.Auto;
+
+  let newColorMode = ColorMode.Auto;
+
+  if (isAuto) {
+    const isSystemDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+    newColorMode = isSystemDark ? ColorMode.Dark : ColorMode.Light;
+  }
+
+  if (isLight) {
+    newColorMode = ColorMode.Light;
+  }
+
+  if (isDark) {
+    newColorMode = ColorMode.Dark;
+  }
+
+  if (cashedColorMode !== null) {
+    newColorMode = cashedColorMode;
+  }
+
+  if (newColorMode === ColorMode.Dark) {
+    document.documentElement.classList.remove(LIGHT_MODE_SELECTOR);
+    document.documentElement.classList.add(DARK_MODE_SELECTOR);
+  } else {
+    document.documentElement.classList.remove(DARK_MODE_SELECTOR);
+    document.documentElement.classList.add(LIGHT_MODE_SELECTOR);
+  }
+
+  isAuto
+    ? localStorage.removeItem(COLOR_MODE_KEY)
+    : localStorage.setItem(COLOR_MODE_KEY, newColorMode);
+}
+
+export function setTheme(config: Config = {}) {
+  setColorMode(config.colorMode || ColorMode.Auto);
+
   const rounding = config?.rounding ?? vuelessConfig.rounding ?? DEFAULT_ROUNDING;
+  const isDarkMode = document.documentElement.classList.contains(DARK_MODE_SELECTOR);
 
   let brand: BrandColors | GrayColors | typeof GRAY_COLOR =
     config?.brand ?? vuelessConfig.brand ?? DEFAULT_BRAND_COLOR;
@@ -139,40 +191,6 @@ export function setTheme(config: InternalThemeConfig = {}) {
   return rootVariables;
 }
 
-function setDarkMode(config: InternalThemeConfig) {
-  config?.darkMode === undefined
-    ? isCSR && localStorage.removeItem(DARK_MODE_SELECTOR)
-    : isCSR && localStorage.setItem(DARK_MODE_SELECTOR, Number(config?.darkMode).toString());
-
-  let storedDarkMode = null;
-
-  if (isCSR) {
-    storedDarkMode = localStorage.getItem(DARK_MODE_SELECTOR);
-  }
-
-  let isDarkMode = !!(config?.darkMode ?? vuelessConfig.darkMode ?? config?.systemDarkMode);
-
-  if (storedDarkMode !== null) {
-    isDarkMode = !!Number(storedDarkMode);
-  }
-
-  if (isCSR) {
-    const darkModeChange = new CustomEvent("darkModeChange", { detail: isDarkMode });
-
-    if (isDarkMode) {
-      document.documentElement.classList.remove(LIGHT_MODE_SELECTOR);
-      document.documentElement.classList.add(DARK_MODE_SELECTOR);
-    } else {
-      document.documentElement.classList.remove(DARK_MODE_SELECTOR);
-      document.documentElement.classList.add(LIGHT_MODE_SELECTOR);
-    }
-
-    window.dispatchEvent(darkModeChange);
-  }
-
-  return isDarkMode;
-}
-
 export function convertHexInRgb(hex: string) {
   const color = hex.replace(/#/g, "");
 

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.519",
+  "version": "0.0.520",
   "contributions": {
     "html": {
       "description-markup": "markdown",