Minimal tweak: Automatic night mode

238 views
Skip to first unread message

bimlas

unread,
Nov 19, 2020, 5:29:33 PM11/19/20
to TiddlyWiki
To set automatic night mode (dark mode), create a new tiddler and add the $:/tags/PageTamplate tag.

<$vars
  currentTime=<<now "hhmm">>
  nightStart="2000" <!-- 20:00 -->
  nightEnd="800" <!-- 8:00 -->
>
  <$list filter="[<currentTime>compare:number:gteq<nightStart>] [<currentTime>compare:number:lt<nightEnd>]">
    <style>
      html {
        filter: invert(1) hue-rotate(180deg);
      }
      html img {
        filter: invert(1) hue-rotate(180deg);
      }
    </style>
  </$list>
</$vars>

Mohammad

unread,
Nov 20, 2020, 12:45:10 AM11/20/20
to TiddlyWiki
bimlas,
 This is really amazing! have a look at the ongoing discussion at GitHub: 


 I like the having a button on the page control to switch day/night and solution you provided for automatic switch.

Best
Mohammad

Mohammad

unread,
Nov 20, 2020, 12:50:40 AM11/20/20
to TiddlyWiki
a minor typo

change

  nightStart="2000" <!-- 20:00 -->
  nightEnd="800" <!-- 8:00 -->

to 
  nightStart="2000" 
  nightEnd="800" 




On Friday, November 20, 2020 at 1:59:33 AM UTC+3:30 bimlas wrote:

bimlas

unread,
Nov 20, 2020, 2:18:10 AM11/20/20
to TiddlyWiki
Mohammad,

Thanks! I managed to spoil a working code again during publishing. Since I can't edit the original post (another negative in the new Google Groups interface), I'm copying the fixed code.

<$vars
  currentTime=<<now "hhmm">>
  nightStart="2000"
  nightEnd="800"
>
  <$list filter="[<currentTime>compare:number:gteq<nightStart>] [<currentTime>compare:number:lt<nightEnd>]">
    <style>
      html {
        filter: invert(1) hue-rotate(180deg);
      }
      html img {
        filter: invert(1) hue-rotate(180deg);
      }
    </style>
  </$list>
</$vars>

*singing* Do not shaaare untested cooode even if you adding only commeeeeeeents...

bimlas

unread,
Nov 20, 2020, 3:05:02 AM11/20/20
to TiddlyWiki
Found another bug (-_-' ) ...
Change <<now "hhmm">> to <<now "hh0mm">>

Mohammad

unread,
Nov 20, 2020, 6:08:46 AM11/20/20
to TiddlyWiki
Works great! This is really smart solution. I played a little with hue-rotate and it is ful :-)

Thank you! 

bimlas

unread,
Nov 20, 2020, 9:15:50 AM11/20/20
to TiddlyWiki
To get less contrasting colors, decrease the invert value, e.g. 0.85

Mohammad

unread,
Nov 20, 2020, 9:51:27 AM11/20/20
to TiddlyWiki
Beautiful! 

TW Tones

unread,
Nov 22, 2020, 8:50:10 PM11/22/20
to TiddlyWiki
Bimlas,

Nice share. I am playing with it now, to understand how it works, it restores to day when I close the tiddler. 

Using this filter invert gives me the clue I was looking for, a way to get Icons to be given contrasting colors. Without even knowing the color one can use its rotated hue. 

  • Somehow I feel this feature could be built into svg display or designs to allow a primary colour to be selected freely knowing its background as an example will contrast.
  • my interest is to allow designers to use alternate colors on available icons when adding a new button feature, but we always have the issue of "other themes", changes in background color etc...
  • This may also apply to svgs from the icon source Mohammad shared recently
Nice work
Tones

Osin

unread,
Jan 25, 2021, 1:25:39 PM1/25/21
to TiddlyWiki
I just tried this, it seems to change only the story view and tiddler area. Any way for it to apply to the whole TiddlyWiki view?
Reply all
Reply to author
Forward
0 new messages