Theme support

[Just-Insane]

It would be nice to have a dark theme or user-selectable theme, or even a night-mode toggle available in the UI.

[Dorson]

I had the same issue and coded a working solution.

Works with one CSS file and basic JavaScript functions for the switch and color settings recall on load.

Here is the GitHub Demo page :

https://dorson.github.io/CSS-Dark-Mode-and-color-switch/

Feel free to copy, fork, adopt, port, etc...

[eikek]

Thank you for your input @Just-Insane – I can really understand this wish to have a dark theme. I'm using for the time being the dark-reader browser extension. It is obviously not optimal, but works good enough (for a lot of pages). I just found https://semantic-ui-forest.com/themes – maybe it is enough to simply refer to a different css.

@Dorson thank you! I'm going to take a look and see if it can help here. I'm using pre-build semantic-ui css framework, so I'm not sure if I can define color sets without including a customized semantic-ui build.

[Just-Insane]

These are both awesome solutions!

@eikek i saw those too, but I wasn’t sure where the default css for semantic-hi was called in the source when I was looking at it (changing the sharry.css file does not work).

[eikek]

@Just-Insane the semantic css comes in here. I think (not verified), if you put in here a url to a different style, it should work…. Requires recompile and everything, obviously.

[Just-Insane]

Just to clarify, should that be line 128 or line 123?

Line 123 points to semantic.min.css rather than semantic.min.js.

[eikek]

Oh sorry, you are right. It is line 123.

[Just-Insane]

So, I changed that line to:

        Seq(
          "https://raw.githubusercontent.com/semantic-ui-forest/forest-themes/master/dist/bootswatch/v4/semantic.darkly.min.css",
          s"/app/assets/sharry-webapp/${BuildInfo.version}/sharry.css"
        ),

and ended up with the following:

Which is not exactly what I was hoping for...

[eikek]

That seems to miss the standard semanticui styles. You could try adding this additional to the standard style… I have no clue, really.

[Just-Insane]

It looks like a dark theme would have to be created manually... this is the closest I've found, but it's missing a lot of the includes (they 404).
https://gist.github.com/Atulin/cb2d52c8165af4d74614be92fe9ec9b0

[eikek]

Ah that's too bad, thanks for trying out! Then I guess, this is quite some work. I don't think I can do it in the near future (PRs are welcome, of course). For the far away future :) I'm thinking to maybe migrate the ui to bulma-css, as it seems to be a better fit (no js involved and there are elm packages). If that happens, then I'm going to provide light and dark themes.

[eikek]

Update for this: I moved my other project from fomantic to tailwind and it was a very pleasant experience. I'm now thinking about doing the same for sharry. It's also easier to maintain both projects then:-). (for context see eikek/docspell#293.)