Dark Mode Support/Theme

[rtakehara]

Is your feature request related to a problem? Please describe.
The framework doesn't look good on dark mode

Describe the solution you'd like
Maybe an option on settings to change dark mode theme to the framework, if possible, per player setting.

Describe alternatives you've considered
Auto detecting Dark Mode would be even better but I am happy with a settings option.

Additional context
Maybe some tweaking on CSS should be nessesary since a lot of design elements rely on basic HTML, not elegant at all...

[KyleFS]

Hi @rtakehara,
I'd like to help with this enhancement but I'm not sure the best way to help.

How would you want me to contribute? All the code is stored in the cmpgn file which is basically a zip. This unfortunately makes code tracking quite cumbersome. Is the easiest way to open a new branch, create a new cmpgn version with updated code and then submit a pull request?

[rtakehara]

I am not sure @KyleFS , I am no programmer, I never did that and I have no idea how github deals with these branches or how they work at all. But I imagine that yeah, that's probably the easiest way unfortunately.

[KyleFS]

My only concern with makes the changes in this way is that we're unable to work in parallel. If you make a release before I finish my changes, my release is scrapped and vice versa.

My favourite approach I've come across thus far is using a compiler like on this project: https://github.com/Blackflighter/5e-Framework . This would allow Github to track content.xml in the cmpgn file and work can be merged much more easily.

[rtakehara]

so is content.xml where everything in the framework is stored? Then it can track differences on each code and allow us to work on parallel? That seems great! But again, I am a novice on this sort of thing. I think I get the concept, but I have no idea were to start.

[KyleFS]

Ya, if you unzip the cmpgn file, you'll see its 3 things:

1. A folder called "assets" with all the images and their associated metadata
2. properties.xml - metadata for the campaign, not particularly interesting
3. content.xml - This includes pretty much all the real data. All your macros, all the token data, etc.

I think the the easiest way to move forward would be to create a new folder in the root of the Github project called 'src' or something similar and put the unzipped files in there. Then the changes can be tracked by Github. When a new release is ready, the src can be 'compiled' and released in the Versions directory.

[KyleFS]

@rtakehara I created a fork of the campaign, added a src folder and started updating some HTML. You can see the progress here: https://github.com/KyleFS/5e-Framework .

The HTML was a little inconsistent so I figured the best course of action is an entire refactor. I switched the Macro Viewer for NPC/PC to use the HTML5 option and created a new CSS file on lib:campaign. From there, I started updating NPC and PC statblock HTML. Im just starting with a clean up so theres a lot more left to do.

Quick question: whats the code to check if dark mode is enabled? I see the setting in the campaign menu but I dont know how to check if its enabled or not.

[rtakehara]

I see, very interesting! And since you forked the campaign, do I need to create this src folder or will it be created once you merge it back? Or better yet, if I create it with the changes I made, will it handle both versions fine?

And yeah, the HTML is all over the place, I learned a lot about CSS during the developing of this framework (by a lot I mean from not having a clue what it is, to wanting to do something and succeeding), but never back tracked to improve old code, fearing I would break something that is already working.

The setting is stored in a json object in the property "Display" on "Lib:Campaign", you can get it with getLibProperty("Display","Lib:Campaign") and then getStrProp(display,"darkMode")

I've been busy lately so I haven't changed much, but I plan to change that somehow, for now only the GM can make these changes but if I could somehow allow each player to have it's preferred theme it would be great.

My Ideas to achieve it so far is either make a json on Lib:Campaign with all players and their settings, or store it on the (not yet implemented) Character Library Token.

[KyleFS]

Once my code is more finished, we create whats called a "Pull Request" and my fork gets merged into your work (assuming you approve it). As such, you don't need to create a "src" folder.

To see what content.xml tracking looks like in Github, take a look at the following link:

https://github.com/KyleFS/5e-Framework/commit/549511832ee6531165442f81469ba5b167a8d805

The key to this is to "unzip" the campaign each time and commit the contents of the cmpgn file. If you don't regularly commit those, it wont know what to merge.

edit: also, in that latest commit, theres the first pass at a "dark mode". I set it up with 3 CSS macros - statblock, DarkTest, LightTest. Statblock brings in structure whereas DarkTest and LightTest just bring in the appropriate colours.

[rtakehara]

Oh, now things are starting to make sense!

And about statblock, dark and light, you mean statblock will have sizes and distances, and dark and light will just come with colors, meaning making more themes later will be super easy, right? changing from on/off dark mode to selecting from a list? That's awesome.

[KyleFS]

Yup, thats the plan! The statblock CSS-macro has all the styling and relies on CSS variables for coloring. The Dark and Light CSS-macros just provide values for those variables. Like you said, it would be easy to add another CSS-macro with a different set of values. The logic for which files to load is in the "macro viewer" macros. You had the CSS calls in those macros so I followed your lead.

Unfortunately, the existing HTML can't really be adapted. You were using the frame and dialog boxes rather than frame5 and dialog5 so you were targeting a weird Java HTML4 implementation rather than a more standard HTML5 "browser". Furthermore (and I mean no offence (I'm crazy impressed that you got all of this done with minimal pre-existing knowledge)), the HTML isn't "correct" (you're missing a lot of closing tags) so the bulk of the work is refactoring the HTML. Adding the new CSS is minor by comparison.

As it stands, I've done a first pass at NPC statblock, PC statblock. I'm currently in the middle of PC spellcasting. Theres tons of HTML in tons of macros so it'll be an ongoing project to bring them all in-line.

I've made as few changes to the macro code as possible but I have seen a few things that could be optimized down the road.

[rtakehara]

awesome! Sorry for being inactive, personal life getting in the way.

And yeah, no offence taken haha, I know it's bad, my priorities were:

1. do what It's supposed to do
2. be intuitive
3. look good
4. work fast
5. have a nice looking code

That's why I didn't close the html, it worked without closing... then I started having problems with that, so maybe not the wisest decision haha.