Source code - Fluid Topics - Latest

To add the same Custom component:

1. In the HTML panel, copy and paste the following:

   <div id="main" style="display: none;">
     <ft-chip iconVariant="material" icon="wb_sunny" id="light" clickable></ft-chip>
     <ft-chip iconVariant="material" icon="bedtime" id="dark" clickable></ft-chip>
   </div>
   

   The <ft-chip> element can use the same icons available in the Icon component.

2. In the JS panel, use the List themes JavaScript method to get the theme IDs.

   For example:

   console.log(FluidTopicsThemeService.listThemes());
   

   Copy the theme IDs from the browser console.

3. In the JS panel, copy and paste the following:

   const light = document.getElementById("light");
   const dark = document.getElementById("dark");
   
   const main = document.getElementById("main");
   
   const lightTheme = "b2324b77-0c12-44df-be65-8a7725ccb3ca";
   const darkTheme = "8a317675-3109-4957-bfdc-bdc8d67eb5f3";
   
   const activeTheme = await FluidTopicsThemeService.getActiveTheme();
   
   if (activeTheme.id == lightTheme) {
     light.style.display = "none";
   } else {
     dark.style.display = "none";
   }
   main.style.display = "flex";
   
   light.addEventListener("click", () => FluidTopicsThemeService.setTheme(lightTheme));
   dark.addEventListener("click", () => FluidTopicsThemeService.setTheme(darkTheme));
   

4. Replace the lightTheme and darkTheme values.

5. Save the component.

6. Save and publish the page.