#Dynamic styles/css from database while still retaining sever side rendering from App directory?

38 messages · Page 1 of 1 (latest)

merry marten
#

Is there a way to dynamically set some CSS in the <head> via <style> in the app router? I assume this could be in done pages router as we had access to <Head> which we now don't have in app router.

I've got page styles saved to the users theme in the database and on particular page load I want to apply this theming without any page/css flashing and loading on the client side.

Since I can't pass anything to the layout file I feel like potentially my only option is to pull <html> and <body> out of my layout and directly into the page possibly unless there's an alternative solution.

generateMetadata() has no styling option

gaunt vaporBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

shrewd rivet
#

where the theme of page comes from cms (api request)

#

so one page is full blue, one is full white for example

#

possible with App router

#

so i would make it ISR if you can or

#

I have this inside layout.js

# 
<script
          dangerouslySetInnerHTML={{
            __html: `
              try {
                    if (localStorage.getItem("theme") != null && localStorage.getItem("theme") === 'true') {
                        document.documentElement.classList.add('theme-dark')
                    } else {
                        document.documentElement.classList.remove('theme-dark')
                    }
                } catch (_) {}
            `,
          }}
        >
</script>
#

this is simple logic to control theme with 0 flash of colours 🙂

merry marten
#

lets say I have multiple users, which have all picked different background colors for their page

#

so it's not just a case of "dark" or "light"

shrewd rivet
#

yep i would do thus

#

set up ur themes using html variable

#

so what i did was pass a bunch of theme variables to a wrapper div

# 
html
  body
    div.wrapper.blue-white (apply --colours here)
merry marten
#

ok so you essentially removed the theming process from the body and into your wrapper

shrewd rivet
#

so in ur css u can have:

.wrapper {
 &.blue-white {
   --colours: red
 }

 &.blue-red {
   --colours: blue
 }
}```
#

correct

merry marten
#

yeah I was trying to do it at body level, but maybe I just cant

shrewd rivet
#

as you can see

#

this is a site i have worked on.

#

no flash

#

theme of blue/white is controlled at server (content management) level

merry marten
#

wrapper it is then

shrewd rivet
#

screenshot is inside Skeleton.jsx

#

then this is how it looks at page.js level

#

because data/page is server component

#

we have theme value as pre-rendered' basically

#

so no flash 🙂

merry marten
#

yeah that's what I'm after

#

shame I can't get access to the head though, would of made my life easier ha

shrewd rivet
#

trust

merry marten
#

thanks for the tip

shrewd rivet
#

no worries if u cant get it wortking