Creating a variety of themes with unique color palettes for Angular Material along with custom-designed components

Question

Creating a variety of themes with unique color palettes for Angular Material along with custom-designed components

One of the goals for my app is to have multiple themes, including Angular Material themes, with the ability to define custom colors for specific components and elements that are not part of Angular Material. It's important that when I change a theme, those custom colors also change accordingly. For example, if I have a file that outlines the colors for each theme, I would like to import it into any scss file and use these colors to style different elements:

@import "custom-colors"

.my-elem {
 color: $textColor;
}

When switching themes, I envision applying a particular class to the top-level container of the app. Afterwards, I expect $textColor to take on a new value so that the color of .my-elem updates as well.

Is there a way to accomplish this without having to manually write out different styles for each component affected by the theme change?

css angular sass angular-material

Answer 1

Answer №1

Discover 2 different methods to update themes:
1. Implementing a parent class in the root component
2. Renaming files (similar to what angular material does)

1. Applying CSS using a parent class (See example below)

.light {
 mat-form-field {
  color: white;
 }
 my-custom-element {
 color: white;
 }
}
.dark {
 mat-form-field {
  color: black;
 }
 my-custom-element {
  color: black;
 }
}

When a user switches the theme, simply change the class on your root element like so:

<app-component class="light">

There are multiple approaches for achieving this: Using global variables, Utilizing Event Emitters

2. Renaming file names - splitting the same file into light.css and dark.css

Upon changing the theme, swap out

<link ref="stylesheet" href="light.css">

The Angular approach involves using Renderer 2 Set Attribute

Answer 2

Discover 2 different methods to update themes:
1. Implementing a parent class in the root component
2. Renaming files (similar to what angular material does)

1. Applying CSS using a parent class (See example below)

.light {
 mat-form-field {
  color: white;
 }
 my-custom-element {
 color: white;
 }
}
.dark {
 mat-form-field {
  color: black;
 }
 my-custom-element {
  color: black;
 }
}

When a user switches the theme, simply change the class on your root element like so:

<app-component class="light">

There are multiple approaches for achieving this: Using global variables, Utilizing Event Emitters

2. Renaming file names - splitting the same file into light.css and dark.css

Upon changing the theme, swap out

<link ref="stylesheet" href="light.css">

The Angular approach involves using Renderer 2 Set Attribute

Creating a variety of themes with unique color palettes for Angular Material along with custom-designed components

Answer №1

Similar questions

How can the output directory of the CSS file generated by Compass/Webby be modified?

Guide to importing simulated data from a JSON file in Angular 2 Karma Jasmine tests

Using Cascading Style Sheets (CSS) to make posts appear above an image in a scrolling format

How do you implement a conditional radio button in Angular 2?

Even after the component is destroyed, the subscription to the service observable continues to emit

Having trouble executing a method from a template in Angular 5?

Aligning inline form controls with Bootstrap and Syncfusion widgets

Error in Layout of Navigation Panel and Tabbed Pages

Incorporating Angular: A guide to removing a specific element from an HTML array using line breaks

A guide on how to use Bootstrap to align elements at the center of a div container

How can I retrieve the value of a nested reactive form in Angular?

Looking to display or conceal several divs according to the option selected from a dropdown menu?

The data type 'number' cannot be assigned to the data type 'string'

Encountering difficulties posting an image with Ionic2/3 Social Share

Could really use a hand getting this card grid to be more responsive

Bring JSON into Angular 7 application

Initial page load experiencing issues with paroller.js functionality

Angular Recursive and Nested Reactive Form: Ensuring Continuous Validity, Even in Challenging Situations

Child component is not rendering *ngIf despite using @Import property

best practices for creating space between flexbox items