Frontail custom theme coloring

Im asking things here without knowing the effort - would it be possible to do a light shaded alternate line style so each line is easier to read?

Hi, you need custom_ALB.json and custom_ALB_dark or custom_ALB_light as css.

the commands are below the compose

Hello Andrew, I need a little more explanation, what do you mean exactly? If you have a visual example (e.g. screenshot from another app/site etc) that would help! :slight_smile:

Wow, it works!
My path was correct, I just replaced the command as you metioned!
You saved my day!
Thanks! :partying_face:

1 Like

Hi sorry I’m not good at explaining - like this

But not as dark and coloured with your stylish flare

Ooh I see now, you mean color alternating rows in white / dark gray. That’s a nice idea. Will have to play with the code a bit and get back to you!

Yes but probably not dark grey and of course a light alternative on the dark theme

Ok, I tried to implement it on the fly, on the light theme. Here is the result:

I’m not sure, to be honest, if it makes things better. For sure there is a glitch to solve (empty lines should always be white, see for example the line under the red [ERROR] line). But it is a minor glitch.

In my usage, when I am interested in a specific line, or group of lines, i click them in order to highlight them.

On mobile, where the logs are displaied on multiple lines, I had already added a small division line between the log lines, to enhance readability, so in that case the alternating row colors are not so necessary.

BTW in order to achieve this result you just need to add this code to the css:

.log .line:nth-child(even) {
    background-color: #EFEFEF;
.log .line:nth-child(odd),
.log .line.logLine {
    background-color: #FFF;

This for the light theme. For the dark theme you need to change the colors accordingly (the respective HEX codes could be #32332C and #282922).

I love the concept, it looks great. To be honest I have very little experience with the web. Its possible you could create some sort of file that would add persistence. Try StackOverflow that might have some solutions.

I think I am going to use this. Will need to test a bit but seems to be exactly what is needed to remember the last theme used: HTML Web Storage API

Will digg and let you know!

That’s awesome I will apply the lines to mine it’s exactly what I’m after thanks

1 Like

Helo @ndye I have just finished all the TODOs.
Light and Dark Theme are now merged in a single css.
The button I showed in the previous post takes care of everything.
I also managed to store locally in the browser the last used theme, so next time you open the browser it will remember the setting (hopefully).

I am ready to start integrating it in openHABian. What is the process you had in mind to do it? Feel free to PM me so we plan the next steps! :partying_face:

About every three days I take make a fresh attempt at getting this to work. I must be doing something dumb.

I skim up and down this thread, usually giving up telling myself I’ll wait for it to be integrated, but then getting impatient.

Shouldn’t this series of commands, on a fresh install of OpenHABian 3, work, starting with the service stopped and running from the command line?

openhabian@pi-openhab3:cd /etc/openhab
openhabian@pi-openhab3:git clone
openhabian@pi-openhab3:/etc/openhab/frontail $ sudo cp -R web /usr/lib/node_modules/frontail/
openhabian@pi-openhab3:/etc/openhab/frontail $ sudo cp -R preset /usr/lib/node_modules/frontail/
openhabian@pi-openhab3:/etc/openhab/frontail $ /usr/lib/node_modules/frontail/bin/frontail --ui-highlight --ui-highlight-preset /usr/lib/node_modules/frontail/preset/openhab_dark.json -t openhab -l 2000 -n 200 /var/log/openhab/openhab.log /var/log/openhab/events.log

The custom theme is now installed by default, if you just use openhabian-config menu option 21 it will do the hard work for you.

that’s no fun! lol…

thanks @ndye will give it a try now!

for the benefit of all, you need to be on the “main” branch in order to install the custom theme through openhabian-config.
If I am not mistaken, the stable OH3 branch (called “openHAB3”) still has the light/dark option to choose from, under menu option #21.

Will add this info also in the first post!

That is correct. Once we update the stable branch (openHAB3) it will be available to all who wish to update.

UPDATE: Edited the first post to include the latest files and instructions, adding the reference to my GitHub repository, and the reference to openHABian 1.6.4.

1 Like

Thanks for the mention in your repository.

Since you now have your own repository, should I fork yours and then build containers, or will you do the customizations, in case any are added, in mine as well? How should we do this in the future? In principle, I do not care, the main thing is that both repositories are identical. If you give me access to your repository, I could also start the Docker build process from yours. As you wish.

In case of future updates, I think the safer options is that I update the files in my repository and in yours as well. It’s not a big deal in the end, its a matter of updating one or two files, I can do it and I am already a contributor. This way you have a safe “playground” without potentially impacting openHABian. Another option is, as you suggest, that you fork my repository, but that means more work for you… As you prefer!