Export useIsDark instead of useColorScheme because it's more convenient

Author: garronej

src/bin/css_to_ts/colorOptions.ts

@@ -432,14 +432,7 @@ export function generateGetColorOptionsTsCode(colorOptions: ColorOption[]) {
     });
 
     return [
-        `export function getColorOptions(colorScheme: ColorScheme) {`,
-        `    const isDark: boolean = (() => {`,
-        `        switch (colorScheme) {`,
-        `            case "dark": return true;`,
-        `            case "light": return false;`,
-        `        }`,
-        `    })();`,
-        ``,
+        `export function getColorOptions(isDark: boolean) {`,
         `    return {`,
         multiReplace({
             "input": JSON.stringify(obj, null, 2),

src/bin/css_to_ts/css_to_ts.ts

@@ -28,7 +28,6 @@ fs.writeFileSync(
     Buffer.from(
         [
             warningMessage,
-            `import type { ColorScheme } from "../../useColorScheme";`,
             ``,
             generateGetColorOptionsTsCode(colorOptions),
             ``,

src/lib/index.ts

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

src/lib/useColorScheme.ts

@@ -38,6 +38,29 @@ const useColorSchemeServerSide: UseColorScheme = () => {
 
 export const useColorScheme = isBrowser ? useColorSchemeClientSide : useColorSchemeServerSide;
 
+//NOTE: Just because it's more convenient to have a boolean than "light" | "dark"
+export function useIsDark() {
+    const { colorScheme, setColorScheme } = useColorScheme();
+
+    const setIsDark = useConstCallback((isDark: boolean | "system") =>
+        setColorScheme(typeof isDark !== "boolean" ? isDark : isDark ? "dark" : "light")
+    );
+
+    const isDark = (() => {
+        switch (colorScheme) {
+            case "dark":
+                return true;
+            case "light":
+                return false;
+        }
+    })();
+
+    return {
+        isDark,
+        setIsDark
+    };
+}
+
 function getCurrentColorSchemeFromHtmlAttribute(): ColorScheme {
     if (!isBrowser) {
         return "light";

src/test/frameworks/cra/src/App.tsx

@@ -2,18 +2,18 @@
 import artworkLightSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/light.svg";
 import artworkDarkSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/dark.svg";
 import artworkSystemSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/system.svg";
-import { useColorScheme } from "@codegouvfr/react-dsfr";
+import { useIsDark } from "@codegouvfr/react-dsfr";
 
 export function App() {
 
-    const { colorScheme, setColorScheme } = useColorScheme();
+    const { isDark, setIsDark } = useIsDark();
 
     return (
         <>
-            <h1>Color Scheme: {colorScheme}</h1>
-            <button onClick={() => setColorScheme("dark")}>Set color scheme to dark</button>
-            <button onClick={() => setColorScheme("light")}>Set color scheme to light</button>
-            <button onClick={() => setColorScheme("system")}>Set color scheme to system</button>
+            <h1>Color Scheme: {isDark ? "dark" : "light"}</h1>
+            <button onClick={() => setIsDark(true)}>Set color scheme to dark</button>
+            <button onClick={() => setIsDark(false)}>Set color scheme to light</button>
+            <button onClick={() => setIsDark("system")}>Set color scheme to system</button>
             <header role="banner" className="fr-header">
                 <div className="fr-header__body">
                     <div className="fr-container">

src/test/frameworks/next/pages/index.tsx

@@ -2,18 +2,18 @@
 import ArtworkLightSvg from "@codegouvfr/react-dsfr/dsfr/artwork/light.svg";
 import ArtworkDarkSvg from "@codegouvfr/react-dsfr/dsfr/artwork/dark.svg";
 import ArtworkSystemSvg from "@codegouvfr/react-dsfr/dsfr/artwork/system.svg";
-import { useColorScheme } from "@codegouvfr/react-dsfr";
+import { useIsDark } from "@codegouvfr/react-dsfr";
 
-export default function Index() {
+export default function App() {
 
-    const { colorScheme, setColorScheme } = useColorScheme();
+    const { isDark, setIsDark } = useIsDark();
 
     return (
         <>
-            <h1>Color Scheme: {colorScheme}</h1>
-            <button onClick={() => setColorScheme("dark")}>Set color scheme to dark</button>
-            <button onClick={() => setColorScheme("light")}>Set color scheme to light</button>
-            <button onClick={() => setColorScheme("system")}>Set color scheme to system</button>
+            <h1>Color Scheme: {isDark ? "dark" : "light"}</h1>
+            <button onClick={() => setIsDark(true)}>Set color scheme to dark</button>
+            <button onClick={() => setIsDark(false)}>Set color scheme to light</button>
+            <button onClick={() => setIsDark("system")}>Set color scheme to system</button>
             <header role="banner" className="fr-header">
                 <div className="fr-header__body">
                     <div className="fr-container">

src/test/frameworks/next/yarn.lock

@@ -39,7 +39,10 @@
     regenerator-runtime "^0.13.4"
 
 "@codegouvfr/react-dsfr@file:../../../../dist":
-  version "0.0.0"
+  version "0.0.6"
+  dependencies:
+    "@gouvfr/dsfr" "1.7.2"
+    tsafe "^1.0.1"
 
 "@eslint/eslintrc@^0.4.2":
   version "0.4.3"
@@ -56,6 +59,11 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@gouvfr/dsfr@1.7.2":
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/@gouvfr/dsfr/-/dsfr-1.7.2.tgz#c522fce21a14989a10e30583160118c39c9c05d1"
+  integrity sha512-hPNtz+gHcc8m7ZPANxSOFMz4Ap+M9FHOudqoMR/+Kjl5FCOqwA6u/aoYnMJ8KqedS1k5XThFMp7jiktr53qXYw==
+
 "@humanwhocodes/config-array@^0.5.0":
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.5.0.tgz#1407967d4c6eecd7388f83acf1eaf4d0c6e58ef9"
@@ -1746,6 +1754,11 @@ to-regex-range@^5.0.1:
   dependencies:
     is-number "^7.0.0"
 
+tsafe@^1.0.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/tsafe/-/tsafe-1.1.1.tgz#8d6998c726f8c63c518e1d1e283bbcd282a2b9a9"
+  integrity sha512-Ogblm3uh0dVupcCcC4IT641rnSQ7CW9IO0q8yIncG8OBe4DDXEqGtUE8LWf7+0MK1qZGeWPWEqSxlLzY2xzREA==
+
 tsconfig-paths@^3.14.1:
   version "3.14.1"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.1.tgz#ba0734599e8ea36c862798e920bcf163277b137a"

src/test/frameworks/vite/src/App.tsx

@@ -2,18 +2,18 @@
 import artworkLightSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/light.svg";
 import artworkDarkSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/dark.svg";
 import artworkSystemSvgUrl from "@codegouvfr/react-dsfr/dsfr/artwork/system.svg";
-import { useColorScheme } from "@codegouvfr/react-dsfr";
+import { useIsDark } from "@codegouvfr/react-dsfr";
 
 export function App() {
 
-    const { colorScheme, setColorScheme } = useColorScheme();
+    const { isDark, setIsDark } = useIsDark();
 
     return (
         <>
-            <h1>Color Scheme: {colorScheme}</h1>
-            <button onClick={() => setColorScheme("dark")}>Set color scheme to dark</button>
-            <button onClick={() => setColorScheme("light")}>Set color scheme to light</button>
-            <button onClick={() => setColorScheme("system")}>Set color scheme to system</button>
+            <h1>Color Scheme: {isDark ? "dark" : "light"}</h1>
+            <button onClick={() => setIsDark(true)}>Set color scheme to dark</button>
+            <button onClick={() => setIsDark(false)}>Set color scheme to light</button>
+            <button onClick={() => setIsDark("system")}>Set color scheme to system</button>
             <header role="banner" className="fr-header">
                 <div className="fr-header__body">
                     <div className="fr-container">