Theming

Theming

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

Light Mode

apps/isomorphic/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

apps/isomorphic/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 */
}