Function App

examples/solid/devtools-ui/src/index.tsx:23–60

()

const darkThemeMq = window.matchMedia('(prefers-color-scheme: dark)')

function App() {
  const [theme, setTheme] = createSignal<TanStackDevtoolsTheme>(
    darkThemeMq.matches ? 'dark' : 'light',
  )

  createEffect(() => {
    document.documentElement.setAttribute('data-theme', theme())
  })

  const toggleTheme = () => {
    setTheme((prev) => (prev === 'dark' ? 'light' : 'dark'))
  }

  return (
    <div class="app-shell">
      <button type="button" class="theme-toggle" onClick={toggleTheme}>
        Toggle theme ({theme()})
      </button>

      <ThemeContextProvider theme={theme()}>
        <h1>Json tree - dates</h1>

        <div class="json-tree-container">
          <JsonTree
            value={JsonTreeDate}
            config={{ dateFormat: 'DD-MM-YYYY' }}
          />
        </div>

        <h1>Json tree - paths</h1>

        <div class="json-tree-container">
          <JsonTree value={JsonTreePath} collapsePaths={['foo']} />
        </div>
      </ThemeContextProvider>
    </div>
  )
}

const root = document.getElementById('root')
if (root) render(() => <App />, root)