Theme colors

The colors of the FileRun interface can be changed from the control panel, without writing any CSS. Open Interface → Branding → Theme → Customize. The page has these parts:

The changes are applied when you press Save. Every color is a six-digit hex value, such as #0B57D0; the color picker next to each field accepts only this format. A field left empty uses the default value (shown as the placeholder). The Focus outline field is different: it takes a CSS outline value — color, style and width — such as #0B57D0 auto 1px.

Whether the dark values are used at all depends on the Dark mode option on the Theme page: Let browsers decide (the preference set in the user's operating system or browser), Always or Never.

What each color controls

The names follow the Material Design 3 color roles: Primary, Secondary container, Surface and Background are fills, and the On ... value next to each one is the color of the text and icons drawn on that fill. Each pair has to keep enough contrast, in both modes.

Setting What it colors
Primary The fill of primary buttons, the notification count badge, the track of progress bars, group avatars and the avatar of the superuser account, your own comment bubbles, and the tint of checkboxes, radio buttons and sliders. On mobile browsers, also the browser toolbar.
On primary Text and icons drawn on top of Primary, including the initials on the superuser's avatar.
Primary text The brand color used as text and icons on the page: links, the labels of secondary buttons, the selected tab and its underline, checked menu items, the file type icons and the row checkboxes in the file list, filled rating stars, the outline of a drop target and of a focused field. When empty, it takes the value of Primary. Set it to a darker shade when Primary is too light to read as text.
Links The color of links. When empty, it takes the value of Primary text. Set it when Primary text is a dark, near-black shade, so that links stay distinguishable from the body text. The Black and white preset does this: its links use the standard browser link colors, #0000EE in light mode and #9E9EFF in dark mode.
Secondary container The fill of selected rows, selected thumbnails and the selected folder in the folder tree; secondary buttons on hover; the selected item in drop-down lists; the filled part of progress bars; the toolbar shown for selected files; inline code in tip boxes.
On secondary container Text and icons on Secondary container.
Surface The page background behind the panels of the file manager, the top toolbar area, the comment bubbles of other users, tip boxes, the left panel of the sign-in page.
On surface Text on Surface.
Surface2 The background of the sign-in page and of stand-alone dialog pages, file thumbnail cards, tertiary buttons.
Surface2 variant Avatar placeholder circles, thumbnail cards on hover.
UI background The main panels: the file list and its header, the details panel, the content area of the control panel, the sign-in box.
Background The document body, drop-down menus, dialog windows, tooltips, notification messages, tag chips, file preview frames.
On background The default text color.
Elevated surface The background of drop-down menus and floating panels. In dark mode it is a little lighter than Background, which is how the interface shows that a menu sits above the page; a tinted color scheme gives it a tint of the same hue.
Menu highlight The subtle hover of buttons, tabs and list rows, and the keyboard-highlighted menu item.
Menu highlight alt A stronger hover: menu items, folder tree nodes.
Soft border The thin dividers between sections, fieldsets and list rows.
Hard border Stronger lines: menu separators, the top rule of dialogs, splitter handles while dragged, the scrollbar thumb, table grid lines.
Form fields border The outline of text fields and drop-downs at rest.
Form fields background The fill of text fields.
Folder icon The folder icons in lists and trees.
Focus outline The keyboard focus ring around fields, buttons and dialogs. A CSS outline value, not a plain color.

Getting the values from an AI assistant

Instead of choosing twenty-two pairs of values by hand, you can ask an AI assistant (Claude, ChatGPT or another) for them. Copy the prompt below and replace the part in square brackets with a description of your brand: the main color as a hex code if you have one, the other colors of your logo, the mood you want, and whether the interface should stay mostly neutral or carry the brand color on the panels too. The answer is a table of values that you type into the control panel.

 1I need a color scheme for a FileRun installation (a web file manager). FileRun's control panel takes one value per setting for light mode and one for dark mode. Please produce the values from this description of my brand:
 2
 3[DESCRIBE YOUR BRAND HERE: the main brand color as a hex code if you have one, the other colors of your logo, the mood you want (calm, corporate, playful, ...), and whether the interface should stay mostly neutral, with the brand color on buttons, links and selections only, or carry the brand color on the panels too.]
 4
 5The settings, and what each one colors:
 6
 7- Primary: the fill of primary buttons, the notification count badge, the track of progress bars, group avatars and the superuser's avatar, the user's own comment bubbles, the tint of checkboxes, radio buttons and sliders, and the browser toolbar on mobile.
 8- On primary: text and icons drawn on top of Primary, including the initials on the superuser's avatar.
 9- Primary text: the brand color as text and icons on the page background: links, the labels of secondary buttons, the selected tab and its underline, checked menu items, the file type icons and the row checkboxes in the file list, filled rating stars, the outline of a drop target and of a focused field.
10- Links: the color of links. Normally equal to Primary text.
11- Secondary container: the fill of selected rows, selected thumbnails and the selected folder in the folder tree; secondary buttons on hover; the selected item in drop-down lists; the filled part of progress bars; the toolbar shown for selected files; inline code in tip boxes.
12- On secondary container: text and icons on Secondary container.
13- Surface: the page background behind the panels of the file manager, the top toolbar area, the comment bubbles of other users, tip boxes, the left panel of the sign-in page.
14- On surface: text on Surface.
15- Surface2: the background of the sign-in page and of stand-alone dialog pages, file thumbnail cards, tertiary buttons.
16- Surface2 variant: avatar placeholder circles, thumbnail cards on hover.
17- UI background: the main panels: the file list and its header, the details panel, the content area of the control panel, the sign-in box.
18- Background: the document body, drop-down menus, dialog windows, tooltips, notification messages, tag chips, file preview frames.
19- On background: the default text color.
20- Elevated surface: the background of drop-down menus and floating panels; in dark mode a little lighter than Background.
21- Menu highlight: the subtle hover of buttons, tabs and list rows, and the keyboard-highlighted menu item.
22- Menu highlight alt: a stronger hover: menu items, folder tree nodes.
23- Soft border: the thin dividers between sections, fieldsets and list rows.
24- Hard border: stronger lines: menu separators, the top rule of dialogs, splitter handles while dragged, the scrollbar thumb, table grid lines.
25- Form fields border: the outline of text fields and drop-downs at rest.
26- Form fields background: the fill of text fields.
27- Folder icon: the folder icons in lists and trees.
28- Focus outline: the keyboard focus ring. This is not a plain color but a CSS outline value (color, style and width), for example "#0B57D0 auto 1px".
29
30The default values (the "Blue" preset), as light mode / dark mode:
31
32- Primary: #0B57D0 / #B2C5FF
33- On primary: #FFFFFF / #002B72
34- Primary text: #0B57D0 / #B2C5FF
35- Links: #0B57D0 / #B2C5FF
36- Secondary container: #C2E7FF / #004A77
37- On secondary container: #004A77 / #CEE5FF
38- Surface: #F8FAFD / #1B1B1B
39- On surface: #2D2E2F / #E3E3E3
40- Surface2: #F0F4F9 / #1F2126
41- Surface2 variant: #DFE3E7 / #2D2E2F
42- UI background: #FFFFFF / #131314
43- Background: #FFFFFF / #0E0E0E
44- On background: #1F1F1F / #E3E3E3
45- Elevated surface: #FFFFFF / #232425
46- Menu highlight: #F0F0F0 / #1F2126
47- Menu highlight alt: #E6E8EA / #303030
48- Soft border: #EBEBEB / #444746
49- Hard border: #C7C7C7 / #938F99
50- Form fields border: #79747E / #938F99
51- Form fields background: #FFFFFF / #000000
52- Folder icon: #444746 / #C4C7C5
53- Focus outline: #1E64D4 solid 1px / #B2C5FF solid 1px
54
55Rules:
56
571. Every color is a six-digit hex code (#RRGGBB). No color names, no rgb() or hsl(), no transparency.
582. Start from the default values above and change only what the brand needs. Keep the neutral values (backgrounds, text, borders, menu highlights) unless I asked for a tinted interface; a light tint of the brand hue in Surface and Surface2 is acceptable.
593. In light mode, Primary is a saturated, medium to dark shade of the brand color. In dark mode, Primary is either the brand color itself, when it reads at 4.5:1 as text on Surface, or a light tint of the same hue (tone 80 in Material Design 3 terms); On primary is a deep shade of it. Secondary container is a pale tint of the hue in light mode and a deep shade in dark mode. Derive every shade from the same hue, so that the two modes look like one brand.
604. Contrast, measured as a WCAG contrast ratio, in both modes: On primary on Primary at least 4.5:1; On secondary container on Secondary container at least 4.5:1; On background on Background and on UI background at least 7:1; On surface on Surface at least 7:1; Primary text on Background and on UI background at least 4.5:1. Adjust the shade until the ratio passes, and tell me when the brand color itself does not pass as text.
615. Primary text: when the light-mode Primary does not reach 4.5:1 as text on Background, give Primary text a darker shade of the same hue; otherwise keep Primary text equal to Primary. The same applies in dark mode with a lighter shade.
626. Links: equal to Primary text, unless Primary text is so dark that it is within a step of On background (a near-black text color); then a distinct shade of the hue that still passes 4.5:1 on Background, so that links stand out from the text. For a black, white or grey brand, which has no hue, use the standard browser link colors: #0000EE in light mode and #9E9EFF in dark mode.
637. Secondary container has to be clearly visible against UI background (a selected row has to stand out) without competing with Primary.
648. Menu highlight is a little darker than Background in light mode and a little lighter in dark mode; Menu highlight alt is one step further in the same direction. Elevated surface equals Background in light mode and is a little lighter than Background in dark mode, about as light as Menu highlight. Soft border is lighter than Hard border, and both have to be visible on Background and on UI background.
659. Focus outline is the Primary text of that mode followed by " auto 1px", unless that color has less than 3:1 contrast against Background; then use a darker (light mode) or lighter (dark mode) shade of the hue.
66
67Answer with a Markdown table with the columns Setting, Light mode and Dark mode, listing all 22 settings in the order above, followed by the contrast ratios you checked for the pairs in rule 4 and a note on every place where the brand color had to be changed for legibility. No other text.

Entering the values

  1. Open Interface → Branding → Theme → Customize.
  2. Select Light mode colors and type the values of the Light mode column into the fields. The field takes the typed hex code; the color picker next to it follows.
  3. Select Dark mode colors and type the values of the Dark mode column.
  4. Press Save.

Checking the result

The control panel takes the colors as you type them, so the buttons, links and fields of the page you are on are the first check. After saving, open the file manager in both modes and look at: a link, a primary button, a selected file, a drop-down menu, a text field with the cursor in it, a folder icon and the file type icons in the list. Text that is hard to read on its fill means the pair has too little contrast; change the On ... value of that pair, or the fill itself. A bright brand color with white text on the buttons is a legitimate choice even when that pair measures below 4.5:1: the links, the selected tab and the icons take their color from Primary text, and stay readable on their own.

Single values can be corrected at any time. Reset all to default restores the default scheme when you want to start again.