Apply custom CSS and configure background colors for light/dark modes.

Configuration 

frontend:
  styling:
    customCSS: "custom.css"
    lightBackground: "white"
    darkBackground: "#141D24"

Options

OptionDefaultDescription
customCSS""Path to CSS file applied to all users
lightBackgroundDefaultBackground color for light mode (CSS color value)
darkBackground#141D24Background color for dark mode (CSS color value)

Custom CSS

Apply CSS file to all users:

frontend:
  styling:
    customCSS: "custom.css"

Place custom.css in your working directory or provide full path.

How it works: CSS content is injected into <style> tag in HTML <head>:

<style>
  {{ .htmlVars.customCSS }}
</style>

Background Colors

Light Background

Default background for light mode:

frontend:
  styling:
    lightBackground: "#f5f5f5"

Accepts any valid CSS color:

  • Hex: "#f5f5f5"
  • RGB: "rgb(245, 245, 245)"
  • Named: "white", "lightgray"

Applied as CSS variable:

:root {
  --background: {{ .htmlVars.lightBackground }};
}

Dark Background

Default background for dark mode:

frontend:
  styling:
    darkBackground: "#1a1a1a"

Applied to dark mode class:

.dark-mode {
  --background: {{ .htmlVars.darkBackground }};
}

CSS Examples

Reduce Rounded Corners

custom.css:

.card, .btn, input, select {
  border-radius: 4px !important;
}

Custom Primary Colors 

:root {
  --primary-color: #007bff;
  --secondary-color: #6c757d;
  --success-color: #28a745;
}

Hide Specific Elements 

.file-size {
  display: none !important;
}

Corporate Branding 

header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.btn-primary {
  background-color: #667eea;
  border-color: #667eea;
}

Complete Example 

frontend:
  styling:
    customCSS: "acme-brand.css"
    lightBackground: "#ffffff"
    darkBackground: "#002244"

acme-brand.css:

/* Corporate colors */
:root {
  --primary-color: #0066cc;
  --secondary-color: #ff6600;
}

/* Reduce border radius */
* {
  border-radius: 2px !important;
}

/* Custom header styling */
header {
  font-weight: 600;
  letter-spacing: 0.5px;
}

CSS Variable Reference

Available CSS variables:

Light mode:

:root {
  --background: /* from lightBackground */
  --alt-background: #ddd;
  --surfacePrimary: gray;
  --surfaceSecondary: lightgray;
  --textPrimary: #546e7a;
  --textSecondary: gray;
}

Dark mode:

.dark-mode {
  --background: /* from darkBackground */
  --alt-background: #283136;
  --surfacePrimary: #20292F;
  --surfaceSecondary: #3A4147;
  --textPrimary: rgba(255, 255, 255, 0.87);
  --textSecondary: rgba(255, 255, 255, 0.6);
}

Next Steps