Theme Provider ShadcnUi Qwik

[limpid dagger]

**This is my code that i tried to translate it but it doesn't worked for me 😦 **

import {
  component$,
  createContextId,
  useSignal,
  useContextProvider,
  useContext,
  useTask$
} from '@builder.io/qwik'

type Theme = 'dark' | 'light' | 'system'

interface ThemeContextProps {
  theme: Theme
  setTheme: (theme: Theme) => void
}

type ThemeProviderState = {
  theme: Theme
  setTheme: (theme: Theme) => void
}

const MyThemeContext = createContextId<ThemeContextProps>('theme-context')

export const ThemeProvider = component$<{}>(() => {
  const defaultTheme: Theme = 'system'
  const storageKey = 'app-ui-theme'

  const themeSignal = useSignal<Theme>(
    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
  )
  const setTheme = (newTheme: Theme) => {
    localStorage.setItem(storageKey, newTheme)
    themeSignal.value = newTheme
  }

  useTask$(() => {
    const root = window.document.documentElement

    root.classList.remove('light', 'dark')

    const currentTheme = themeSignal.value

    if (currentTheme === 'system') {
      const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
        ? 'dark'
        : 'light'

      root.classList.add(systemTheme)
      return
    }

    root.classList.add(currentTheme)
  })

  const value = {
    theme: themeSignal.value,
    setTheme
  }
  useContextProvider(MyThemeContext, value)
  return null
})

export const useTheme = component$(() => {
  const context = useContext<ThemeProviderState>(MyThemeContext)

  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider')

  return null
})

[slow fossil]

Never in my life used shadcn, but I can suggest putting the shadcn's provider in the root element you're currently qwikifying and try out.

[limpid dagger]

qwikifying is not just usefull for react component ?

[slow fossil]

isn't shadcn written in react components? i'm sorry if it's officially supported, I repeat, never used it in my life. just trying to help, that's all.

[limpid dagger]

no problem @slow fossil 🙂 do you know someone who already used shadcnui theme provider context in qwik app?

[slow fossil]

take a look into FlatMapIO/shadcn-music-qwik or maybe x-ploration-of-mars/qwikcn

[limpid dagger]

yes i already looked at this 2 repositories 😅

[broken terrace]

import {
  component$,
  createContextId,
  useSignal,
  useContextProvider,
  useContext,
  $,
  Slot,
  useOnDocument
} from '@builder.io/qwik'

import Cookies from 'js-cookie'

type Theme = 'dark' | 'light' | 'system'

interface ThemeContextProps {
  theme: Theme
  setTheme: (theme: Theme) => void
}

const MyThemeContext = createContextId<ThemeContextProps>('theme-context')

export const ThemeProvider = component$<{}>(() => {
  const defaultTheme: Theme = 'system'
  const storageKey = 'app-ui-theme'

  const themeSignal = useSignal<Theme>(() => (Cookies.get(storageKey) as Theme) || defaultTheme)

  const setTheme = $((newTheme: any) => {
    Cookies.set(storageKey, newTheme)
    themeSignal.value = newTheme

     const root = window.document.documentElement

      root.classList.remove('light', 'dark')

      const currentTheme = themeSignal.value

      if (currentTheme === 'system') {
        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
          ? 'dark'
          : 'light'

        root.classList.add(systemTheme)
        return
      }

      root.classList.add(currentTheme)  
    })


  useOnDocument(
    'DOMContentLoaded',
    $(() => {
      themeSignal.value = Cookies.get(storageKey) as Theme || defaultTheme;

      const root = window.document.documentElement

      root.classList.remove('light', 'dark')

      const currentTheme = themeSignal.value

      if (currentTheme === 'system') {
        const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches
          ? 'dark'
          : 'light'

        root.classList.add(systemTheme)
        return
      }

      root.classList.add(currentTheme)
    })
  )

  const value = {
    theme: themeSignal.value,
    setTheme
  }
  useContextProvider(MyThemeContext, value)
  return <Slot />
})

export const useTheme = () => {
  const context = useContext(MyThemeContext)

  if (context === undefined) throw new Error('useTheme must be used within a ThemeProvider')

  return context
}

just needed to think a litle @limpid dagger

but yeah you forgot to call the part that change the theme