/* Per default, assume light mode styling .        
   If the "media"-thing below works properly
   and detects "dark" mode configured in the browser, 
   it changes a few elements (back- and foreground colours). 
   Like many other things in 'modern' browsers,
   this only worked as expected in A FEW browsers.
 */

body {
  --bg-color: #FFF; 
  --text-color: #000;
  --link-color: #00F;
  --preformatted-text-color: #000;
  --preformatted-bg-color: #EEF;
  --quoted-text-color: #000;
  --quoted-bg-color: #EEF;

  background-color: var(--bg-color);
  color: var(--text-color);
}


.only-on-dark {
  display: none;
}

@media (prefers-color-scheme: dark) {
  body {
    --bg-color: #000;
    --text-color: #FFF;
    --link-color: #ACF;
    --preformatted-text-color: #FFF;
    --preformatted-bg-color: #226;
    --quoted-text-color: #FFF;
    --quoted-bg-color: #056;
  }

  /* The "only-on-dark" class is a trick suggested on stackoverflow to select 
   * different IMAGES for dark and light ("normal") mode without Javascript.
   * Example:
   *  <img class="only-on-dark" src="UseThisImageForDarkMode.png" />
   *  <img class="only-on-light" src="UseThisImageForLightMode.png" />
   */
  .only-on-dark {
    display: block;
  }
  
  .only-on-light {
    display: none;
  }

  .color-invertible { 
    /* Trick to simply invert the colours of certain images (e.g. oscilloscope screenshots).
     * Avoids having to store two images on the website. Intended use:
     *   <img class="color-invertible" src="image.png"/>
     */
    filter: invert(100%);
  }

} /* end "at media prefers-color-scheme: dark" */

a { text-decoration-line: none; font-weight: bold; color: var(--link-color); }
pre { background-color: var(--preformatted-bg-color); color: var(--preformatted-text-color); }
.quoted { background-color: var(--quoted-bg-color); color: var(--quoted-text-color); }