Frontail custom theme coloring

Hello @alfista2600 reverting back to stock should be quite easy. The json and css files you added can be left where they are or you can delete them. There’s no difference since you just need to point to other json and css files inside:


What I would suggest is:

  1. Revert the content of
    to the original one. If you didn’t make a backup copy, you should be good overriding it with this.

  2. Modify the line you edited in /etc/systemd/system/frontail.service.
    For the light theme mine on OH3 was:

ExecStart=/usr/lib/node_modules/frontail/bin/frontail --ui-highlight --ui-highlight-preset /usr/lib/node_modules/frontail/preset/openhab.json -t openhab -l 2000 -n 200 /var/log/openhab/openhab.log /var/log/openhab/events.log

and for the dark theme:

ExecStart=/usr/lib/node_modules/frontail/bin/frontail --ui-highlight --ui-highlight-preset /usr/lib/node_modules/frontail/preset/openhab_dark.json -t openhab_dark -l 2000 -n 200 /var/log/openhab/openhab.log /var/log/openhab/events.log

Instead if you are using OH2 they should be as follows. For the light theme:

ExecStart=/usr/lib/node_modules/frontail/bin/frontail --ui-highlight --ui-highlight-preset /usr/lib/node_modules/frontail/preset/openhab.json -t openhab -l 2000 -n 200 /var/log/openhab2/openhab.log /var/log/openhab2/events.log

for the dark theme:

ExecStart=/usr/lib/node_modules/frontail/bin/frontail --ui-highlight --ui-highlight-preset /usr/lib/node_modules/frontail/preset/openhab_dark.json -t openhab_dark -l 2000 -n 200 /var/log/openhab2/openhab.log /var/log/openhab2/events.log

the only difference between OH2 and OH3 is the path of the logs (…/openhab2/… for OH2 and /openhab/… for OH3)

  1. Finally it is necessary to reload the daemon:

sudo systemctl daemon-reload

… and restart frontail:

sudo service frontail restart

You are correct, one more line has to be edited. It should be line 229 in the file you attached:

container.setAttribute('style', _highlightConfig.lines[lineCheck]);

has to be:

container.setAttribute('class', _highlightConfig.lines[lineCheck]);

My fault, missed that line in the first post, sorry. I updated the instructions now! Thank you for pointing that out!

1 Like

Perfect, that worked! Thanks a lot!

1 Like

Gentlemen -

Thank you - I will try in the AM. Long day over here! Thanks for the detailed instructions!

I forked your repository and sent you a pull request. I think it is an easier workflow, but of course if you have a better idea, I am totally open to alternatives. I am not familiar with Github, moving my first baby steps there! :sweat_smile:

@AEM great, I’m fine with that. It’s my first pull request too, so I will check it tomorrow. Good night.

Changes are merged into master.

1 Like

@Schnuecks @AEM You could potentially further improve this by integrating it with openHABian and making it the default for all users of frontail and openHAB. Just a thought but worth looking at, let me know if you have any questions about that process as I am an openHABian maintainer and can help point you in the right direction.

@ndye Im totally in, my only cocern is that I modified /usr/lib/node_modules/frontail/web/assets/app.js and I am not sure my js code is good enough - as I said, I don’t know js and RegEx that much, this can potentially lead to unexpected behaviours. Also, what happens in case of future updates of that file on the main frontail repository?

I think we could merge it if the new version has fixes or enhancement and add your modifications to it. Or you could make a pr on the original and ask for implementation with that you had someone who knows his js and could say if it’s ok or not.

Well, if you look at the way I have it implemented right now, I’m already overwriting some of the files to allow for upgrading bootstrap.min.css. We could start there and the move forward, I agree it is not the best solution but should work for the moment. I’m not to worried about the JS code as it is not the most important thing if it breaks, as frontail is not a core component.

Infact, I just noticed some parts have changed, for example the play/pause button appearance - I saw bootstrap.min.css has appeared among the files, I was wondering when I read your message. I am checking right now the new implementation and thinking about how to move from there.


  1. css: need to rewrite part of the css using CSS Variables - this is beneficial both for file management (lighter), both because you can implement multiple themes inside a single css. That’s the best way to have light/dark themes all in one.
  2. use a minimal js function to implement a button to switch between light and dark themes, as @Schnuecks suggested.

Here you can see a quick demo.

1 Like

Sounds like a plan, let me know if you need any help. I’m happy to help.

Also feel free to use any of the code in openHABian for your frontail modifications.

Hi Andreas,
Can you detail a noobie friendly instructions on how to install your version of frontail via docker?

Hi @epicurean , it depends a bit on how you use Docker. I use docker-compose for this but it also only works with Docker. The instructions from this thread are still usable as described there.
To be able to help you more precisely I would have to know how openHAB is installed on your system. The container only makes sense if you already have openHAB running in the container. If so, please show me your docker-compose.yml and I can show you how to add frontail.

Hi @Schnuecks, maybe it would make sense to create 2 docker-compose examples inside the git, or in the first post.

  1. In case you are using openhab also inside docker
  2. In case openhab runs normal outside docker
    In (2) you could expose the openhab log folder to the frontail container with something like /var/log/openhab:/logs:ro

Should be a pretty simply yml from that end and not a lot different to (1), whereas yes, folder paths might be different.

This one is the docker hub page for frontail with the docker run command which could be adopted and translated to compose (composerize)

docker run -d -P -v /var/log:/log mthenw/frontail /log/syslog

Thank you for your reply Andreas.
I run OH3 in a ubuntu VM in esxi ,as a docker container. Its a recent migration from 2.5.11. My mqtt,zigbee2mqtt are also docker containers.
I do not use docker-compose, as I usually install each container one at a time and then manage them via portainer.


Hi, I will edit the when the new version is available.

I’m not sure if it doesn’t make sense to center the whole thing somewhere, a repo at my place is nothing official. Maybe this could also be cloned to e.g. openhab-frontail and be authorized accordingly to maintainers. But unfortunately I don’t know if this is desired, but would offer myself as a maintainer.

In general, I would prefer to see the instructions in the official documentation rather than in a Github repo. I’m also happy to create corresponding instructions for docker-compose or add to the existing Docker documentation, I think that’s more purposeful in the end.

I can’t get it to work:
I run OH3 in a container:

version: ‘2.2’

image: “openhab/openhab:3.0.1”
container_name: openhab3
restart: unless-stopped
network_mode: host
- “/etc/localtime:/etc/localtime:ro”
- “/etc/timezone:/etc/timezone:ro”
- “openhab_addons:/openhab/addons”
- “openhab_conf:/openhab/conf”
- “openhab_userdata:/openhab/userdata”
EXTRA_JAVA_OPTS: “-Duser.timezone=Europe/Berlin”
- “traefik.enable=true”
- “traefik.http.routers.openhab3.rule=Host(MYDOMAIN)”
- “traefik.http.routers.openhab3.entrypoints=web-secure”
- “traefik.http.routers.openhab3.tls=true”
- “traefik.http.routers.openhab3.tls.certresolver=primary”
- “”
driver: local
driver: local
driver: local

I find the log files in this location in terminal:
I changed the permissions to at least readable (I hope…)

When building with your docker-compose.yml

    container_name: frontail
    restart: unless-stopped
    #here you must put the folder where you cloned the repo
    build: ./frontail
    command: --disable-usage-stats --ui-highlight --ui-highlight-preset /frontail/preset/custom.json -t custom -l 2000 -n 100 /logs/openhab.log /logs/events.log
    - openhab
    #here belongs the path where your openhab stores the logs and mount it into /logs
    #in my case i use iotstack which mounts the folder as below
    - ./volumes/openhab/userdata/logs:/logs:ro
    - "9001:9001"

I need to uncomment depends_on: -openhab because the build fails. I even tried openhab3 but error.

Then I build it with this path:
- /var/lib/docker/volumes/openhab3_openhab_userdata/_data/logs:/logs:ro
The container starts with this errors in logs

Error: Preset file /frontail/preset/custom.json doesn’t exists
at Object. (/frontail/index.js:121:13)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (/frontail/bin/frontail:2:1)
at Module._compile (internal/modules/cjs/loader.js:999:30)
at Object.Module._extensions…js (internal/modules/cjs/loader.js:1027:10)

Probably a path error? How can I fix it?

Hey @ndye today I played a bit with the new layout that takes advantage of bootstrap.
I am thinking to modify the header with 2 icons, one for the play/pause button, the other for the theme switch.

Something like this:

Schermata 2021-03-10 alle 01.14.12

The buttons both work, the icon changes with a nice transition and everything.
Now the thing I am wondering is how to store the last used theme, it would be nice.

Let’s say I load Frontail, by default it comes with light theme. I decide to switch to dark theme. Then I close the browser. Next time I come back to Frontail, I should load the page with the dark theme, since it’s the last used and it would be a better experience if Frontail could remember my preference. Do you (or anyone else) have a clue how to achieve that?