Add option to set accent color

[TheOneWithTheBraid]

What feature would you like to see added to the theme?:
I was wondering whether it might be welcome to add an admin setting to select another accent color than the fancy breeze-blue. Yes, I know, the breeze theme should have breeze colors as it's colors but I see many use cases to tweak the theme anyway.

Currently, in our setup, we use breeze as default theme (as it's simply much more beautiful than the default dark theme) but we tweaked the breeze-blue to a color fitting to our CI.

A graphical option to set this color would simplify the customization and decrease the risk for admins that their manual tweaks break an update ;-)

Your setup (please complete the following information):

• Nextcloud version: 21.0.1 - if it matters for you

[mwalbeck]

Haha, I totally get it. If I were to create a user-friendly way to do it, I would most likely have the theme use the colour you can set using the Theming app, so it integrates better with the core theming in Nextcloud. I generally don't have any plans to add graphical options to customise the theme, other than what is allowed with the Theming app.

Though I'm a big fan of allowing customisations in general, and I try to build the theme in a way that makes it easy to customise. The theme is pretty much all CSS so the way I decided to allow customisations was to add a Custom styling box in the Theming section under admin settings. There you can just add your own CSS and override pretty much every aspect of the theme. All the colours I use are defined as CSS variables, so they are very easy to override. So let's say you want to change the breeze blue colour to green you can just add the following CSS:

:root {
    --color-plasma-blue: green !important;
}

You should be able to do pretty much everything you want using the above in safer way than changing the files directly. This also makes the customisations upgrade safe.

[Adrian-at-CrimsonAzure]

What is the hover color called? I've tried looking through the styles in the chrome dev menu, but can't find it.

[mwalbeck]

What is the hover color called? I've tried looking through the styles in the chrome dev menu, but can't find it.

It's called --color-hover-blue.

You can have a look at this file for a complete list of colour variables used in the theme https://github.com/mwalbeck/nextcloud-breeze-dark/blob/master/css/variables/_color-variables.scss

[xeruf]

In the theming page I can set a color, it would be good if this was respected (probably as --color-primary):

[KaiBuskirk]

Very Nice thank you!
I have added the css for both
__
the Selected color (Default was plasma blue)
__
and
Hover color (
__
and have found a few conflicts....

---

whats the best way to report them...

---

tyia
Kai
[ first time reporting a thing ]

[KaiBuskirk]

The Hover color now blocks folder icon in files tile view...
In files list view hover color performed as expected..

Bug? Or Conflict?
I was able to replicate it on another instance...
....
Disabled Breeze Dark Theme
Enabled Core Dark Theme
Problem did not persist..
....
NC 24, 2022 08 24

[gravelfreeman]

:root {
    --color-plasma-blue: green !important;
}

Passing custom CSS on root doesn't work anymore. Please provide a new way for theming.

Thank you!

[Eraph]

@gravelfreeman you can target body instead as a workaround for now:

body {
    --color-plasma-blue: green !important;
}

But yes, I would also like to see custom accent colours, including a means to automatically switch light/dark text depending on accent brightness like NextCloud does by default (I like bright accents!)

[gravelfreeman]

Thanks for the tip but I ended up switching back to the default theme. I found that the Current Line #44475A color from the Dracula theme works very well for both light and dark Nextcloud theme. I couldn't get a light theme for breeze dark anyway. During the day I prefer light themes.