Update ColorThemeSwitch and its unit test

Author: TamiTakamiya

ansible_ai_connect_chatbot/src/App.test.tsx

@@ -371,19 +371,15 @@ test("Color theme switch", async () => {
   if (colorThemeSwitch) {
     expect(colorThemeSwitch.checked).toBeFalsy();
 
-    const { getComputedStyle } = window;
-    const showLight = view.container.querySelector(".show-light");
-    const showDark = view.container.querySelector(".show-dark");
-    expect(getComputedStyle(showLight!).display).toEqual("block");
-
-    // NOTE: seem to be broken?
-    // expect(getComputedStyle(showDark!).display).toEqual("none")
+    const htmlElementClassList =
+      document.getElementsByTagName("html")[0].classList;
+    expect(htmlElementClassList.length).equals(0);
 
     await colorThemeSwitch.click();
     expect(colorThemeSwitch.checked).toBeTruthy();
 
-    // expect(getComputedStyle(showLight!).display).toEqual("none")
-    expect(getComputedStyle(showDark!).display).toEqual("block");
+    expect(htmlElementClassList.length).equals(1);
+    expect(htmlElementClassList[0]).equals("pf-v6-theme-dark");
   }
 });
 

ansible_ai_connect_chatbot/src/ColorThemeSwitch/ColorThemeSwitch.tsx

@@ -8,13 +8,13 @@ export const ColorThemeSwitch = () => {
     checked: boolean,
   ) => {
     setIsChecked(checked);
-    const element = document.getElementsByTagName("html");
-    element[0].classList.remove(
-      checked ? "pf-v6-theme-light" : "pf-v6-theme-dark",
-    );
-    element[0].classList.add(
-      checked ? "pf-v6-theme-dark" : "pf-v6-theme-light",
-    );
+    const htmlElementClassList =
+      document.getElementsByTagName("html")[0].classList;
+    if (checked) {
+      htmlElementClassList.add("pf-v6-theme-dark");
+    } else {
+      htmlElementClassList.remove("pf-v6-theme-dark");
+    }
   };
 
   return (