CSS

css_overrides.css

Configure the css_overrides.css file in the assets/ folder of your overlay_dir

The file is empty by default. To override the css variables used in the applications see all the default values below. Note, if you wish to only override for example the button background color you do not need to include the rest of the variables.

Default values/available variables

:root {
  --color-primary: #024550; /* primary color */
  --color-accent: #00cc7e; /* accent color */

  --color-background: #181830; /* background color, used as fallback color if no background image is used. */
  --color-surface: #ffffff; /* surface color. used for cards and such typically where text appear */
  --color-backface: #f5f5f5; /* backface color, used behind cards and other surfaces */
  --color-on-primary: #ffffff; /* color that contrasts when used on color-primary, typically text on primary backgrounds */
  --color-on-surface: #024550; /* color that contrasts when used on color-surface, typically text on surface backgrounds */
  --color-on-accent: #ffffff; /* color that contrasts when used on color-accent, typically text on accent backgrounds */

  --color-link: #045e6c; /* link color */
  --color-link-hover: #058194; /* link color when hovered */
  --color-link-disabled: #bcbcbc; /* link color when disabled */

  --color-button-background: #181830; /* button background color */
  --color-button-background-hover: #c7f3aa; /* button background color when hovered */
  --color-button-background-disabled: #d4d4d4; /* button background color when disabled */
  --color-button-text: #ffffff; /* button text color */
  --color-button-text-hover: #181830; /* button text color when hovered */
  --color-button-text-disabled: #181830; /* button text color when disabled */

  --color-warning: #c24b1d; /* warning text/icon color */

  --button-radius: 0rem; /* button border radius, default no radius */
  --button-border: none; /* button border, default none, example: --button-border: 1px solid --color-primary; or --button-border: 1px solid #fa8072; */
  --button-border-hover: none; /* button border when hovered, default none. example: --button-border: 1px solid #8fbc8f; */

  --color-button-secondary-background: transparent; /* secondary button background color */
  --color-button-secondary-background-hover: transparent; /* secondary button background color when hovered */
  --color-button-secondary-text: var(--color-on-surface); /* secondary button text color, inherits from palette */
  --color-button-secondary-text-hover: var(--color-on-surface); /* secondary button text color when hovered, inherits from palette */
  --color-button-secondary-background-disabled: transparent; /* secondary button background color when disabled */
  --color-button-secondary-text-disabled: #9ca3af; /* secondary button text color when disabled, default gray-400 */
  --button-secondary-border: 1px solid #d1d5db; /* secondary button border, default gray-300 */
  --button-secondary-border-hover: 1px solid #9ca3af; /* secondary button border when hovered, default gray-400 */
  --button-secondary-border-disabled: 1px solid #e5e7eb; /* secondary button border when disabled, default gray-200 */

  --background-image: url('bg_login.svg') no-repeat center center/cover fixed; /* background image, used behind surface and backface. typically for authentication pages */
  /* image can be svg, png, jpg, jpeg, gif, webp, etc. The image will scale to fill the entire screen but maintain ratio if using the no-repeat center center/cover fixed */
  /* Image should be of size 1920x1080 and size optimized for web for best results  */
  /* apps such as Portal/Password Reset etc will have --background-image: none; as default and only use background color */
  --background-fallback-color: var(--color-background); /* background color, used as fallback color if no background image is used or if loading slowly */

  --color-header-background: var(--color-primary); /* header background color, mainly used in apps such as Portal/Password Reset etc. Default the --color-primary variable is used */
  --color-header-text: var(--color-on-primary); /* header text color, mainly used in apps such as Portal/Password Reset etc. Default the --color-on-primary variable is used */

  --color-progress-filled: var(--color-primary); /* progress bar filled color */
  --color-progress-background: #e2e8e9; /* progress bar background color/(not filled color) */

  --color-loader-indicator-bottom: var(--color-primary); /* loader indicator bottom color, mainly used in authentication pages */
  --color-loader-indicator-middle: var(--color-accent); /* loader indicator middle color, mainly used in authentication pages */
  --color-loader-indicator-top: rgb(from var(--color-surface) calc(r - 5) calc(g - 5) calc(b - 5) / 0.2); /* loader indicator middle color, mainly used in authentication pages */

  /* shadcn/ui Table component variables */
  --muted: 210 40% 96.1%;
  --muted-foreground: 215.4 16.3% 46.9%;
  --border: 214.3 31.8% 91.4%;

  --destructive: oklch(0.577 0.245 27.325);
  --destructive-foreground: oklch(0.577 0.245 27.325);

  --input: oklch(0.922 0 0);
  --ring: oklch(0.708 0 0);

  /* Table-specific tokens for consistent styling across shadcn DataTable and MUI TableComponent */
  --table-header-bg: var(--color-primary);
  --table-header-text: var(--color-on-primary);
  --table-row-hover: rgb(229 231 235); /* neutral-200 */
  --table-row-selected: rgb(229 231 235); /* neutral-200 for selected state */
  --table-row-selected-text: inherit;
  --table-border: var(--border);

  --background: var(--color-backface);
  --foreground: var(--color-on-surface);
  --card: var(--color-surface);
  --card-foreground: var(--color-on-surface);
  --popover: var(--color-surface);
  --popover-foreground: var(--color-on-surface);
  --primary: var(--color-primary);
  --primary-foreground: var(--color-on-primary);
  --secondary: var(--color-accent);
  --secondary-foreground: var(--color-on-accent);
  /* --muted: var(--color-backface); */
  /* --muted-foreground: var(--color-on-surface); */
  --accent: var(--color-accent);
  --accent-foreground: var(--color-on-accent);
  /* --destructive: var(--color-destructive);
  --destructive-foreground: var(--color-on-destructive); */
  --border: var(--color-border);
  --input: var(--color-input);
  --ring: var(--color-ring);
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --color-card-foreground: var(--card-foreground);
  --color-popover: var(--popover);
  --color-popover-foreground: var(--popover-foreground);
  --color-primary: var(--primary);
  --color-primary-foreground: var(--primary-foreground);
  --color-secondary: var(--secondary);
  --color-secondary-foreground: var(--secondary-foreground);
  --color-muted: var(--muted);
  --color-muted-foreground: var(--muted-foreground);
  --color-accent: var(--accent);
  --color-accent-foreground: var(--accent-foreground);
  --color-destructive: var(--destructive);
  --color-destructive-foreground: var(--destructive-foreground);
  --color-border: var(--border);
  --color-input: var(--input);
  --color-ring: var(--ring);
  --color-chart-1: var(--chart-1);
  --color-chart-2: var(--chart-2);
  --color-chart-3: var(--chart-3);
  --color-chart-4: var(--chart-4);
  --color-chart-5: var(--chart-5);
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  --color-sidebar: var(--sidebar);
  --color-sidebar-foreground: var(--sidebar-foreground);
  --color-sidebar-primary: var(--sidebar-primary);
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
  --color-sidebar-accent: var(--sidebar-accent);
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
  --color-sidebar-border: var(--sidebar-border);
  --color-sidebar-ring: var(--sidebar-ring);
}

/* @layer base {
  * {
    @apply border-border outline-ring/50;
  }
  body {
    @apply bg-background text-foreground;
  }
} */

html {
  color: var(--color-on-surface); /* default text color */
  background-color: var(--background-fallback-color); /* default background color (used as fallback before image loads). */
  background: var(--background-image), var(--background-fallback-color); /* Background defaults to use background image, mainly used in authentication pages, and color otherwise while image loads. If only the color will be used you can just use fallback-color or define the color directly. example: background: #ffdab9; */
  font-family:
    'Inter',
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol';
}

@supports (font-variation-settings: normal) {
  html {
    font-family:
      'Inter var',
      -apple-system,
      BlinkMacSystemFont,
      'Segoe UI',
      Roboto,
      Helvetica,
      Arial,
      sans-serif,
      'Apple Color Emoji',
      'Segoe UI Emoji',
      'Segoe UI Symbol';
  }
}

Examples

Example: To update the button backgrounds define in your css_overrides.css:

:root {
  --color-button-background: #ffe4c4;
  --color-button-background-hover: rgb(143 188 143);
  --color-button-text: #32cd32;
  --color-button-text-hover: #00fa9a;
}

Example: To change background image

Make sure image is available in the assets folder (using the overlay method preferably) and define in your css_overrides.css

:root {
  --background-image: url('new_background_image.png') no-repeat center center fixed;
}