Theme Color generator api

mhartington · October 7, 2022, 2:08pm

The color generator itself is using JS to calculate those values.

ionic-team/ionic-docs/blob/5eb3f12c49de1b6d6b69132f9dac7e734cade396/src/components/page/theming/_utils/color.ts

export interface RGB {
  b: number;
  g: number;
  r: number;
}

export interface HSL {
  h: number;
  l: number;
  s: number;
}

const componentToHex = (c: number) => {
  const hex = c.toString(16);
  return hex.length === 1 ? `0${hex}` : hex;
};

const expandHex = (hex: string): string => {
  const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, (_m, r, g, b) => {

This file has been truncated. show original

If you want to have a theme that users can set, you’ll need to find a way to save those values to local storage or something similar to persist it through out the app

Topic		Replies	Views
Understanding how Ionic 5 uses colors Ionic Framework	0	353	June 10, 2020
How to implement a color generator in a website Ionic Framework	4	1022	January 25, 2021
Retriving color from JSON API and display this in html file ionic-v3	2	641	April 19, 2019
Color generator ionic-v3	0	585	February 1, 2019
Ionic 4 - custom theme - primary color is not working Ionic Framework	8	6812	November 22, 2020

Theme Color generator api

Related topics