Steps to customize the color scheme in your Angular application without relying on external libraries

Question

Steps to customize the color scheme in your Angular application without relying on external libraries

Is there a way to dynamically change the color scheme of an Angular app by clicking a button, without relying on any additional UI libraries?

Here's what I'm trying to achieve - I have two files, dark.scss and light.scss, each containing variables like the example below but with different values.

:root{
    --body-bg:#fff;   
    --frn-bg-color:#fff;
    --input-border-color:#787878;
    //...
}

In the styles.scss file, these variables are called using @require './theme/dark.scss';. However, this setup is static and requires rebuilding the app to switch to @require './theme/light.scss';.

So my question is, how can I dynamically switch between theme files and apply a new color scheme without having to rebuild the entire app?

angular typescript

Answer 1

Answer №1

To enhance your CSS, consider using body.light and body.dark instead of :root as selectors for defining variables. With this approach, you can dynamically switch between light and dark themes using JavaScript by manipulating the document.body.classList.

For instance:

.light {
    --body-bg: #fff;   
    --frn-bg-color: #fff;
    --input-border-color: #787878;
    //...
}

and then in your script:

document.body.classList
  // Remove existing classes
  .remove('light', 'dark')
  // Add the desired theme
  .add('light');

Answer 2

To enhance your CSS, consider using body.light and body.dark instead of :root as selectors for defining variables. With this approach, you can dynamically switch between light and dark themes using JavaScript by manipulating the document.body.classList.

For instance:

.light {
    --body-bg: #fff;   
    --frn-bg-color: #fff;
    --input-border-color: #787878;
    //...
}

and then in your script:

document.body.classList
  // Remove existing classes
  .remove('light', 'dark')
  // Add the desired theme
  .add('light');

Steps to customize the color scheme in your Angular application without relying on external libraries

Answer №1

Similar questions

Difficulty accessing class functions from the test application in Node.js NPM and Typescript

Utilizing ElementRef to create collapsible elements in Angular

The compilation process encountered an error: TypeError - Unable to access property 'exclude' as it is undefined (awesome-typescript-loader)

Tips for embedding a script snippet into an Angular HTML file

Rendering a sanitized string with interpolation in Angular 2

Trouble shooting: Angular 2 Http get request not firing

Resolving parent routes in Angular 2

Angular: How can the dropdown arrow in 'ng-select' be eliminated?

Issues encountered when attempting to add a new user on Firebase

Encountering an issue with the constructor function type for @types/tapable/index

How to share data between two different components in Angular 6

Is there a way to disable tslint warnings for npm linked packages?

Learning Angular2: What is the mechanism behind the automatic incrementation of the ID variable in this particular section?

Navigate to a different page using the A-g Grid router when a row is

What is the proper way to utilize variables in package.json with npm version 7.x.x?

Unable to capture Metamask Errors

Is there a way to determine the specific child property types of a custom Generic type extension?

Create a separate variable for every component within a custom module in Angular 4

Creating a dynamic variable reference for ngModel in Angular 2 and above allows for flexible data binding

Switch between div elements in Angular 2 while dynamically changing their values depending on a specific condition for displaying or hiding