ChrisThornham Comments - Answer Overflow

ChrisThornham

•Created by ChrisThornham on 4/25/2024 in #support

Help Me Stop Theme Flashing In SolidStart

The lightTheme and darkTheme values imported from my config file are just the DaisyUI theme strings like:

export const lightTheme = "winter";
export const darkTheme = "night";

export const lightTheme = "winter";
export const darkTheme = "night";

Finally, I use the Theme Context Provider like this:

import { Show, useContext } from "solid-js";
import { BiSolidSun } from "solid-icons/bi";
import { IoMoonSharp } from "solid-icons/io";
import { ThemeContext } from "~/context/theme-context";
import { ThemeContextType } from "~/types/theme";

export default function ThemeSwitch() {
  // CONTEXT ==========================================================
  const { lightTheme, darkTheme, isDarkMode, toggleTheme } = useContext(
    ThemeContext
  ) as ThemeContextType;

  // TSX ==============================================================
  return (
    <Show
      when={isDarkMode()}
      fallback={
        <button class="relative top-0.5 btn btn-xs btn-ghost btn-square">
          <BiSolidSun size={18} onClick={() => toggleTheme(lightTheme)} />
        </button>
      }
    >
      <button class="relative top-0.5 btn btn-xs btn-ghost btn-square">
        <IoMoonSharp size={18} onClick={() => toggleTheme(darkTheme)} />
      </button>
    </Show>
  );
}

import { Show, useContext } from "solid-js";
import { BiSolidSun } from "solid-icons/bi";
import { IoMoonSharp } from "solid-icons/io";
import { ThemeContext } from "~/context/theme-context";
import { ThemeContextType } from "~/types/theme";

export default function ThemeSwitch() {
  // CONTEXT ==========================================================
  const { lightTheme, darkTheme, isDarkMode, toggleTheme } = useContext(
    ThemeContext
  ) as ThemeContextType;

  // TSX ==============================================================
  return (
    <Show
      when={isDarkMode()}
      fallback={
        <button class="relative top-0.5 btn btn-xs btn-ghost btn-square">
          <BiSolidSun size={18} onClick={() => toggleTheme(lightTheme)} />
        </button>
      }
    >
      <button class="relative top-0.5 btn btn-xs btn-ghost btn-square">
        <IoMoonSharp size={18} onClick={() => toggleTheme(darkTheme)} />
      </button>
    </Show>
  );
}

Because isDarkMode() is coming from a Context provider, your app should have the value before the page loads meaning you'll see the correct colors or icons when the page loads. I hope that helps, Chris

23 replies

SSolidJS

•Created by ChrisThornham on 4/25/2024 in #support

Help Me Stop Theme Flashing In SolidStart

It's been close to a year since I've worked on this, so my memory is weak. Here's my full Theme Context provider that stores the theme preference in local storage

import { JSX, createContext, createSignal, onMount } from "solid-js";
import { lightTheme, darkTheme } from "../../../quickstart.config";

// Create and Export the Theme Context
export const ThemeContext = createContext();

interface themeProps {
  children?: JSX.Element | JSX.Element[];
}

export function ThemeProvider(props: themeProps) {
  // STATE ===
  const [isDarkMode, setIsDarkMode] = createSignal(false);

  // LIFECYCLE ===
  onMount(() => {
    // see if there is a theme in local storage.
    const theme = localStorage.getItem("theme");

    // if not, find the users preferred theme.
    if (!theme) {
      if (window.matchMedia("(prefers-color-scheme: dark)")) {
        setIsDarkMode(true);
        toggleTheme(darkTheme);
        localStorage.setItem("theme", darkTheme);
      } else {
        setIsDarkMode(false);
        toggleTheme(lightTheme);
        localStorage.setItem("theme", lightTheme);
      }
    } else {
      if (theme === darkTheme) {
        setIsDarkMode(true);
        toggleTheme(darkTheme);
      } else {
        setIsDarkMode(false);
        toggleTheme(lightTheme);
      }
    }
  });

  // FUNCTIONS ===
  function toggleTheme(colorTheme: string) {
    // update the darkmode state.
    setIsDarkMode(!isDarkMode());
    // data theme is for Daisy
    document.documentElement.setAttribute("data-theme", colorTheme);
    // Save the user's preference in localStorage or a cookie for persistence
    localStorage.setItem("theme", colorTheme);
  }

  // PROVIDER VALUES ===
  const sharedValues = {
    lightTheme,
    darkTheme,
    isDarkMode,
    toggleTheme,
  };

  // TSX ===
  return (
    <ThemeContext.Provider value={sharedValues}>
      {props.children}
    </ThemeContext.Provider>
  );
}

import { JSX, createContext, createSignal, onMount } from "solid-js";
import { lightTheme, darkTheme } from "../../../quickstart.config";

// Create and Export the Theme Context
export const ThemeContext = createContext();

interface themeProps {
  children?: JSX.Element | JSX.Element[];
}

export function ThemeProvider(props: themeProps) {
  // STATE ===
  const [isDarkMode, setIsDarkMode] = createSignal(false);

  // LIFECYCLE ===
  onMount(() => {
    // see if there is a theme in local storage.
    const theme = localStorage.getItem("theme");

    // if not, find the users preferred theme.
    if (!theme) {
      if (window.matchMedia("(prefers-color-scheme: dark)")) {
        setIsDarkMode(true);
        toggleTheme(darkTheme);
        localStorage.setItem("theme", darkTheme);
      } else {
        setIsDarkMode(false);
        toggleTheme(lightTheme);
        localStorage.setItem("theme", lightTheme);
      }
    } else {
      if (theme === darkTheme) {
        setIsDarkMode(true);
        toggleTheme(darkTheme);
      } else {
        setIsDarkMode(false);
        toggleTheme(lightTheme);
      }
    }
  });

  // FUNCTIONS ===
  function toggleTheme(colorTheme: string) {
    // update the darkmode state.
    setIsDarkMode(!isDarkMode());
    // data theme is for Daisy
    document.documentElement.setAttribute("data-theme", colorTheme);
    // Save the user's preference in localStorage or a cookie for persistence
    localStorage.setItem("theme", colorTheme);
  }

  // PROVIDER VALUES ===
  const sharedValues = {
    lightTheme,
    darkTheme,
    isDarkMode,
    toggleTheme,
  };

  // TSX ===
  return (
    <ThemeContext.Provider value={sharedValues}>
      {props.children}
    </ThemeContext.Provider>
  );
}

23 replies

SSolidJS

•Created by ChrisThornham on 2/14/2025 in #support

Can I Block All Back Navigation?

Thank you @Madaxen86 !

3 replies

SSolidJS

•Created by ChrisThornham on 1/21/2025 in #support

Error when evaluating SSR module EVEN WITH ssr: false

If anyone runs into a similar issue in the future, here's the fix. When working with RevenueCat, you have to initialize the service once, preferably at a "high" level in the app. I chose to initialize the service in app.tsx. However, context files cannot access RevenueCat when you initialize the service in app.tsx. Moving any required RevenueCat code inside of a route fixed the problem. I don't know why this happens; it likely has something to do with timing, but this is the solution.

2 replies

SSolidJS