How can i run some dom manip before rendering?

Hello I want to run some javascript that will change classes of the body tag before display. How can I do this?

6 Replies

CarterOP•4mo ago

// @refresh reload
//
import { mount, StartClient } from "@solidjs/start/client";
const theme = JSON.parse(localStorage.getItem("theme")!!)
if (theme) {
  document.body.classList.add("dark")
} else {
  document.body.classList.remove("dark")
}
mount(() => <StartClient />, document.getElementById("app")!);

// @refresh reload
//
import { mount, StartClient } from "@solidjs/start/client";
const theme = JSON.parse(localStorage.getItem("theme")!!)
if (theme) {
  document.body.classList.add("dark")
} else {
  document.body.classList.remove("dark")
}
mount(() => <StartClient />, document.getElementById("app")!);

basically I have a localStorage value that determines if the site will be dark or light themed, but for some reason this code runs after it has already rendered leading to a flickering effect.

Madaxen86•4mo ago

Did you configure the app to be client only? Because by default, solid start will render the page on the server and there is no local storage why you‘d better be using a cookie. Or have a look at kobalte.dev‘s implementation: https://github.com/kobaltedev/kobalte/tree/main/packages/core/src/color-mode

GitHub

kobalte/packages/core/src/color-mode at main · kobaltedev/kobalte

A UI toolkit for building accessible web apps and design systems with SolidJS. - kobaltedev/kobalte

CarterOP•4mo ago

can you help me make it client only? idk how to do that

Madaxen86•4mo ago

For just one component there’s the clientOnly helper: https://docs.solidjs.com/solid-start/reference/client/client-only For the entire app: app.config.ts Add: { ssr: false }

CarterOP•4mo ago

holy cow it works thank youuu

Madaxen86•4mo ago

You’re welcome ☺️

Gaming

Programming

How can i run some dom manip before rendering?