WebUi Style CSS DARK theme

<%- if @topic_view.topic.tags.present? %>
<%= t 'js.tagging.tags' %>: <%- @topic_view.topic.tags.each do |t| %> <%= t %> <%- end %>
<% end %>

I’m using everyday LibreNms (great and simple) but white theme is killing my eyes.

I’ve tried to create a dark theme for librenms (CSS) but i’m stuck with “onmouseover” windows which are setting a white windows ! is it possible to bypass this settings ? at this time i’ve disabled the “onmouseover”.

Otherwise here is my styles.css file : https://github.nailis.fr/ckbox/dark-theme-librenms/tree/master/html/css/custom

just in case if it’s could be intersting for someone. I’m not a dev just a simple user don’t shooting me :slight_smile:

thanks
(updated - 2.3) (add setting config.php for vlan BG)

3 Likes

Hello,

Yes you can disable the mouse over.

Check the webui configuration section.

https://docs.librenms.org/Support/Configuration/

I missed read your post sorry. I see you are want to change the mouse over window to the css theme.

thanks for your help Kevin, but as you said, i just want to change the “onmuseover” background and if it’s possible, without modify the JS. May be it could be done with a custom php script ? like CSS or images ?

It’s probably this, but i can’t test, place in your config.php

$config['overlib_defaults'] = ",FGCOLOR,'#000000', BGCOLOR, '#e5e5e5', BORDER, 5, CELLPAD, 4, CAPCOLOR, '#555555', TEXTCOLOR, '#3e3e3e'";

and play with the colors, any luck?

You might also want to check this out Graph legend text color

Hi chat,

thanks for your help, but it doesn’t works


so that’s why i’ve set $config[‘web_mouseover’] @ false

Try this in your custom css file

.overlib {
    background-color: #000000;
}

Hello,

Unfortunately, it doesn’t works. because the a href link is hardcoded and there is no css"s class.

But thanks for the leads

another leads

But not inside CSS File :frowning:

Submit a PR to add classes.

hi murrant,

thanks for your suggestion, i will, after best result in local.
A leads :

in the file : ./LibreNMS/Util/Url.php line 255
replace
$contents = "<div style=\'background-color: #FFFFFF;\'>" . $contents . '</div>';
by
$contents = "<div class=\'lib_overlib\'>" . $contents . '</div>';

After that it’s easy to add class in custom css file
At this time i’m fighting with white border of overlib :frowning:

Result :

my custom css class (in progress)
/* OVERLIB BG*/
.lib_overlib {
background: inherit;
background-color: #333;
color:cyan;
padding: 0;
margin: 0;
}

finaly

the border of overlib is not depending of css class but
it depends of ID seletor #overlib

From original CSS it’s :

#overDiv {
    z-index: 1200 !important;
    border: solid 1px #ccc;
    background-color: white;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
}

i’ve changed this in my custom css :slight_smile:
PR for php file to modify https://github.com/librenms/librenms/pull/10300
and std css file https://github.com/librenms/librenms/pull/10302
thanks of all

3 Likes

I tried out your custom css for the dark theme. I’m liking it!! :slight_smile:

2 Likes

Hi kevin, (i like your dashboard)

Excellent !
and there is some BG colors hard coded in
/includes/html/pages/device/ports.inc.php for mini graph (div + overlib) (I will PR after the local test)
the css is not finished and that’s why I leave the link at the top of the post on the GIT it is updated each time I make some changes … after it will be necessary that I clean up a little bit (remain useless classes).

I currently have a PR in progress https://github.com/librenms/librenms/pull/10305, I do not know if it is necessary to go through the forum to have it reviewed ?

But it’s motivating, thank you for testing

1 Like

Add 2 PR for adding class to includes/html/pages/device/ports.inc.php and in styles.css std
for resolving background of image and overlib link with white windows.
see https://github.com/librenms/librenms/pull/10313
see https://github.com/librenms/librenms/pull/10314
custom css Updated (sorry without modifications of includes/html/pages/device/ports.inc.php the new class doen’t work)
Sorry i don’t know how to merge these PR :face_with_raised_eyebrow:

You cant :slight_smile: they have to be reviewed and than merged.

add https://github.com/librenms/librenms/pull/10315
for changing bg color of common graph port
file includes/html/pages/ports/graph.inc.php
Pr must be validate before…

Last changes PR : https://github.com/librenms/librenms/pull/10318

Hi all,

I’m stuck with some bg color of image (bill section)
like

…bill/bill_id=1/view=transfer/
…bill/bill_id=1/view=accurate/
…bill/bill_id=1/view=history/

ETC…

i’m trying to find the code (ack -i etc…) but no result
could you help me to find of which files depends these pictures ?

Maybe a simple setting in the config.php could works ?

Thanks

I look forward to this being a simple menu option to turn the dark theme on or off!! :smiley:

3 Likes

Hello

Has this been merged if so where does one enable it.

Looks good.

Cheers

He hasn’t submitted the custom css code. You look at the post he posted a link where you copy it and try it out.

Also Donovan is really simple to go and look in github and see any thing that has been merged.