Expose useTheme

Author: garronej

src/bin/css_to_ts/colorOptions.ts

@@ -432,7 +432,14 @@ export function generateGetColorOptionsTsCode(colorOptions: ColorOption[]) {
     });
 
     return [
-        `export function getColorOptions(isDark: boolean) {`,
+        `export function getColorOptions(`,
+        `    params: {`,
+        `        isDark: boolean;`,
+        `    }`,
+        `) {`,
+        ``,
+        `    const { isDark } = params;`,
+        ``,
         `    return {`,
         multiReplace({
             "input": JSON.stringify(obj, null, 2),

src/lib/index.ts

@@ -1,3 +1,5 @@
 export { $colorScheme, useIsDark } from "./useColorScheme";
+export { useTheme } from "./useTheme";
+export type { Theme } from "./useTheme";
 export type { ColorScheme } from "./useColorScheme";
 export * from "./start";

src/lib/useTheme/index.ts

@@ -0,0 +1 @@
+export * from "./useTheme";

src/lib/useTheme/useTheme.ts

@@ -0,0 +1,35 @@
+import { useMemo } from "react";
+import { getColorOptions } from "./generated/getColorOptions";
+import type { ColorOptions } from "./generated/getColorOptions";
+import { getColorDecisions } from "./generated/getColorDecisions";
+import type { ColorDecisions } from "./generated/getColorDecisions";
+import { useIsDark } from "../useColorScheme";
+
+export type Theme = {
+    isDark: boolean;
+    colors: {
+        decisions: ColorDecisions;
+        options: ColorOptions;
+    };
+};
+
+export function useTheme(): Theme {
+    const { isDark } = useIsDark();
+
+    const colorOptions = useMemo(() => getColorOptions({ isDark }), [isDark]);
+
+    const colorDecisions = useMemo(() => getColorDecisions({ colorOptions }), [colorOptions]);
+
+    const theme = useMemo(
+        (): Theme => ({
+            isDark,
+            colors: {
+                "decisions": colorDecisions,
+                "options": colorOptions
+            }
+        }),
+        [isDark]
+    );
+
+    return theme;
+}

src/test/bin/colorOptions/generateGetColorOptionsTsCode.test.ts

@@ -93,7 +93,14 @@ const input: ColorOption[] = [
 ];
 
 const expected = `
-export function getColorOptions(isDark: boolean) {
+export function getColorOptions(
+    params: {
+        isDark: boolean;
+    }
+) {
+
+    const { isDark } = params;
+
     return {
         "name1Name2": {
           "_111": {