Night Mode on NeXT

[maddovr]

Is it possible to implement a Night Mode for the schemes and allow cookies to record the choice?

[ivan-nginx]

It is possible, yes.

[maddovr]

What's there to be done and how(in terms of coding style) in order to do that? I might do it myself, however I'd rather do things right™ and make a pull request, than do it in an ugly way(my idea is a button widget which will switch between day and night mode[placement imho should be in the sidebar which is a largely unused hideable space which won't break the look&feel of any site] with cookies which will record the choice for the user.

[ivan-nginx]

I see what u want and your idea is good, i think. This can be coded with JS CSS styles added and removed by clicking the switch button. 1 variant as i see it may be do by adding something like

  $button.on('click', function () {
//OR
  $('.button').trigger('click') {
   $('body').css({'background':'color'});
// And any other components & styles.
  });

to source/js/src/utils.js file.

1. Styles must be defined in variables at source/css/_variables path.
2. Need to add this styles to front-end for read by utils.js. See Register JS handlers by condition option in source/js/src/bootstrap.js file. U also can see example by adding CSS variables in #1697 pull (PART 7. Add tabs tag section).
3. After clicking on button it's called our JS code above and change on defined styles. It can do without refreshing the page and after that operation save switch state in cookies. To write in cookies there is source/js/src/js.cookie.js file.

But, to make this enchancement need to add Night theme before. Or night CSS variables. U can find night theme by Bear somewhere in pulls too.

[maddovr]

I've looked at Bear pull and his fork nextd too, however none of that can really be called a night mode theme imho(actually I find it rather different from next original concept). I think it might be better to implement night mode as the common "invert-color" and preserve the scheme(s) as it is. I'm open to suggestion regarding this, as I don't really have much experience regarding CSS/JS.

[ivan-nginx]

invert-color, yeah. Sounds good. So, need to google about inverting colors (invert color scss), i think. Also, will be good to find some simple examples with JS color inverting.

---

I found this gist: https://gist.github.com/AllThingsSmitty/3bcc79da563df756be46

[maddovr]

An update on this after a long absence:

• The invert color strategy is not a great idea cause the background would become way too dark for a comfortable reading(ideally it should be a Dark-grey color, see atom onedark for an example)

• The widget which does a change on-the-fly is something I truly can't do with my existing knowledge and my free time basically became nonexistent after :stuff: IRL

• While the simple idea of a dark gray background and white text works well for the Muse scheme, I can't seem to like the same idea applied to all other schemes

I'd be very grateful if someone wants to take this up, also suggestion for the other schemes(assuming that we would create basically other "schemes" in addition to the current existing ones) are welcome.

[stevenjoezhang]

https://github.com/next-theme/hexo-theme-next