Theming

Theming

These are the CSS color variables employed in crafting our template design.

Light Mode

src/app/globals.css

:root {
  /*
    - gray/natural colors for texts, borders and disabled elements.
    - If required we can use as background too.
  */
  --gray-0: 255 255 255;    /* #ffffff */
  --gray-50: 250 250 250;   /* #fafafa */
  --gray-100: 241 241 241;  /* #f1f1f1 */
  --gray-200: 227 227 227;  /* #e3e3e3 */
  --gray-300: 223 223 223;  /* #dfdfdf */
  --gray-400: 146 146 146;  /* #929292 */
  --gray-500: 102 102 102;  /* #666666 */
  --gray-600: 72 72 72;     /* #484848 */
  --gray-700: 51 51 51;     /* #333333 */
  --gray-800: 34 34 34;     /* #222222 */
  --gray-900: 17 17 17;     /* #111111 */
  --gray-1000: 0 0 0;       /* #000000 */

  /* ----------------------------------- */
  /* primary/brand colors */
  /* ----------------------------------- */
  --primary-lighter: 215 227 254;   /* #D7E3FE */
  --primary-light: 96 142 251;      /* #608EFB */
  --primary-default: 56 114 250;    /* #3872FA */
  --primary-dark: 29 88 216;        /* #1d58d8 */

  /* ----------------------------------- */
  /* secondary colors */
  /* ----------------------------------- */
  --secondary-lighter: 227 215 252;   /* #e3d7fc */
  --secondary-light: 138 99 210;      /* #8a63d2 */
  --secondary-default: 121 40 202;    /* #7928ca */
  --secondary-dark: 76 40 137;        /* #4c2889 */

  /* ----------------------------------- */
  /* red/error colors */
  /* ----------------------------------- */
  --red-lighter: 247 212 214;   /* #f7d4d6 */
  --red-light: 255 26 26;       /* #ff1a1a */
  --red-default: 238 0 0;       /* #e00 */
  --red-dark: 197 0 0;          /* #c50000 */

  /* ----------------------------------- */
  /* orange/warning colors */
  /* ----------------------------------- */
  --orange-lighter: 255 239 207;  /* #ffefcf */
  --orange-light: 247 185 85;     /* #f7b955 */
  --orange-default: 245 166 35;   /* #f5a623 */
  --orange-dark: 171 87 10;       /* #ab570a */

  /* ----------------------------------- */
  /* blue/info colors */
  /* ----------------------------------- */
  --blue-lighter: 211 229 255;  /* #d3e5ff */
  --blue-light: 50 145 255;     /* #3291ff */
  --blue-default: 0 112 243;    /* #0070f3 */
  --blue-dark: 7 97 209;        /* #0761d1 */

  /* ----------------------------------- */
  /* green/success colors */
  /* ----------------------------------- */
  --green-lighter: 185 249 207;   /* #b9f9cf */
  --green-light: 6 193 103;       /* #06C167 */
  --green-default: 4 136 72;      /* #048848 */
  --green-dark: 3 112 60;         /* #03703C */
}

Dark Mode

And these are the dark mode colors

src/app/globals.css

/* dark theme */
[data-theme='dark'] {
  /*
      - gray/natural color shades for texts, borders and disabled elements.
      - If required we can use as background too.
    */
  --gray-0: 0 0 0;            /* #000000  */
  --gray-50: 17 17 17;        /* #111111 */
  --gray-100: 34 34 34;       /* #222222 */
  --gray-200: 51 51 51;       /* #333333 */
  --gray-300: 72 72 72;       /* #484848 */
  --gray-400: 102 102 102;    /* #666666 */
  --gray-500: 146 146 146;    /* #929292 */
  --gray-600: 162 162 162;    /* #a2a2a2 */
  --gray-700: 223 223 223;    /* #dfdfdf */
  --gray-800: 226 226 226;    /* #e2e2e2 */
  --gray-900: 241 241 241;    /* #f1f1f1 */
  --gray-1000: 255 255 255;   /* #ffffff */

  /* ----------------------------------- */
  /* secondary colors */
  /* ----------------------------------- */
  --secondary-default: 138 99 210;  /* #7928ca */
  --secondary-dark: 121 40 202;     /* #4c2889 */

  /* ----------------------------------- */
  /* red/error colors */
  /* ----------------------------------- */
  --red-lighter: 253 226 221;   /* #fde2dd */
  --red-light: 242 65 34;       /* #f24122 */
  --red-default: 197 40 12;     /* #c5280c */
  --red-dark: 159 32 10;        /* #9f200a */
  /* here you can customize other colors for dark theme if design required */
}