File: thumbspage/template-autothemes.html

<STYLE>

/*---------------------------------------------------------------------
[3.0] CSS code for automatic dark theme per host device's settings.
Auto-added to generated index and viewer pages if useCannedDarkTheme 
in user_configs.py is 'host' or 'always'.  'always' uses the dark mode 
here whether set on host or not, and 'host' toggles between dark mode 
here and other color configs per the host device's mode setting.

This is a template with two uppercase replacements and a %% escape.
Its BODY:not(#body-viewer) and BODY#body-viewer mean only index and 
pages, respectively (<body> may be in a custom HEADER.html for indexes).
Its rules generally override host pages (and hence, user_configs.py), 
subject to CSS specificity and ordering.  Themes can be coded in 
JavaScript too, but CSS is auto-responsive to host-setting changes.

Edit this file as desired, but please mod this brittle code with care
if you're unfamiliar with CSS; it's complex because thumbspage was not
originally designed for this use case, and this file overrides and 
does not mesh with the original and simpler color-configs model.

For more info, see the comments at user_configs.py's useCannedDarkTheme
switch and the overview in UserGuide.html#3.0.

Nit: this may have been coded more simply as a top-level media query 
that selects between light and dark color sets, but we also need to
override colors in custom index-page headers but not custom index-page 
footers, and these may use arbitrary styling.  Feedback is welcome.
-----------------------------------------------------------------------*/


/* LIGHT MODE, PER HOST */

@media (prefers-color-scheme: light) {        /* if light mode on host, now or post change */
  
  /* tbd: if used, overrides some user_configs.py settings */

}


/* DARK MODE, PER HOST OR FORCED */

@media %(FORCEDARKMODE)s (prefers-color-scheme: dark) {

  /* if dark mode on host, now or post user change */
  /* used for light _or_ dark if forcing dark theme */ 

  BODY:not(#body-viewer) {                    /* index page only, may have HEADER/FOOTER.html */
      color: %(DARKINDEXFGCOLOR)s;            /* off-white, #e0e0e0 between #eee and #ddd */
      background-color: %(DARKINDEXBGCOLOR)s; /* off-black, #121212 per material design (black=#000) */
  }

  /* viewer-page global fg/bg colors use a template-viewpage media query */

  IMG {                                       /* all image borders, index and viewer pages */
      border-color:                           /* !important to override style= attr in HTML */
          %(DARKTHUMBSBDCOLOR)s !important;   
  }

  #theimg {                                   /* border of images in viewer pages only */
      border-color: 
          %(DARKVIEWERBDCOLOR)s !; 
  }

  BODY:not(#body-viewer) IMG {                /* else bright imgs can make text hard to read */
      filter: brightness(90%%);               /* but just for index, not viewer pages; %%=one */
  }

  #thumbslinks {                              /* index-page table (fixed) or div (dynamic) */
      border-color: %(DARKTHUMBSBDCOLOR)s !important;       /* !important: override HTML style= */
      background-color: %(DARKTHUMBSBGCOLOR)s !important;
  }

  #thumbslinks TD {                           /* image labels/captions in thumbs table (fixed) */
      color: %(DARKTHUMBSFGCOLOR)s !important;
  }
  #thumbslinks DIV:last-child {               /* image labels/captions in thumbs div (fixed) */
      color: %(DARKTHUMBSFGCOLOR)s !important;
  }

  BODY A {                                    /* index-page hyperlinks, overrides HEADER.html */
      color: %(DARKLINKSCOLOR)s;              /* not !important: may mod links in FOOTER.html */
  }                                           /* & not > specificity "BODY:not(#body-viewer)" */ 

  BODY#body-viewer A {                        /* hyperlinks on viewer pages + <a> tags in Notes */
      color: %(DARKLINKSCOLOR)s !important;   /* there is no footer to impact on viewer pages */
  }

  .NoteBox, .InfoBox  {                       /* viewer popups in dark theme: note, info, msg */
      color: %(DARKPOPUPFG)s;                 /* can be configed in user_configs.py vs here */
      background-color: %(DARKPOPUPBG)s;      /* viewer page is implied: not in indexes */
      border-color: %(DARKPOPUPBD)s;          /* border of popups viewer (!= border of image) */
  }
}

</STYLE>