Create a general application theme to apply to the all its components #518
-
|
Hi, I wonder know if there is a way to create a general theme like MaterialTheme function that applies the theme to the all components of the application. Can it be imported from Material Theme Builder for example or using the <link rel="stylesheet" href="mystyle.css">(Optional) The relevant location:
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
Unfortunately the link you shared is using Flutter so they are basically taking control of the rendering, which is very powerful but has some disadvantages. If you open up the network tab and take a look, the site is basically 2.5MB at a minimum. Also, it's very hard to debug because so much of the site is hidden in wasm code. If you are OK with the Flutter approach, you should probably not be using Kobweb but instead use Compose Multiplatform for Web, which is doing a similar thing (see also: https://github.com/varabyte/kobweb#what-about-compose-multiplatform-for-web). In traditional HTML / CSS, the way you'd provide an experience of a custom, dynamic theme is by using CSS variables. Please read https://github.com/varabyte/kobweb?tab=readme-ov-file#style-variables for more information about them. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you, I've no idea about Flutter taking control of the rendering, so now I understand what you say and I will read the documentation you shared. Again thank you! |
Beta Was this translation helpful? Give feedback.
-
|
You're welcome! I learned a lot of this stuff myself working on Kobweb, so it's still pretty new to me too. The way I found out that the page you linked to (Material Theme Builder) was using flutter was by right-clicking on the page and inspecting it. I was hoping to find some useful HTML / CSS behavior I could learn from, but all I saw was a Good luck! |
Beta Was this translation helpful? Give feedback.
-
|
Yes I know that develop is very useful to learn a lot of things and is very satisfying do that and for this I'm happy to have found your framework and as new entry in the web development is very easy to use it. I need to do more experience on web! |
Beta Was this translation helpful? Give feedback.
Unfortunately the link you shared is using Flutter so they are basically taking control of the rendering, which is very powerful but has some disadvantages. If you open up the network tab and take a look, the site is basically 2.5MB at a minimum. Also, it's very hard to debug because so much of the site is hidden in wasm code.
If you are OK with the Flutter approach, you should probably not be using Kobweb but instead use Compose Multiplatform for Web, which is doing a similar thing (see also: https://github.com/varabyte/kobweb#what-about-compose-multiplatform-for-web).
In traditional HTML / CSS, the way you'd provide an experience of a custom, dynamic theme is by using CSS variables. Ple…