styles.css

/* Not finished */
/*--------------------------------------------------
# Create by ckforum
# june 2019
# release 2.0
# thanks to yoyo and librenms teams
# warning ! for backgroud of overlib 
# see https://github.com/librenms/librenms/pull/10300 
----------------------------------------------------*/

/* INSTALLATION ADD THIS BELOW TO YOUR CONFIG.PHP and delete this config add on comment */

/* SEE MORE @ https://github.com/librenms/librenms/blob/master/includes/defaults.inc.php */
/*

### DARK MODE
// text color graph
$config['rrdgraph_def_text_color'] = 'ffffff';

// Set to TRUE if you want to display the 95% based on the highest value. (aka real 95%)
// can't see the difference ...
$config['overlib_defaults'] = ",FGCOLOR,'#fff', BGCOLOR, '#000', BORDER, 5, CELLPAD, 4, CAPCOLOR, '#555555', TEXTCOLOR, '#ffffff'";

// Set this to false if you want to disable the mouseover popup graphs
$config['web_mouseover']    = true;

### custom style
# uncomment line below and replace the logo with yours
# $config['title_image'] = "images/custom/librenms_logo_light_ck.png";
# Create a sub dir in html/css folder and create a css files
$config['webui']['custom_css'][]       = "css/custom/styles.css";

### https://docs.librenms.org/Support/Configuration/#webui-settings
## this add style is based on mono theme
$config['site_style']       = "mono";
*/

:root {
  --body-bg: dark;
  --body-color: white;
  --anchor-color: red;
  --letter-spacing: 0;
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-bg: black;
    --body-color: white;
    --anchor-color: salmon;
    --letter-spacing: 0.1;
  }
}


@media screen and (prefers-color-scheme: dark) {
  body {
    background-color: black;
    color: white;
  }
}

@media (prefers-color-scheme: dark) {
  img {
    opacity: .75;
    transition: opacity .5s ease-in-out;
  }
  img:hover {
    opacity: 1;
  }
}