@ankjs/react-ui 1.0.13 → 1.0.15

package/dist/constants/colors.d.ts

@@ -1,38 +1,38 @@
 export declare const light: {
     primary: string;
     primaryColor: string;
+    pageBg: string;
     mainBgColor: string;
     backgroundColor: string;
     secondryBgColor: string;
-    pageBg: string;
     color: string;
 };
 export declare const dark: {
     primary: string;
     primaryColor: string;
     mainBgColor: string;
-    secondryBgColor: string;
     pageBg: string;
     backgroundColor: string;
+    secondryBgColor: string;
     color: string;
 };
 declare const colors: {
     light: {
         primary: string;
         primaryColor: string;
+        pageBg: string;
         mainBgColor: string;
         backgroundColor: string;
         secondryBgColor: string;
-        pageBg: string;
         color: string;
     };
     dark: {
         primary: string;
         primaryColor: string;
         mainBgColor: string;
-        secondryBgColor: string;
         pageBg: string;
         backgroundColor: string;
+        secondryBgColor: string;
         color: string;
     };
 };

package/dist/index.cjs

@@ -12,24 +12,106 @@ const AnkThemeContext = react.createContext(undefined);
 const ColorContext = react.createContext(undefined);
 
 const useSystemTheme = () => {
-    const [sysTheme, setSysTheme] = react.useState(window.matchMedia('(prefers-color-scheme: dark)').matches
+    const theme = window.matchMedia('(prefers-color-scheme: dark)').matches
         ? "dark"
-        : "light");
+        : "light";
+    const [sysTheme, setSysTheme] = react.useState(theme);
     react.useEffect(() => {
         const media = window.matchMedia('(prefers-color-scheme: dark)');
         const handleChange = () => {
             setSysTheme(media.matches ? "dark" : "light");
         };
+        handleChange();
         media.addEventListener("change", handleChange);
         return () => media.removeEventListener("change", handleChange);
-    }, []);
+    }, [theme, setSysTheme]);
     return sysTheme;
 };
 
-//import MainUiView from './MainUiView';
+const light = {
+    primary: 'red',
+    primaryColor: 'red',
+    pageBg: '#8d8d8d',
+    mainBgColor: '#fff',
+    backgroundColor: '#f0f0f0',
+    secondryBgColor: '#808080',
+    color: '#000',
+};
+const dark = {
+    primary: 'red',
+    primaryColor: 'red',
+    mainBgColor: '#000',
+    pageBg: '#333',
+    backgroundColor: '#444',
+    secondryBgColor: '808080',
+    color: '#eee',
+};
+
+const defaultColorsObject = {
+    light: light,
+    dark: dark,
+};
+const useThemeColors = () => {
+    const context = react.useContext(AnkThemeContext);
+    if (!context) {
+        throw new Error(` * useThemeColors must be used within a AnkThemeProvider * \n like this - \n import  AnkThemeProvider  from '@ankjs/react-ui;
+    
+        <AnkThemeProvider>
+         <App />
+        </AnkThemeProvider>
+    `);
+    }
+    const { light: light$1, dark: dark$1 } = react.useContext(ColorContext) ?? defaultColorsObject;
+    const reLight = light$1 ?? light;
+    const reDark = dark$1 ?? dark;
+    const theme = context.theme || undefined;
+    const themeMode = context.themeType || undefined;
+    if (theme === undefined || themeMode === undefined) {
+        throw new Error(` * useThemeColors must be used within a AnkThemeProvider * \n like this - \n import  AnkThemeProvider  from '@ankjs/react-ui;
+    
+        <AnkThemeProvider>
+         <App />
+        </AnkThemeProvider>
+    `);
+    }
+    else if (context.theme === "light") {
+        return {
+            ...reLight,
+            themeMode,
+        };
+    }
+    else if (context.theme === "dark") {
+        return {
+            ...reDark,
+            themeMode,
+        };
+    }
+    return {
+        ...reLight,
+        themeMode: "light"
+    };
+};
+
+const MainUiView = (props) => {
+    const { children, autoApply, style, overflow, backgroundColor, fontolor } = props;
+    const colors = useThemeColors();
+    const { mainBgColor, color } = useThemeColors();
+    const bg = autoApply ? mainBgColor : backgroundColor;
+    const text = autoApply ? color : fontolor;
+    const styleContener = {
+        backgroundColor: bg,
+        color: text,
+        height: "100dvh",
+        width: "100%",
+        overflow,
+        ...style
+    };
+    return (jsxRuntime.jsxs("div", { style: styleContener, children: [JSON.stringify(colors), children] }));
+};
+
 const AnkThemeProvider = (props) => {
     //PROPERTY 
-    const { children, colorsObjectProvide = "", colorsObject = "", defaultThemeMode = "system", style = {} } = props;
+    const { children, colorsObjectProvide = "", colorsObject = "", defaultThemeMode = "system", autoApply = true, style = {}, overflow = 'scroll', backgroundColor = "pink", color = "black" } = props;
     // SYSTEM THEME MODE 🪝 
     // Assumed returns 'light' | 'dark'
     const system = useSystemTheme();
@@ -39,24 +121,30 @@ const AnkThemeProvider = (props) => {
     const [theme, setTheme] = react.useState(initialActiveTheme);
     // State for the user's selected preference
     const [themeType, setThemeType] = react.useState(defaultThemeMode);
+    react.useEffect(() => {
+        if (defaultThemeMode === 'system') {
+            setTheme(initialActiveTheme);
+            return setThemeType('system');
+        }
+    }, [defaultThemeMode, initialActiveTheme, setTheme, setThemeType]);
     const setDarkTheme = react.useCallback(() => {
         if (theme === 'dark')
             return;
         setThemeType('dark');
-        setTheme('dark');
+        return setTheme('dark');
     }, [theme, setThemeType, setTheme]);
     const setLightTheme = react.useCallback(() => {
         if (theme === 'light')
             return;
         setThemeType('light');
-        setTheme('light');
+        return setTheme('light');
     }, [theme, setThemeType, setTheme]);
     const setSystemTheme = react.useCallback(() => {
         if (themeType === 'system')
             return;
         setThemeType('system');
-        setTheme(system);
-    }, [theme, setTheme, system, setThemeType]);
+        return setTheme(system);
+    }, [themeType, setTheme, system, setThemeType]);
     // Memoize the context value to prevent unnecessary re-renders in consumers
     const contextValue = react.useMemo(() => ({
         theme,
@@ -65,13 +153,13 @@ const AnkThemeProvider = (props) => {
         setDarkTheme,
         setLightTheme,
         setSystemTheme,
-    }), [theme, setTheme, setDarkTheme, setLightTheme, setSystemTheme]);
+    }), [theme, themeType, setTheme, setDarkTheme, setLightTheme, setSystemTheme]);
     // WONER COLOUR OBJECT 
     const colorObj = react.useMemo(() => ({
         ...colorsObject,
         ...colorsObjectProvide,
     }), [colorsObject, colorsObjectProvide]);
-    return (jsxRuntime.jsx(AnkThemeContext.Provider, { value: contextValue, children: jsxRuntime.jsx(ColorContext.Provider, { value: colorObj, children: children }) }));
+    return (jsxRuntime.jsx(AnkThemeContext.Provider, { value: contextValue, children: jsxRuntime.jsx(ColorContext.Provider, { value: colorObj, children: jsxRuntime.jsx(MainUiView, { autoApply: autoApply, style: style, overflow: overflow, backgroundColor: backgroundColor, fontolor: color, children: children }) }) }));
 };
 
 exports.default = AnkThemeProvider;

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/contexts/AnkThemeContext.ts","../src/hook/useSystemTheme.ts","../src/providers/AnkThemeProvider.tsx"],"sourcesContent":[null,null,null],"names":["createContext","useState","useEffect","useCallback","useMemo","_jsx"],"mappings":"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"}
+{"version":3,"file":"index.cjs","sources":["../src/contexts/AnkThemeContext.ts","../src/hook/useSystemTheme.ts","../src/constants/colors.ts","../src/hook/useThemeColors.ts","../src/providers/MainUiView.tsx","../src/providers/AnkThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null,null],"names":["createContext","useState","useEffect","defaultLight","defaultDark","useContext","light","dark","_jsxs","useCallback","useMemo","_jsx"],"mappings":"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"}

package/dist/index.esm.js

@@ -1,5 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useEffect, useCallback, useMemo } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { createContext, useState, useEffect, useContext, useCallback, useMemo } from 'react';
 
 /**
  * Copyright (c) [2026] [ankjs]
@@ -8,24 +8,106 @@ const AnkThemeContext = createContext(undefined);
 const ColorContext = createContext(undefined);
 
 const useSystemTheme = () => {
-    const [sysTheme, setSysTheme] = useState(window.matchMedia('(prefers-color-scheme: dark)').matches
+    const theme = window.matchMedia('(prefers-color-scheme: dark)').matches
         ? "dark"
-        : "light");
+        : "light";
+    const [sysTheme, setSysTheme] = useState(theme);
     useEffect(() => {
         const media = window.matchMedia('(prefers-color-scheme: dark)');
         const handleChange = () => {
             setSysTheme(media.matches ? "dark" : "light");
         };
+        handleChange();
         media.addEventListener("change", handleChange);
         return () => media.removeEventListener("change", handleChange);
-    }, []);
+    }, [theme, setSysTheme]);
     return sysTheme;
 };
 
-//import MainUiView from './MainUiView';
+const light = {
+    primary: 'red',
+    primaryColor: 'red',
+    pageBg: '#8d8d8d',
+    mainBgColor: '#fff',
+    backgroundColor: '#f0f0f0',
+    secondryBgColor: '#808080',
+    color: '#000',
+};
+const dark = {
+    primary: 'red',
+    primaryColor: 'red',
+    mainBgColor: '#000',
+    pageBg: '#333',
+    backgroundColor: '#444',
+    secondryBgColor: '808080',
+    color: '#eee',
+};
+
+const defaultColorsObject = {
+    light: light,
+    dark: dark,
+};
+const useThemeColors = () => {
+    const context = useContext(AnkThemeContext);
+    if (!context) {
+        throw new Error(` * useThemeColors must be used within a AnkThemeProvider * \n like this - \n import  AnkThemeProvider  from '@ankjs/react-ui;
+    
+        <AnkThemeProvider>
+         <App />
+        </AnkThemeProvider>
+    `);
+    }
+    const { light: light$1, dark: dark$1 } = useContext(ColorContext) ?? defaultColorsObject;
+    const reLight = light$1 ?? light;
+    const reDark = dark$1 ?? dark;
+    const theme = context.theme || undefined;
+    const themeMode = context.themeType || undefined;
+    if (theme === undefined || themeMode === undefined) {
+        throw new Error(` * useThemeColors must be used within a AnkThemeProvider * \n like this - \n import  AnkThemeProvider  from '@ankjs/react-ui;
+    
+        <AnkThemeProvider>
+         <App />
+        </AnkThemeProvider>
+    `);
+    }
+    else if (context.theme === "light") {
+        return {
+            ...reLight,
+            themeMode,
+        };
+    }
+    else if (context.theme === "dark") {
+        return {
+            ...reDark,
+            themeMode,
+        };
+    }
+    return {
+        ...reLight,
+        themeMode: "light"
+    };
+};
+
+const MainUiView = (props) => {
+    const { children, autoApply, style, overflow, backgroundColor, fontolor } = props;
+    const colors = useThemeColors();
+    const { mainBgColor, color } = useThemeColors();
+    const bg = autoApply ? mainBgColor : backgroundColor;
+    const text = autoApply ? color : fontolor;
+    const styleContener = {
+        backgroundColor: bg,
+        color: text,
+        height: "100dvh",
+        width: "100%",
+        overflow,
+        ...style
+    };
+    return (jsxs("div", { style: styleContener, children: [JSON.stringify(colors), children] }));
+};
+
 const AnkThemeProvider = (props) => {
     //PROPERTY 
-    const { children, colorsObjectProvide = "", colorsObject = "", defaultThemeMode = "system", style = {} } = props;
+    const { children, colorsObjectProvide = "", colorsObject = "", defaultThemeMode = "system", autoApply = true, style = {}, overflow = 'scroll', backgroundColor = "pink", color = "black" } = props;
     // SYSTEM THEME MODE 🪝 
     // Assumed returns 'light' | 'dark'
     const system = useSystemTheme();
@@ -35,24 +117,30 @@ const AnkThemeProvider = (props) => {
     const [theme, setTheme] = useState(initialActiveTheme);
     // State for the user's selected preference
     const [themeType, setThemeType] = useState(defaultThemeMode);
+    useEffect(() => {
+        if (defaultThemeMode === 'system') {
+            setTheme(initialActiveTheme);
+            return setThemeType('system');
+        }
+    }, [defaultThemeMode, initialActiveTheme, setTheme, setThemeType]);
     const setDarkTheme = useCallback(() => {
         if (theme === 'dark')
             return;
         setThemeType('dark');
-        setTheme('dark');
+        return setTheme('dark');
     }, [theme, setThemeType, setTheme]);
     const setLightTheme = useCallback(() => {
         if (theme === 'light')
             return;
         setThemeType('light');
-        setTheme('light');
+        return setTheme('light');
     }, [theme, setThemeType, setTheme]);
     const setSystemTheme = useCallback(() => {
         if (themeType === 'system')
             return;
         setThemeType('system');
-        setTheme(system);
-    }, [theme, setTheme, system, setThemeType]);
+        return setTheme(system);
+    }, [themeType, setTheme, system, setThemeType]);
     // Memoize the context value to prevent unnecessary re-renders in consumers
     const contextValue = useMemo(() => ({
         theme,
@@ -61,13 +149,13 @@ const AnkThemeProvider = (props) => {
         setDarkTheme,
         setLightTheme,
         setSystemTheme,
-    }), [theme, setTheme, setDarkTheme, setLightTheme, setSystemTheme]);
+    }), [theme, themeType, setTheme, setDarkTheme, setLightTheme, setSystemTheme]);
     // WONER COLOUR OBJECT 
     const colorObj = useMemo(() => ({
         ...colorsObject,
         ...colorsObjectProvide,
     }), [colorsObject, colorsObjectProvide]);
-    return (jsx(AnkThemeContext.Provider, { value: contextValue, children: jsx(ColorContext.Provider, { value: colorObj, children: children }) }));
+    return (jsx(AnkThemeContext.Provider, { value: contextValue, children: jsx(ColorContext.Provider, { value: colorObj, children: jsx(MainUiView, { autoApply: autoApply, style: style, overflow: overflow, backgroundColor: backgroundColor, fontolor: color, children: children }) }) }));
 };
 
 export { AnkThemeProvider as default };

package/dist/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../src/contexts/AnkThemeContext.ts","../src/hook/useSystemTheme.ts","../src/providers/AnkThemeProvider.tsx"],"sourcesContent":[null,null,null],"names":["_jsx"],"mappings":";;;AAAA;;AAEG;AASI,MAAM,eAAe,GAAG,aAAa,CAA+B,SAAS,CAAC;AAG9E,MAAM,YAAY,GAAG,aAAa,CAA2B,SAAS,CAAC;;ACT9E,MAAM,cAAc,GAAG,MAAK;AAG1B,IAAA,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CACtC,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC,CAAC;AAChD,UAAE;UACA,OAAO,CACZ;IAGD,SAAS,CAAC,MAAK;QACb,MAAM,KAAK,GAAG,MAAM,CAAC,UAAU,CAAC,8BAA8B,CAAC;QAC/D,MAAM,YAAY,GAAG,MAAK;AACxB,YAAA,WAAW,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC;AAC/C,QAAA,CAAC;AACD,QAAA,KAAK,CAAC,gBAAgB,CAAC,QAAQ,EAAE,YAAY,CAAC;QAC9C,OAAO,MAAM,KAAK,CAAC,mBAAmB,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChE,CAAC,EAAE,EAAE,CAAC;AAEN,IAAA,OAAO,QAAQ;AACjB,CAAC;;ACXD;AAOA,MAAM,gBAAgB,GAAG,CAAC,KAAyB,KAAI;;IAErD,MAAM,EACJ,QAAQ,EACR,mBAAmB,GAAG,EAAE,EACxB,YAAY,GAAG,EAAE,EACjB,gBAAgB,GAAG,QAAQ,EAC3B,KAAK,GAAG,EAAE,EACX,GAAG,KAAK;;;AAKT,IAAA,MAAM,MAAM,GAAG,cAAc,EAAE;;AAG/B,IAAA,MAAM,kBAAkB,GAAG,gBAAgB,KAAK,QAAQ,GAAG,MAAM,GAAG,gBAAgB;;IAIpF,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAmB,kBAAkB,CAAC;;IAGxE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAA8B,gBAAgB,CAAC;AAIzF,IAAA,MAAM,YAAY,GAAG,WAAW,CAAC,MAAK;QACpC,IAAI,KAAK,KAAK,MAAM;YAAE;QACtB,YAAY,CAAC,MAAM,CAAC;QACpB,QAAQ,CAAC,MAAM,CAAC;IAClB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;AAEnC,IAAA,MAAM,aAAa,GAAG,WAAW,CAAC,MAAK;QACrC,IAAI,KAAK,KAAK,OAAO;YAAE;QACvB,YAAY,CAAC,OAAO,CAAC;QACrB,QAAQ,CAAC,OAAO,CAAC;IACnB,CAAC,EAAE,CAAC,KAAK,EAAE,YAAY,EAAE,QAAQ,CAAC,CAAC;AAEnC,IAAA,MAAM,cAAc,GAAG,WAAW,CAAC,MAAK;QACtC,IAAI,SAAS,KAAK,QAAQ;YAAE;QAC5B,YAAY,CAAC,QAAQ,CAAC;QACtB,QAAQ,CAAC,MAAM,CAAC;IAClB,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,CAAC,CAAC;;AAK3C,IAAA,MAAM,YAAY,GAAG,OAAO,CAC1B,OAAO;QACL,KAAK;QACL,SAAS;QACT,QAAQ;QAGR,YAAY;QACZ,aAAa;QACb,cAAc;AACf,KAAA,CAAC,EACF,CAAC,KAAK,EAAE,QAAQ,EAAE,YAAY,EAAE,aAAa,EAAE,cAAc,CAAC,CAC/D;;AAKD,IAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,OAAO;AAC9B,QAAA,GAAG,YAAY;AACf,QAAA,GAAG,mBAAmB;AACvB,KAAA,CAAC,EAAE,CAAC,YAAY,EAAE,mBAAmB,CAAC,CAAC;IAIxC,QACEA,IAAC,eAAe,CAAC,QAAQ,EAAA,EAAC,KAAK,EAAE,YAAY,EAAA,QAAA,EAC3CA,GAAA,CAAC,YAAY,CAAC,QAAQ,EAAA,EACpB,KAAK,EAAE,QAAQ,YAEd,QAAQ,EAAA,CACa,EAAA,CACC;AAE/B;;;;"}
+{"version":3,"file":"index.esm.js","sources":["../src/contexts/AnkThemeContext.ts","../src/hook/useSystemTheme.ts","../src/constants/colors.ts","../src/hook/useThemeColors.ts","../src/providers/MainUiView.tsx","../src/providers/AnkThemeProvider.tsx"],"sourcesContent":[null,null,null,null,null,null],"names":["defaultLight","defaultDark","light","dark","_jsxs","_jsx"],"mappings":"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"}

package/dist/providers/MainUiView.d.ts

@@ -0,0 +1,3 @@
+import type { MainPropsType } from '../types/mainViewType';
+declare const MainUiView: (props: MainPropsType) => import("react/jsx-runtime").JSX.Element;
+export default MainUiView;

package/dist/types/mainViewType.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, ReactNode } from 'react';
+export type MainPropsType = {
+    children: ReactNode;
+    autoApply: boolean;
+    style?: CSSProperties;
+    overflow?: CSSProperties['overflow'];
+    fontolor?: CSSProperties['color'];
+};

package/dist/types/themeTypes.d.ts

@@ -10,11 +10,14 @@ export interface ThemeHookReturn extends ColorPalette {
     themeMode: ThemeModeType | undefined;
 }
 export type ThemeProviderProps = {
+    children: ReactNode;
     colorsObjectProvide?: any;
     colorsObject?: any;
+    autoApply?: boolean;
     defaultThemeMode?: 'light' | 'dark' | 'system';
     style?: CSSProperties;
-    children: ReactNode;
+    overflow?: CSSProperties['overflow'];
+    color?: CSSProperties['color'];
 };
 export type ThemeContextType = {
     theme?: 'light' | 'dark' | 'system';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ankjs/react-ui",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "A simple React UI Library",
   "main": "index.js",
   "module": "dist/index.esm.js",

package/src/constants/colors.ts

@@ -2,22 +2,22 @@
 
 
 export const light = {
-  primary: '#eee',
+  primary: 'red',
   primaryColor: 'red',
+  pageBg: '#8d8d8d',
   mainBgColor: '#fff',
   backgroundColor: '#f0f0f0',
   secondryBgColor: '#808080',
-  pageBg: '#8d8d8d',
   color: '#000',
 }
 
 export const dark = {
-  primary: '#b30303',
+  primary: 'red',
   primaryColor: 'red',
-  mainBgColor: '#009',
-  secondryBgColor: '808080',
+  mainBgColor: '#000',
   pageBg: '#333',
   backgroundColor: '#444',
+  secondryBgColor: '808080',
   color: '#eee',
 }
 

package/src/hook/useSystemTheme.ts

@@ -2,25 +2,27 @@ import { useEffect, useState } from "react";
 
 
 
-type Theme = "light" | "dark";
+
+
 const useSystemTheme = () => {
 
+  const theme = window.matchMedia('(prefers-color-scheme: dark)').matches
+    ? "dark"
+    : "light"
 
   const [sysTheme, setSysTheme] = useState<'light' | 'dark'>(
-    window.matchMedia('(prefers-color-scheme: dark)').matches
-      ? "dark"
-      : "light"
+    theme
   );
 
-
   useEffect(() => {
     const media = window.matchMedia('(prefers-color-scheme: dark)');
     const handleChange = () => {
       setSysTheme(media.matches ? "dark" : "light");
     };
+    handleChange();
     media.addEventListener("change", handleChange);
     return () => media.removeEventListener("change", handleChange);
-  }, []);
+  }, [theme, setSysTheme]);
 
   return sysTheme;
 };

package/src/hook/useThemeColors.ts

@@ -15,6 +15,7 @@ const defaultColorsObject = {
 const useThemeColors = (): ThemeContextType | undefined => {
   const context = useContext(AnkThemeContext);
 
+
   if (!context) {
     throw new Error(` * useThemeColors must be used within a AnkThemeProvider * \n like this - \n import  AnkThemeProvider  from '@ankjs/react-ui;
     
@@ -23,13 +24,18 @@ const useThemeColors = (): ThemeContextType | undefined => {
         </AnkThemeProvider>
     `)
   };
+
+
   const { light, dark } = useContext(ColorContext) ?? defaultColorsObject;
 
   const reLight = light ?? defaultLight;
   const reDark = dark ?? defaultDark;
 
   const theme = context.theme || undefined;
-  const themeMode = context.themeMode || undefined;
+  const themeMode = context.themeType || undefined;
+
+
+  
 
   if (theme === undefined || themeMode === undefined) {
     throw new Error(` * useThemeColors must be used within a AnkThemeProvider * \n like this - \n import  AnkThemeProvider  from '@ankjs/react-ui;

package/src/providers/AnkThemeProvider.tsx

@@ -5,14 +5,14 @@ Copyright (c) [2026] [ankjs]
 Filename: AnkThemeProvider.tsx
 */
 
-import React, { useState, useCallback, useMemo } from 'react';
+import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import {
   AnkThemeContext,
   ColorContext
 } from '../contexts/AnkThemeContext';
 import type { ThemeProviderProps } from '../types/themeTypes';
 import useSystemTheme from '../hook/useSystemTheme';
-//import MainUiView from './MainUiView';
+import MainUiView from './MainUiView';
 
 
 
@@ -26,7 +26,11 @@ const AnkThemeProvider = (props: ThemeProviderProps) => {
     colorsObjectProvide = "",
     colorsObject = "",
     defaultThemeMode = "system",
-    style = {}
+    autoApply = true,
+    style = {},
+    overflow = 'scroll',
+    backgroundColor = "pink",
+    color = "black"
   } = props;
 
 
@@ -46,23 +50,32 @@ const AnkThemeProvider = (props: ThemeProviderProps) => {
 
 
 
+  useEffect(() => {
+    if (defaultThemeMode === 'system') {
+      setTheme(initialActiveTheme);
+      return setThemeType('system');
+    };
+  }, [defaultThemeMode, initialActiveTheme, setTheme, setThemeType]);
+
+
+
   const setDarkTheme = useCallback(() => {
     if (theme === 'dark') return;
     setThemeType('dark');
-    setTheme('dark');
+    return setTheme('dark');
   }, [theme, setThemeType, setTheme]);
 
   const setLightTheme = useCallback(() => {
     if (theme === 'light') return;
     setThemeType('light');
-    setTheme('light');
+    return setTheme('light');
   }, [theme, setThemeType, setTheme]);
 
   const setSystemTheme = useCallback(() => {
     if (themeType === 'system') return
     setThemeType('system');
-    setTheme(system);
-  }, [theme, setTheme, system, setThemeType]);
+    return setTheme(system);
+  }, [themeType, setTheme, system, setThemeType]);
 
 
 
@@ -72,13 +85,11 @@ const AnkThemeProvider = (props: ThemeProviderProps) => {
       theme,
       themeType,
       setTheme,
-      
-      
       setDarkTheme,
       setLightTheme,
       setSystemTheme,
     }),
-    [theme, setTheme, setDarkTheme, setLightTheme, setSystemTheme],
+    [theme, themeType, setTheme, setDarkTheme, setLightTheme, setSystemTheme],
   );
 
 
@@ -96,7 +107,16 @@ const AnkThemeProvider = (props: ThemeProviderProps) => {
       <ColorContext.Provider
         value={colorObj}
       >
-        {children}
+        <MainUiView
+          autoApply={autoApply}
+          style={style}
+          overflow={overflow}
+          backgroundColor={backgroundColor}
+          fontolor={color}
+        >
+
+          {children}
+        </MainUiView>
       </ColorContext.Provider>
     </AnkThemeContext.Provider>
   )
@@ -104,76 +124,4 @@ const AnkThemeProvider = (props: ThemeProviderProps) => {
 export default AnkThemeProvider;
 
 /*
-
-import React, { useState, useCallback, useMemo, ReactNode } from 'react';
-
-interface ThemeProviderProps {
-  children: ReactNode; // Fixes the "Type {} is not assignable to ReactNode" error
-  colorsObjectProvide?: any;
-  colorsObject?: any;
-  defaultThemeMode?: 'light' | 'dark' | 'system';
-  style?: React.CSSProperties;
-}
-
-const AnkThemeProvider = (props: ThemeProviderProps) => {
-  const {
-    children,
-    colorsObjectProvide = {},
-    colorsObject = {},
-    defaultThemeMode = "system",
-  } = props;
-
-  const system = useSystemTheme(); // Assumed returns 'light' | 'dark'
-
-  // Determine initial active theme
-  const initialActiveTheme = defaultThemeMode === "system" ? system : defaultThemeMode;
-
-  // State for the active visual mode
-  const [theme, setTheme] = useState<'light' | 'dark'>(initialActiveTheme as 'light' | 'dark');
-  
-  // State for the user's selected preference
-  const [themeType, setType] = useState<'light' | 'dark' | 'system'>(defaultThemeMode);
-
-  const setDarkTheme = useCallback(() => {
-    setTheme('dark');
-    setType('dark');
-  }, []);
-
-  const setLightTheme = useCallback(() => {
-    setTheme('light');
-    setType('light');
-  }, []);
-
-  const setSystemTheme = useCallback(() => {
-    setType('system');
-    setTheme(system);
-  }, [system]);
-
-
-
-  const contextValue = useMemo(
-    () => ({
-      theme,
-      themeType,
-      setTheme,
-      setDarkTheme,
-      setLightTheme,
-      setSystemTheme,
-    }),
-    [theme, themeType, setTheme, setDarkTheme, setLightTheme, setSystemTheme],
-  );
-
-  const colorObj = useMemo(() => ({
-    ...colorsObject,
-    ...colorsObjectProvide,
-  }), [colorsObject, colorsObjectProvide]);
-
-  return (
-    <AnkThemeContext.Provider value={contextValue}>
-      <ColorContext.Provider value={colorObj}>
-        {children}
-      </ColorContext.Provider>
-    </AnkThemeContext.Provider>
-  );
-};
-*/
+      */

package/src/providers/MainUiView.tsx

@@ -0,0 +1,48 @@
+import useThemeColors from '../hook/useThemeColors';
+import type { MainPropsType } from '../types/mainViewType';
+
+
+
+
+
+
+const MainUiView = (props: MainPropsType) => {
+  const {
+    children,
+    autoApply,
+    style,
+    overflow,
+    backgroundColor,
+    fontolor
+  } = props;
+
+  const colors = useThemeColors();
+  const {
+    mainBgColor, color
+  } = useThemeColors();
+
+  const bg = autoApply ? mainBgColor : backgroundColor
+  const text = autoApply ? color: fontolor ;
+
+  const styleContener = {
+    backgroundColor: bg,
+    color: text,
+    height: "100dvh",
+    width: "100%",
+    overflow,
+    ...style
+  }
+
+
+  return (
+    <div
+      style={styleContener}
+    >
+      {
+        JSON.stringify(colors)
+      }
+      {children}
+    </div>
+  )
+};
+export default MainUiView;

package/src/types/mainViewType.ts

@@ -0,0 +1,14 @@
+
+
+
+
+import React, { CSSProperties, ReactNode } from 'react'
+
+
+export type MainPropsType = {
+  children: ReactNode,
+  autoApply: boolean,
+  style?: CSSProperties,
+  overflow?: CSSProperties['overflow'],
+  fontolor?: CSSProperties['color']
+}

package/src/types/themeTypes.ts

@@ -13,11 +13,14 @@ export interface ThemeHookReturn extends ColorPalette {
 }
 
 export type ThemeProviderProps = {
+  children: ReactNode; // Fixes the "Type {} is not assignable to ReactNode" error
   colorsObjectProvide?: any,
   colorsObject?: any,
+  autoApply?: boolean,
   defaultThemeMode?: 'light' | 'dark' | 'system',
   style?: CSSProperties,
-  children: ReactNode; // Fixes the "Type {} is not assignable to ReactNode" error
+  overflow?: CSSProperties['overflow']
+  color?: CSSProperties['color']
 }
 
 export type ThemeContextType = {

package/src/providers/MainUiView.jsx

@@ -1,33 +0,0 @@
-
-import useThemeColors from '../hook/useThemeColors'
-
-
-
-
-export default function MainUiView(props) {
-  const {
-    children,
-    autoColorApply,
-    colorObject,
-    style,
-    others,
-  } = props;
-
-  const colors = useThemeColors();
-
-
-  const styleContener = {
-    ...style
-  };
-
-  return (
-    <div
-      style={styleContener}
-    >
-      {
-        JSON.stringify(colors)
-      }
-      {children}
-    </div>
-  )
-};