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

Configuration

YAML 
1
2
3
4
5

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:

YAML 
1
2
3

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>:

HTML 
1
2
3

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

Background Colors

Light Background

Default background for light mode:

YAML 
1
2
3

frontend:
  styling:
    lightBackground: "#f5f5f5"

Accepts any valid CSS color:

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

Applied as CSS variable:

CSS 
1
2
3

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

Dark Background

Default background for dark mode:

YAML 
1
2
3

frontend:
  styling:
    darkBackground: "#1a1a1a"

Applied to dark mode class:

CSS 
1
2
3

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

CSS Examples

Reduce Rounded Corners

custom.css:

CSS 
1
2
3

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

Custom Primary Colors

CSS 
1
2
3
4
5

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

Hide Specific Elements

CSS 
1
2
3

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

Corporate Branding

CSS 
1
2
3
4
5
6
7
8

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

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

Complete Example

YAML 
1
2
3
4
5

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

acme-brand.css:

CSS 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

/* 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:

CSS 
1
2
3
4
5
6
7
8

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

Dark mode:

CSS 
1
2
3
4
5
6
7
8

.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