leopheard commented 5 years ago

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 commented 4 years ago

That would be awesome!

DaniW42 commented 4 years ago

@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 commented 3 years ago

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 commented 2 years ago

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 commented 2 years ago

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 commented 2 years ago

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;
}

color: white Issue

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

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

tblaase commented 1 year ago

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 grafik

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;
}

grafik

costispavlou commented 1 year ago

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 commented 1 year ago

@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 commented 1 year ago

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

costispavlou commented 1 year ago

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 version

also attached for cpu_temp

Ptifredy commented 1 week ago

Hello, My Dark Theme :

/*

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/.
*/

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

/ Main marketing message and start button / .progress { font-weight: bold !important; text-shadow: rgb(100 100 100) 1px 0px 0px, rgb(100 100 100) 0.540302px 0.841471px 0px, rgb(100 100 100) -0.416147px 0.909297px 0px, rgb(100 100 100) -0.989992px 0.14112px 0px, rgb(100 100 100) -0.653644px -0.756802px 0px, rgb(100 100 100) 0.283662px -0.958924px 0px, rgb(100 100 100) 0.96017px -0.279415px 0px !important; background-color: #000000 !important; box-shadow: 0px 0px 1px 1px rgb(74 74 74) !important; -webkit-box-shadow: 0px 0px 1px 1px rgb(74 74 74) !important; }

.label { font-size: 100% !important; text-shadow: rgb(0 0 0) 1px 0px 0px, rgb(0 0 0) 0.540302px 0.841471px 0px, rgb(0 0 0) -0.416147px 0.909297px 0px, rgb(0 0 0) -0.989992px 0.14112px 0px, rgb(0 0 0) -0.653644px -0.756802px 0px, rgb(0 0 0) 0.283662px -0.958924px 0px, rgb(0 0 0) 0.96017px -0.279415px 0px !important; }

.table { margin-bottom: 0px !important; }

.table>tbody>tr>td, .table>tfoot>tr>td { padding: 4px !important; }

.table>thead>tr>th, .table>tbody>tr>th, .table>tfoot>tr>th, .table>thead>tr>td, .table>tbody>tr>td, .table>tfoot>tr>td { border-top: 1px solid #545454 !important; }

.badge { border-radius: 4px !important; }

.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: 280px; text-shadow: rgb(100 100 100) 1px 0px 0px, rgb(100 100 100) 0.540302px 0.841471px 0px, rgb(100 100 100) -0.416147px 0.909297px 0px, rgb(100 100 100) -0.989992px 0.14112px 0px, rgb(100 100 100) -0.653644px -0.756802px 0px, rgb(100 100 100) 0.283662px -0.958924px 0px, rgb(100 100 100) 0.96017px -0.279415px 0px; }

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

/ Popup Packages / .popover-content { background-color: #505050 !important; }

.popover { max-width: 450px; border-radius: 3px !important; border: 1px solid #404040 !important; box-shadow: 0 2px 3px #555555 !important; } .popover-title { background-color: #656565 !important; border-bottom: 1px solid #1d1d1d !important; border-radius: 3px 3px 0 0 !important; }

shellinaboxframe,

shellinaboxdiv {

    min-width: 100%;
    min-height: 100%;

}

.justgage { display: inline-block; } feFlood { flood-color: navy !important; flood-opacity: 0.7 !important; }

.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; } }

/ Nav & Menu / .navbar-inverse { background-color: #1d1d1d !important; border-color: #656565 !important; }

.navbar-inverse .navbar-brand { color: #e7c000 !important; font-weight: bold !important; text-shadow: #656565 1px 0px 1px, #656565 0.540302px 0.841471px 1px, #656565 -0.416147px 0.909297px 1px, #656565 -0.989992px 0.14112px 1px, #656565 -0.653644px -0.756802px 1px, #656565 0.283662px -0.958924px 1px, #656565 0.96017px -0.279415px 1px !important; }

.navbar-inverse .navbar-nav > .active > a, .navbar-inverse .navbar-nav > .active > a:focus, .navbar-inverse .navbar-nav > .active > a:hover { background-color: #656565 !important; }

.dropdown-menu { background-color: #3c3c3c !important; border: 1px solid #656565 !important; }

.dropdown-menu > li > a { color: #fefded !important; border-top: 2px solid #3c3c3c !important; border-bottom: 2px solid #3c3c3c !important; }

.dropdown-menu > li > a:hover { background-color: #6a6a6a !important; color: #e7c000 !important; border-top: 2px solid #303030 !important; border-bottom: 2px solid #303030 !important; }

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

/ Status / .list-group-item { background-color: #212529 !important; color: white !important; margin-bottom: 8px !important; }

hr { border-color: #212529 !important; }

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

.justgage svg text { filter: none !important; fill: #f7f7f7 !important; } / Statistics / td { color: white; }

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

.btn, input[type="button"], select { background-color: #008ae6; color: #ffffcc; }

.btn:hover, input[type="button"]:hover, select:hover { background-color: #055489; color: #e7c000; }

/ 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; }

.glyphicon { color: #ffbc00 !important; }

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

XavierBerger / RPi-Monitor

Dark theme #264

Make a backup!

Edit .css file

Optional: Adjust colours

In case something bricks: revert to original state

This won't be persistent during updates

mygraph {

preloader {

shellinaboxframe,

shellinaboxdiv {