Dark theme

[leopheard]

Hi there,

Thanks for this awesome software! One thing - is there a dark theme? Or can I edit one of the .css files to make it a dark background? If so, do you know which file and where I could add the html to?

[alanmilinovic]

That would be awesome!

[DaniW42]

@leopheard @amilino

This might be a very! dirty workaround, but you could add the following lines to your rpimonitor.css

Make a backup!

Of course, as always, make a backup first! As root user run: cp /usr/share/rpimonitor/web/css/rpimonitor.css /usr/share/rpimonitor/web/css/rpimonitor.css.bak

Edit .css file

nano in to your rpimonitor.css.bak nano /usr/share/rpimonitor/web/css/rpimonitor.css

and add these lines to the end of your file:

/* 'Enable' Dark Mode workaround */
body {
  color: #fff !important;
  background-color: #0e0e3d !important;
}

.panel-body {
  background-color: #0e0e3d !important;
}

.modal-content {
  color: #000 !important;
}

.btn {
    background-color: darkgray !important;
}

select {
    color: #000 !important;
}

input[type="button"] {
    color: #000 !important;
}

Optional: Adjust colours

If you want to adjust colours check CSS Colours by awesome w3schools.com. Would be nice to know which settings you prefer!

In case something bricks: revert to original state

To revert back to your original file simply delete the lines or get a fresh rpimonitor.css from github. wget https://raw.githubusercontent.com/XavierBerger/RPi-Monitor/master/src/usr/share/rpimonitor/web/css/rpimonitor.css -O /usr/share/rpimonitor/web/css/rpimonitor.css

This won't be persistent during updates

The styles will be overwritten as soon as rpimonitor updates the file during an update. Would be nice to see a clean solution by somebody who is more into stuff like this than me.

What it looks like using the settings above:

Unfortunately, its pretty hard to read the stats, this would need some further tweaking...

I don't have any Addons active, so it is very likely that this pages also need some tweaking.

Show some love to @XavierBerger for this nice tool!

[Synetech]

I changed it to be a dark-grey and added these rules to hide the lines and to fix the SVG text inside the gauges, and fixed the text of the popups to be visible:

hr {
    border-color: #282923 !important;
}
.column-fluid {
    column-rule-color: #282923 !important;
}

div.justgage svg text {
    filter: contrast(0%) !important;
}
a#packages+div.popover.fade.in.bottom {
    color: #000 !important;
}

And since RPi-Monitor doesn't update much, it shouldn't be a problem. 🤷

[WizardNo7]

For those interested: This is the complete CSS addition I figured out worked aesthetically and made everything able to be read and understood. Add to the end of /usr/share/rpimonitor/web/css/rpimonitor.css:

NB: Works for everything I have. I haven't used any Addons and didn't test badges and such.

/*--- -- --- -- ---*/
/* -- DARK MODE -- */
/*--- -- --- -- ---*/

/* Nav & Menu */
.dropdown-menu,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a:hover {
    background-color: #3c3c3c !important;
}

.dropdown-menu > li > a {
    color: gray !important;
}

.dropdown-menu > li > a:hover {
    background-color: #6a6a6a !important;
    color: white !important;
}

body {
    background-color: #1a1a1a !important;
}

/* Status */
.list-group-item {
    background-color: #1a1a1a !important;
    color: white !important;
}

hr {
    border-color: black !important;
}

.column-fluid {
    column-rule-color: black !important;
}

.justgage svg text {
    filter: contrast(0%) !important;
}

/* Statistics */
td {
    color: white;
}

.legendColorBox,
.legendLabel {
    background-color: #3c3c3c;
    color: lightgray;
}

.btn,
input[type="button"],
select {
    background-color: #222222;
    color: lightgray;
}

.btn:hover,
input[type="button"]:hover,
select:hover {
    color: gray;
}

/* Addons */
.panel-default > .panel-heading {
    background-color: #6a6a6a !important;
    color: white !important;
}

.panel-body {
    background-color: #3c3c3c;
    color: white;
}

/* Options */
.modal-content {
    background-color: #3c3c3c !important;
    color: white;
}
/*--- -- --- -- ---*/
/* -- DARK MODE -- */
/*--- -- --- -- ---*/

[alanmilinovic]

For those interested: This is the complete CSS addition I figured out worked aesthetically and made everything able to be read and understood. Add to the end of /usr/share/rpimonitor/web/css/rpimonitor.css:

NB: Works for everything I have. I haven't used any Addons and didn't test badges and such.

/*--- -- --- -- ---*/
/* -- DARK MODE -- */
/*--- -- --- -- ---*/

/* Nav & Menu */
.dropdown-menu,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a:hover {
    background-color: #3c3c3c !important;
}

.dropdown-menu > li > a {
    color: gray !important;
}

.dropdown-menu > li > a:hover {
    background-color: #6a6a6a !important;
    color: white !important;
}

body {
    background-color: #1a1a1a !important;
}

/* Status */
.list-group-item {
    background-color: #1a1a1a !important;
    color: white !important;
}

hr {
    border-color: black !important;
}

.column-fluid {
    column-rule-color: black !important;
}

.justgage svg text {
    filter: contrast(0%) !important;
}

/* Statistics */
td {
    color: white;
}

.legendColorBox,
.legendLabel {
    background-color: #3c3c3c;
    color: lightgray;
}

.btn,
input[type="button"],
select {
    background-color: #222222;
    color: lightgray;
}

.btn:hover,
input[type="button"]:hover,
select:hover {
    color: gray;
}

/* Addons */
.panel-default > .panel-heading {
    background-color: #6a6a6a !important;
    color: white !important;
}

.panel-body {
    background-color: #3c3c3c;
    color: white;
}

/* Options */
.modal-content {
    background-color: #3c3c3c !important;
    color: white;
}
/*--- -- --- -- ---*/
/* -- DARK MODE -- */
/*--- -- --- -- ---*/

You are missing white color on body element.

[WizardNo7]

Hi @alanmilinovic, thanks for the tip! I actually remembered having it, but took it out for some reason I could not remember... :thinking:

I just went to test again, and now I recall the reason: With this specified, it leads to the issue on the statistics screen where the hover item's text is completely unreadable, and I actually spent quite some time trying to fix it!

body {
    background-color: #1a1a1a !important;
    color: white !important;
}

But by just specifying the background-color in the body block, we avoid that and end up with this nice result:

I did put the color: white; in other places as required.

[tblaase]

Correct me if i am wrong, but something seems to have changed since this very nice solution from @WizardNo7, it now looks like this below when not adding any color to the body

by changing the body like this, everything gets acceptable readability, you may change this to your own likings

body {
    background-color: #1a1a1a !important;
    color: rgb(150, 150, 150) !important;
}

[costispavlou]

can anyone explain how to do this ? I pasted under the last line of the css saved however refreshing does nothing.. I did restart as well. If anyone can share their complete css for me to copy paste I'd be much obliged !

[tblaase]

@costispavlou Here is my config, its not perfect, but it gets the job done

/*
 * This file is part of RPi-Monitor project
 *
 * Copyright 2013-2014 - Xavier Berger - http://rpi-experiences.blogspot.fr/
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */
/* Main marketing message and start button */
.jumbotron {
        /*margin: 40px 180px 180px;*/
        text-align: center;
  }
  .jumbotron h1 {
        font-size: 72px;
        line-height: 1;
  }
  .jumbotron .btn {
        font-size: 21px;
        padding: 14px 24px;
  }

  /* Move content away from navbar */
  body {
        padding-top: 50px;
  }

  /* Move rrd graph away from navbar */
  #mygraph {
        margin-top: 30px;
  }

  /* Draw a progression bar during rrd load */
  #preloader {
        position:fixed;
        z-index: 100;
        top:50%;
        left:50%;
        margin:-100px 0 0 -100px;
        width:200px;
        height:200px;
  }

  .Title {
        float: left;
        font-family: Tahoma, Helvetica;
        font-size: 21px;
        padding-left: 30px;
        width: 250px;
  }

  .Text {
        float: left;
        font-family: Tahoma, Helvetica;
        font-size: 13px;
        line-height: 13px;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 15px;
        width: 518px;
        white-space: nowrap;
  }

  .popover-content {
          line-height: 16px;
  }

  .popover {
        max-width: 450px;
  }

  #shellinaboxframe,
  #shellinaboxdiv {
        min-width: 100%;
        min-height: 100%;
  }

  .justgage {
        display: inline-block;
  }

  .row {
         display: inline-block;
  }
  @media screen and (min-width: 1025px) {
        .column-fluid {
          -webkit-column-rule: 1px solid #f0f0f0;
          -moz-column-rule: 1px solid #f0f0f0;
          column-rule: 1px solid #f0f0f0;
        }
  }
  @media screen and (min-width: 1025px) and (max-width: 1526px) {
        .column-fluid {
          -webkit-column-count: 2;
          -moz-column-count: 2;
          column-count: 2;
        }
  }
  @media screen and (min-width: 1526px) {
        .column-fluid {
          -webkit-columns-count: 3;
          -moz-column-count: 3;
          column-count: 3;
        }
  }

  /*--- -- --- -- ---*/
  /* -- DARK MODE -- */
  /*--- -- --- -- ---*/

  /* Nav & Menu */
  .dropdown-menu,
  .navbar-inverse .navbar-nav > .active > a,
  .navbar-inverse .navbar-nav > .active > a:focus,
  .navbar-inverse .navbar-nav > .active > a:hover {
          background-color: #3c3c3c !important;
  }

  .dropdown-menu > li > a {
          color: gray !important;
  }

  .dropdown-menu > li > a:hover {
          background-color: #6a6a6a !important;
          color: white !important;
  }

  body {
          background-color: #1a1a1a !important;
          color: rgb(150, 150, 150) !important;
  }

  /* Status */
  .list-group-item {
          background-color: #1a1a1a !important;
          color: white !important;
  }

  hr {
          border-color: black !important;
  }

  .column-fluid {
          column-rule-color: black !important;
  }

  .justgage svg text {
          filter: contrast(0%) !important;
  }

  /* Statistics */
  td {
          color: white;
  }

  .legendColorBox,
  .legendLabel {
          background-color: #3c3c3c;
          color: lightgray;
  }

  .btn,
  input[type="button"],
  select {
          background-color: #222222;
          color: lightgray;
  }

  .btn:hover,
  input[type="button"]:hover,
  select:hover {
          color: gray;
  }

  /* Addons */
  .panel-default > .panel-heading {
          background-color: #6a6a6a !important;
          color: white !important;
  }

  .panel-body {
          background-color: #3c3c3c;
          color: white;
  }

  /* Options */
  .modal-content {
          background-color: #3c3c3c !important;
          color: white;
  }
  /*--- -- --- -- ---*/
  /* -- DARK MODE -- */

[costispavlou]

@costispavlou Here is my config, its not perfect, but it gets the job done

Legend. Thank you.

[costispavlou]

anyone knows where the linux icon is located ? i want to replace it with a png so as to remove the white background

edit: found it. its in /web/img/version.png

attached for your ease

also attached for cpu_temp