v1.1.1 - ready to publish

README.md

@@ -7,20 +7,20 @@
 ## Installation
 
 [![npm (scoped)](https://img.shields.io/npm/v/dynamic-colors)](https://www.npmjs.com/package/dynamic-colors)
-[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/dynamic-colors)](https://bundlephobia.com/package/[email protected].0)
+[![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/dynamic-colors)](https://bundlephobia.com/package/[email protected].1)
 [![npm](https://img.shields.io/npm/dy/dynamic-colors)](https://www.npmjs.com/package/dynamic-colors)
-[![jsDelivr hits (npm scoped)](https://img.shields.io/jsdelivr/gh/hy/patelka2211/dynamic-colors)](https://cdn.jsdelivr.net/gh/patelka2211/[email protected].0/)
+[![jsDelivr hits (npm scoped)](https://img.shields.io/jsdelivr/gh/hy/patelka2211/dynamic-colors)](https://cdn.jsdelivr.net/gh/patelka2211/[email protected].1/)
 
 To install Dynamic Colors using npm, run the following command:
 
 ```sh
 npm i dynamic-colors
 ```
 
-Alternatively, you can include [Dynnamic Colors's IIFE file](https://cdn.jsdelivr.net/gh/patelka2211/[email protected].0/DynamicColors.js) in your website using a `<script>` tag:
+Alternatively, you can include [Dynnamic Colors's IIFE file](https://cdn.jsdelivr.net/gh/patelka2211/[email protected].1/DynamicColors.js) in your website using a `<script>` tag:
 
 ```html
-<script src="https://cdn.jsdelivr.net/gh/patelka2211/[email protected].0/DynamicColors.js"></script>
+<script src="https://cdn.jsdelivr.net/gh/patelka2211/[email protected].1/DynamicColors.js"></script>
 ```
 
 ## Available APIs

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dynamic-colors",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Dynamic Colors is a JavaScript library that can dynamically generate color theme from a single HEX color and it provides a range of useful APIs for creating, managing, and manipulating color themes.",
   "main": "index.js",
   "module": "index.js",

src/OSTheme.ts

@@ -50,14 +50,14 @@ function OSThemeChangesListenerCallback(event: MediaQueryListEvent): void {
 /**
  * Media query list for monitoring color scheme changes.
  */
-let colorSchemeMediaQuery: MediaQueryList | null;
+let colorSchemeMediaQuery: MediaQueryList | null = null;
 
 /**
  * Common function for setting theme (light or dark).
  * @param {LightOrDark} theme The theme to set (light or dark).
  * @returns {void}
  */
-function commonForSetTheme(theme: LightOrDark): void {
+function commonForLightAndDarkTheme(theme: LightOrDark): void {
     theme3x = theme;
 
     changeThemeInDOM(theme);
@@ -73,41 +73,43 @@ function commonForSetTheme(theme: LightOrDark): void {
 
 /**
  * Sets the theme to light.
- * @returns {void}
+ * @returns {'light'} Returns "light"
  */
-export function setLightTheme(): void {
-    if (theme3x === "light") return;
-    commonForSetTheme("light");
+export function setLightTheme(): "light" {
+    if (theme3x !== "light") commonForLightAndDarkTheme("light");
+    return "light";
 }
 
 /**
  * Sets the theme to dark.
- * @returns {void}
+ * @returns {'dark'} Returns "dark"
  */
-export function setDarkTheme(): void {
-    if (theme3x === "dark") return;
-    commonForSetTheme("dark");
+export function setDarkTheme(): "dark" {
+    if (theme3x !== "dark") commonForLightAndDarkTheme("dark");
+    return "dark";
 }
 
 /**
- * Sets the theme to auto, which adjusts based on the OS theme.
- * @returns {void}
+ * Sets the automatic theme based on the user's system preference.
+ * @returns {LightOrDark} The current theme ("light", "dark").
  */
-export function setAutoTheme(): void {
-    if (theme3x === "auto" || window.matchMedia === undefined) return;
-
+export function setAutoTheme(): LightOrDark {
+    if (window.matchMedia === undefined) return setLightTheme();
+    if (theme3x === "auto" && colorSchemeMediaQuery !== null)
+        return colorSchemeMediaQuery.matches ? "dark" : "light";
     theme3x = "auto";
-
     colorSchemeMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    let theme: LightOrDark = colorSchemeMediaQuery.matches ? "dark" : "light";
 
     // Check initial color scheme
-    changeThemeInDOM(colorSchemeMediaQuery.matches ? "dark" : "light");
+    changeThemeInDOM(theme);
 
     // Watch for changes in color scheme
     colorSchemeMediaQuery.addEventListener(
         "change",
         OSThemeChangesListenerCallback
     );
+    return theme;
 }
 
 /**
@@ -121,12 +123,5 @@ export function themeCycle(): Theme {
     return theme3x;
 }
 
-function runAfterLoad() {
-    setAutoTheme();
-    setTimeout(() => {
-        window.removeEventListener("load", runAfterLoad);
-    }, 1000);
-}
-
-// Event listener function to set the theme to auto on page load.
-window.addEventListener("load", runAfterLoad);
+// Set auto theme as default.
+setAutoTheme();

src/hex2rgb.ts

@@ -3,22 +3,19 @@ export function hex2rgb(hex: string) {
     hex = hex.replace("#", "");
 
     // Ensure the remaining string has a valid length
-    if (hex.length !== 3 && hex.length !== 6) {
-        return;
-    }
+    if (hex.length !== 3 && hex.length !== 6) return;
 
     // Expand shorthand if needed
-    if (hex.length === 3) {
+    if (hex.length === 3)
         hex = hex
             .split("")
             .map((char) => char + char)
             .join("");
-    }
+
+    let colorList: number[] = ["r", "g", "b"].map((value, index) =>
+        parseInt(hex.slice(index * 2, index * 2 + 2), 16)
+    );
 
     // Return the RGB values as an object
-    return {
-        r: parseInt(hex.slice(0, 2), 16),
-        g: parseInt(hex.slice(2, 4), 16),
-        b: parseInt(hex.slice(4, 6), 16),
-    };
+    return { r: colorList[0], g: colorList[1], b: colorList[2] };
 }