Dark Mode and Customized colour theme

Global.scss

/* Core CSS required for Ionic components to work properly */

@import "@ionic/angular/css/core.css";

/* Basic CSS for apps built with Ionic */

@import "@ionic/angular/css/normalize.css";
@import "@ionic/angular/css/structure.css";
@import "@ionic/angular/css/typography.css";
@import "@ionic/angular/css/display.css";

/* Optional CSS utils that can be commented out */

@import "@ionic/angular/css/padding.css";
@import "@ionic/angular/css/float-elements.css";
@import "@ionic/angular/css/text-alignment.css";
@import "@ionic/angular/css/text-transformation.css";
@import "@ionic/angular/css/flex-utils.css";

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@tailwind base;
@tailwind components;
@tailwind utilities;

.dark {
--color-primary: #111827;
--color-secondary: red;
--color-primary-10: #FFFFFF;
--color-primary-50: #F9FAFB;
--color-primary-100: #F3F4F6;
--color-primary-200: #E5E7EB;
--color-primary-300: #D1D5DB;
--color-primary-400: #9CA3AF;
--color-primary-500: #6B7280;
--color-primary-600: #4B5563;
--color-primary-700: #374151;
--color-primary-800: #1F2937;
--color-primary-900: #000000;
--color-primary-btn: #fff;
}
.light {
--color-primary: #F9FAFB;
--color-secondary: blue;
--color-primary-10: #000000;
--color-primary-50: #111827;
 --color-primary-100: #1F2937;
--color-primary-200: #374151;
--color-primary-300: #4B5563;
--color-primary-400: #6B7280;
--color-primary-500: #9CA3AF;
--color-primary-600: #D1D5DB;
--color-primary-700: #E5E7EB;
--color-primary-800: #F3F4F6;
--color-primary-900: #FFFFFF;
--color-primary-btn: #000;
}
.orange {
--color-primary-btn: hsl(25, 100%, 50%);
}
.red {
--color-primary-btn: red;
}

 Initialising the colour styling for particular modes which we have dark and light themes.
 Initialising the colour styling for orange and red this modes will change with in the dark or
light mode to change the theme colours.
 This modes will apply to html tag and applying the style throughout the applications
where it is initialized.
Ex: <h1 class=”text-primary-10”>Hello</h1>
text- is tailwind predefined class to change styling for text with in div or tag.
primary-10 is custom class we are going initialize in div or tag.

Tailwind.config.js
/** @type {import('tailwindcss').Config} */
const flowbitePlugin = require('flowbite/plugin');
module.exports = {
darkMode: 'class',
content: [
"./src/**/*.{html,ts}",
"./node_modules/flowbite/**/*.js"
],
theme: {
extend: {
colors: {
primary: "var(--color-primary)",
"primary-btn": "var(--color-primary-btn)",
secondary: "var(--color-secondary)",
"primary-10": "var(--color-primary-10)",
"primary-50": "var(--color-primary-50)",
"primary-100": "var(--color-primary-100)",
"primary-200": "var(--color-primary-200)",
 "primary-300": "var(--color-primary-300)",
"primary-400": "var(--color-primary-400)",
"primary-500": "var(--color-primary-500)",
"primary-600": "var(--color-primary-600)",
"primary-700": "var(--color-primary-700)",
"primary-800": "var(--color-primary-800)",
"primary-900": "var(--color-primary-900)",
}
}
},
plugins: [
flowbitePlugin
],
}

 Initialising the darkMode: ‘class’ to using the global custom classes.

 Creating the theme colours and giving names for it.
 Primary will holds the theme colour of –color-primary from global.scss.
Header.component.html
<div class="absolute top-0">
<div class="flex">
<div>
<button id="theme-toggle" type="button"
class="text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-4
focus:ring-gray-200 rounded-lg text-sm p-2.5">
<svg (click)="toggleMode('dark')" *ngIf="theme != 'dark'" id="theme-toggle-
dark-icon" class="w-5 h-5"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586
10.586z"></path>
</svg>
<svg (click)="toggleMode('light')" *ngIf="theme == 'dark'" id="theme-toggle-
light-icon" class="w-5 h-5"
fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path
d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0
018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414
1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1
1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0
11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414
1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0
011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"
fill-rule="evenodd" clip-rule="evenodd"></path>
</svg>
</button>
 </div>
<div>
<button (click)="toggleMode(theme, 'orange')" class="btn btn-primary text-
sm">Orange Mode</button>
<button (click)="toggleMode(theme, 'red')" class="btn btn-primary text-
sm">Red Mode</button>
</div>
</div>
<div>
<div class="p-4 bg-primary text-secondary">
<p>This is a paragraph that will change colors based on the mode.</p>
</div>
<button type="button"
class="py-1.5 h-10 w-[85vw] bg-primary-btn px-4 justify-center border
border-solid border-blue-600 text-sm text-center inline-flex items-center
text-white rounded-md hover:bg-grey-400 focus:ring-4 focus:outline-none
focus:ring-blue-300">
<svg class="w-4 h-4 text-white mr-1" aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-
linejoin="round" stroke-width="2"
d="M5 12h14m-7 7V5" />
</svg>
New Message
</button>
</div>
</div>

 Create the dark/light mode toggle functionality with using moon/sun icons with
(click)="toggleMode('dark')" and (click)="toggleMode('light')"
Sending the mode to toggleMode function.
 Initialised the classes from tailwind.config.js like bg-primary text-secondary
to add the classes base on the theme mode.
Ex: If theme mode is in dark bg-primary will be --color-primary: #111827;
And text-secondary will be --color-secondary: red;
If theme mode is in light bg-primary will be --color-primary: #F9FAFB;
And text-secondary will be --color-secondary: blue;
 Create the orange and red custom colours toggle functionality with using buttons with
(click)="toggleMode(theme, 'orange')" and (click)="toggleMode(theme, 'red')".
 Initialised the classes from tailwind.config.js like bg-primary-btn
to add the class on the custom button.
Ex: If custom mode is in orange bg-primary-btn will be --color-primary-btn: hsl(25,
100%, 50%);
If custom mode is in red bg-primary-btn will be --color-primary: red;
 Header.component.ts
export class HeaderComponent implements OnInit {
theme = '';
primaryColor = '';
}
ngOnInit() {
this.theme =
localStorage.getItem('color-theme') ||
(!('color-theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light');
this.primaryColor = localStorage.getItem('primary-color') || '';
this.toggleMode(this.theme, this.primaryColor);

toggleMode(theme: string, primaryColor: string = '') {

if (primaryColor)
document.documentElement.classList.add(primaryColor);
if (
(!primaryColor || this.primaryColor != primaryColor) &&
this.primaryColor
)
document.documentElement.classList.remove(this.primaryColor);
document.documentElement.classList.remove(this.theme);
document.documentElement.classList.add(theme);
localStorage.setItem('color-theme', theme);
localStorage.setItem('primary-color', primaryColor);
this.theme = theme;
this.primaryColor = primaryColor;
}
}

 Initialised the empty theme= ‘ ‘ ; and primaryColor=’ ‘; to hold the value from
html.component.html file.
 theme having the dark/light value and primaryColor having the orange or red value.
 First checking the theme mode of the system/browser using this code:
this.theme =
localStorage.getItem('color-theme') ||
(!('color-theme' in localStorage) &&
window.matchMedia('(prefers-color-scheme: dark)').matches
? 'dark'
: 'light');

And store the mode in localStorage.

 Then check for the custom colours using this code:
 this.primaryColor = localStorage.getItem('primary-color') || '';
this.toggleMode(this.theme, this.primaryColor);

check if custom colour is there in localStore otherwise take the empty value.
Send the this.theme (dark/light value) and this.primaryColor(orange/red) value to
toggleMode function.

 Now adding functionality for add or remove the themes/custom classes to html tag using
this code:
toggleMode(theme: string, primaryColor: string = '') {
if (primaryColor)
document.documentElement.classList.add(primaryColor);
if (
(!primaryColor || this.primaryColor != primaryColor) &&
this.primaryColor
)
document.documentElement.classList.remove(this.primaryColor);
document.documentElement.classList.remove(this.theme);
document.documentElement.classList.add(theme);
localStorage.setItem('color-theme', theme);
localStorage.setItem('primary-color', primaryColor);
this.theme = theme;
this.primaryColor = primaryColor;
}

Preview: