Default colour for sleep mode text is too dark

[joelis10]

Describe the bug Likely not a bug and can be fixed with custom CSS, but in my opinion, the default sleep mode text is waaayy too dark. I can barely read it from a distance on my small clock, which is where it would be the most helpful.

To Reproduce Steps to reproduce the behavior:

1. Add a start and end time for immich-kiosk's sleep mode to your environment variables;
2. Try and read the text at localhost:3000.

Expected behavior Sleep mode text is actually readable somewhat or at least customisable using envrionement variables/custom CSS with docs on which variables/elements need customising.

Screenshots

Your Kiosk version 0.13.0

Your Kiosk installation Docker

Your Kiosk ENV or config file

  immich-kiosk-clock:
    image: damongolding/immich-kiosk:latest
    container_name: immich-kiosk-clock
    environment:
      TZ: "Europe/London"
      KIOSK_IMMICH_API_KEY: ""
      KIOSK_IMMICH_URL: "http://192.168.1.0:2283"
      KIOSK_DISABLE_UI: FALSE
      KIOSK_SHOW_DATE: TRUE
      KIOSK_DATE_FORMAT: DDD DD MMM YYYY
      KIOSK_SHOW_TIME: TRUE
      KIOSK_TIME_FORMAT: 24
      KIOSK_REFRESH: 60
      KIOSK_ALBUM: 50d4382c-ae8b-4ec3-a181-2b832f13829a
      KIOSK_IMAGE_FIT: CONTAIN
      KIOSK_BACKGROUND_BLUR: TRUE
      KIOSK_TRANSITION: NONE
      KIOSK_SHOW_PROGRESS: TRUE
      KIOSK_SHOW_IMAGE_TIME: FALSE
      KIOSK_SHOW_IMAGE_DATE: FALSE
      KIOSK_CACHE: TRUE
      KIOSK_SHOW_IMAGE_LOCATION: FALSE
      KIOSK_SLEEP_START: 22
      KIOSK_SLEEP_END: 8
    ports:
      - 3001:3000
    restart: on-failure

Any parms passed to the URL used to access Kiosk None

Desktop: Firefox 132.0 (64-bit)

Smartphone: Home Assistant 2024.11 iFrame

Additional context None

[damongolding]

It's a tough one to get right. I have a few screens and the dimness varies depending on which one is running it.

You can use custom css to up the opacity no problem. Looking now the custom css documentation is slightly outdated, but in essence you just need to mount a css file to /custom.css in the container.

The selector is:

.sleep #clock{
  opacity: 0.1;
}