Share id for root color scheme theme

Author: garronej

src/lib/darkMode.ts

@@ -8,7 +8,7 @@ export type ColorScheme = "light" | "dark";
 
 export const data_fr_theme = "data-fr-theme";
 export const data_fr_scheme = "data-fr-scheme";
-
+export const rootColorSchemeStyleTagId = "root-color-scheme";
 //export const $colorScheme = createStatefulObservable<ColorScheme>(() => "light");
 export const $isDark = createStatefulObservable(() => false);
 
@@ -121,10 +121,8 @@ export function startObservingColorSchemeHtmlAttribute() {
         const setRootColorScheme = (isDark: boolean) => {
             const colorScheme: ColorScheme = isDark ? "dark" : "light";
 
-            const id = "root-color-scheme";
-
             remove_existing_element: {
-                const element = document.getElementById(id);
+                const element = document.getElementById(rootColorSchemeStyleTagId);
 
                 if (element === null) {
                     break remove_existing_element;
@@ -135,7 +133,7 @@ export function startObservingColorSchemeHtmlAttribute() {
 
             const element = document.createElement("style");
 
-            element.id = id;
+            element.id = rootColorSchemeStyleTagId;
 
             element.innerHTML = `:root { color-scheme: ${colorScheme}; }`;
 

src/next.tsx

@@ -25,6 +25,7 @@ import faviconWebmanifestUrl from "./dsfr/favicon/manifest.webmanifest";
 import {
     data_fr_scheme,
     data_fr_theme,
+    rootColorSchemeStyleTagId,
     isDarkContext,
     refDoPersistDarkModePreferenceWithCookie
 } from "./lib/darkMode";
@@ -195,7 +196,9 @@ export function createNextDsfrIntegrationApi(params: Params): NextDsfrIntegratio
                             href={faviconWebmanifestUrl}
                             crossOrigin="use-credentials"
                         />
-                        <style>{`:root { color-scheme: ${colorScheme}; }`}</style>
+                        <style
+                            id={rootColorSchemeStyleTagId}
+                        >{`:root { color-scheme: ${colorScheme}; }`}</style>
                     </Head>
                     {isBrowser ? (
                         <App {...(props as any)} />