#Dynamic Theme Management Across Multiple Pages in Angular

25 messages · Page 1 of 1 (latest)

bold marlin
#

I have three pages: Dashboard, User, and Nutrition. Each of these pages will support three different themes: Minimal, Maximal, and Medium. The data displayed on each page will stay the same, but the HTML structure and CSS styling of the page will change depending on the selected theme.

While the HTML of components on each page, such as the Dashboard, will remain consistent across themes, only the CSS will vary based on the chosen theme.

To implement this, I plan to use an event emitter that notifies subscribed components of when the theme changes. Additionally, I’ll create a wrapper component for each group of related pages (e.g., one for the Dashboard, another for the User page, and one for the Nutrition page) - I believe this is known as the bridge pattern. This wrapper is purely responsible for listening to the emitter and modifying its internal view whenever the theme changes.

Since this causes a rebuild of the inner view, I was wondering if it was possible to just pass down the chosen theme to components used within the newly rendered page and then selecting a specific style sheet based off that theme or if i needed to also make the components subscribers of my theme event emitter.

Any recommendations or suggestions would be greatly appreciated. Still new to all this so if I've overcomplicated things then please let me know.

crystal heath
#

It's possible to pass the theme as input to child components, yes. Changing the stylesheet based on this input is not really something that is supported natively (unles you display a completely different grandchild component for every theme).
But this is not how theming is done. Usually, you use CSS rules and properties to adapt to the new style. And it's also probably possible to not change the HTML structure in most cases.

bold marlin
#

"Usually, you use CSS rules and properties to adapt to the new style", don't you need still need a trigger to cause the new CSS to be applied?

#

"it's also probably possible to not change the HTML structure in most cases.". I'm not too sure what this is in reference too. Is it to do with me wanting to dynamically change the page's HTML and CSS based on a chosen theme at runtime?

crystal heath
#

You can't change the html structure of a page dynamically at runtime?
Of course you can. That's what ANgular is all about. But CSS experts can probably render the same information with the same HTML structure differently using just CSS.
don't you need still need a trigger to cause the new CSS to be applied?
You can have something like

<section class="container" [theme]="theTheme()">

and in your CSS, define rules such as

section.container[theme=dark] {
  ...
}
section.container[theme=light] {
  ...
}

Or you can react to input changes in your component to chnge the value of CSS properties that are used in the CSS.

bold marlin
#

In this code here <section class="container" [theme]="theTheme()">, would my app have a global theme variable that get changed based on user input, and all theTheme() does is fetch the value in this global variable?

crystal heath
#

You could do that, or theTheme could be an input of your component.

#

Not a global variable though: an injected service.

bold marlin
#

Ah but wouldn't i still need something to prompt the component, telling it that the theme variable has changed?

crystal heath
#

That's what signals do. And inputs are signals. And services can hold signals. And since the template reads the signal, it's updated when the signal changes.

bold marlin
#

Is signal synonymous with event emiters in this context? Reading what you said, I would imagine they are but i just wanna be sure i'm using the terminology correctly

crystal heath
#

Signals are what holds all the mutable state of a modern angular app. They're also used for inouts. Learn the essentials.

bold marlin
#

Thanks for the direction, I'll take a look through what you mentioned earlier

#

could be that im still confused cause im unsure of the meaning of the terms used

crystal heath
#

If you don't know what a signal is, either you know Angular very well, but you haven't learnt anything new about it since Angular 16 or something, or you haven't learnt the basics of Angular yet. Signals are at the core of Angular now, so you should really take some time to learn about them, by reading the official doc or a good up-to-date book.

bold marlin
#

I get what you're saying but I'm just finding it hard to figure out what is considered the basics. I got thrown into an angular project and I've got a deadline coming up which is why I'm sorta just learning what i need as i go + i didn't see an "essentials" section in the book you mentioned, so i sorta used that more as a way to figure out stuff after i knew what i didn't know

#

I'll take some time to go through the essentials part of the doc you just linked

crystal heath
#

I literally linked to the official documentation about the essentials of signals, whose url is https://angular.dev/essentials/signals, and which is part of a section (visible on the top left of the page) named "Essentials". You can start by reading this page and all the pages inside that section, accessible from the left pane.

#

But I would also have a discussion with your manager: your task is a pretty hard task for a newbie who doesn't have experience with Angular yet and who maybe is also struggling with CSS.

bold marlin
bold marlin
#

Just to clarify as well, after running through the essentials, should my next step be going through this "https://angular.dev/guide/di"?

Angular

The web development framework for building modern apps.

#

After which i should have most of what i need to figure out how to achieve my goal?

crystal heath
#

DI is essential, yes, and you'll need it. Whether or not you'll have averything you need, I don't know. The hardest challenge here is probably not the Angular part. It's the CSS part.