How to disable Dark Mode and replace the orange accent with a custom color (Seafile 13

Tutorial
1

Since Seafile 13 there is no built-in switch to turn Dark Mode off server-wide. Here is a simple, upgrade-friendly way to force Light Mode for everyone and swap the default orange for your own brand color using only Seafile’s customization features, no code changes to the app itself.

What we do

  1. Force Light Mode via a small script
  2. Hide the Dark/Light toggle in the top bar
  3. Override the orange accent color
  1. Force Light Mode

Seafile stores the chosen color mode in localStorage under the key sf_color_mode. Using Seafile’s template customization, override base_for_react.html and add this right before :

<script>
    // Force light mode
    localStorage.setItem('sf_color_mode', 'light');
</script>

This ensures the app always loads in Light Mode, and also resets any user who had previously enabled Dark Mode.

  1. Hide the color-mode toggle

So users can’t switch back to Dark Mode, hide the sun/moon button in the top bar via Custom CSS:

/* Hide the color-mode switch in the top bar */
.sf-icon-color-mode {
    display: none !important;
}
  1. Replace the orange accent color

Seafile’s default accent is orange. You can override it with your own color using this handy tool:

:backhand_index_pointing_right: Main Color - Seafile Admin Manual

Pick your color, generate the CSS, and add it to your Custom CSS as well. In Light Mode it cleanly overrides the default orange.

Result

Dark Mode is effectively disabled for all users, the toggle is gone, and the UI uses your custom accent color instead of orange. All done through Seafile’s built-in customization — nothing to re-patch after an update (just re-check your template override after major upgrades).

2

I’m curious about this. I get why you might want to change the accent color, but why remove the dark mode option? If a user on your server would prefer to use dark mode, why deny them the option?

3

Fair question! It’s not really about denying anyone dark mode. It’s a practical limitation of using a single custom accent color.

The catch is that very few colors provide sufficient contrast against both a light and a dark background. The default orange happens to be one of them, which is why Seafile can offer it in both modes. But once you swap in a custom brand color, it will usually look great in one mode and either wash out or become hard to read in the other.

So disabling dark mode isn’t the goal in itself. It’s just the trade-off for having a custom accent that stays legible and on-brand. If you pick a color that works well in both modes, there’s no reason you couldn’t keep dark mode enabled.

From my experience, as soon as you replace orange with something else, you have to disable dark mode. And there is currently no option provided by Seafile itself to handle both modes with a custom color.

Best regards
Christoph

1 Like
4

Hi, instead of hardcoding the accent color you can point it to a variable --bs-accent-color which you can set separately per theme:

[data-bs-theme=light] {
  --bs-accent-color: black;
}

[data-bs-theme=dark] {
  --bs-accent-color: white;
}