OPNsense Forum

English Forums => 25.7 Series => Topic started by: Schnuffel2008 on September 21, 2025, 12:13:29 PM

Title: New skin "flexcolor" (formerly "dark-blueorange")
Post by: Schnuffel2008 on September 21, 2025, 12:13:29 PM
Hi,

today I've finished my skin "dark-blueorange" and renamed it to "flexcolor".
It was designed to have different color-schemes to easily change but there is still a plugin missing for changing it.
I've made two designs in the first step, a dark one and a light one (see attached images). More will come in the next release and of course you can make one on your own if you are interested in doing this. I have tried to document the used colors as well as I can.
I've loaded it up to github and made a pull-request. Hope I did everything right this time.
If you want to change from dark to light you have to copy the default_scheme.css from the color-schemes folder to the /build/css/ folder.
Maybe it could be integrated in one of the next builds of OPNsense if there is interest in it.
Thanks to all developers of OPNsense and the developers of all the beautiful skins for this and also for other software.

Title: Re: New skin "flexcolor" (formerly "dark-blueorange")
Post by: Schnuffel2008 on September 26, 2025, 03:44:26 PM
Here are two more screenshots. One of the "black" theme, a slight modification of the "dark" theme for oled users and the "light and dark" scheme, that I've developed as a proof of concept to test if it is possible to mix light and dark colors within one color-scheme for flexcolor.
Title: Re: New skin "flexcolor" (formerly "dark-blueorange")
Post by: BrandyWine on September 26, 2025, 04:17:46 PM
Nice.
Opnsense should have a contest, the best scheme voted gets to be the default in community versions.
Title: Re: New skin "flexcolor" (formerly "dark-blueorange")
Post by: Monviech (Cedrik) on September 26, 2025, 04:20:59 PM
That is unlikely as branding is a big consideration here.
Title: Re: New skin "flexcolor" (formerly "dark-blueorange")
Post by: Schnuffel2008 on September 26, 2025, 06:02:11 PM
I don't think I'll develop more than these four different color schemes on my own.
I've created "flexcolor" with the idea that everyone could design their own personalized color scheme, more easily than the original approach, which required searching for corresponding color values ��for specific elements of the Opnsense GUI in each of the relevant CSS files.  The whole thing works relatively simply, as you only have to change the predefined colors. I don't need a contest, but maybe it would be a nice idea to share your own designed scheme here, if this is okay for the developers of OPNsense. It's just a file you have to post. It will be easier to understand once the skin is released.
However, I would like to emphasize again that the development of the original skin is based solely on the ideas of the developers of the other skins, such as vicuna, rebellion, advanced, and opnsense, to whom I owe a debt of gratitude. I simply copied the original CSS code from all these skins together and made it into something new. I hope nobody has a problem with that.
I haven't changed things like the corner radius or changed a square into a circle, or anything like that, so flexcolor will always look a bit like the other skins. But just by changing the colors, you can personalize a lot.
Title: Re: New skin "flexcolor" (formerly "dark-blueorange")
Post by: Monviech (Cedrik) on September 26, 2025, 06:15:24 PM
Dont worry nobody minds if files are shared, its an open source project and the license allows this. :)
Title: Re: New skin "flexcolor" (formerly "dark-blueorange")
Post by: BrandyWine on September 26, 2025, 07:18:57 PM
Quote from: Monviech (Cedrik) on September 26, 2025, 04:20:59 PMThat is unlikely as branding is a big consideration here.
Branding?
Ahhh.
Perhaps ask coder for permission to brand their theme, then add it as a selection.
Plugins are ok, but end-users need to 1) learn how plugins work, and 2) need to learn somehow/someway that some new cool theme "name" is available in community plugins area.


Title: Re: New skin "flexcolor" (formerly "dark-blueorange")
Post by: Schnuffel2008 on September 26, 2025, 07:56:33 PM
The skin is one thing. My big challenge is still to come. Currently, you have to manually copy and replace the color scheme files. I'd like to develop a plugin that does this from within the Opnsense GUI. It's actually quite simple: you'd just have to display the subdirectories in a specific folder named after the theme name in a listbox, and then copy the default-scheme.css contained in each of these subfolders into the theme's build/css/ folder. The whole thing could be enhanced with a screenshot of the skin. The crowning glory, of course, would be a color picker. Surely simple for a professional programmer, but for me, who's never worked with PHP, etc., it's a mystery. But let's see what I can come up with. Maybe a pro will enjoy the idea and offer a little support for a beginner. ;-)