(PoC/WIP)Theme selection

[xse]

• Live demo : http://krkrkr.org

• Forum might not work atm (did not setup a phpbb clone yet)

So when a visitor comes if he doesn't have an already selected theme, this place a default object containing the default theme configuration in his browser storage.
He can switch themes using an html select thingy on the index, if he does the new theme configuration is applied & stored.
So far there is only one theme and it's just tweaks for the default one, so default is always on and the Halloween one gets enabled/disabled as needed.

To add a new theme you need to :

1. Include it here as usual on the top of default.html & post.html
2. Add the option inside the select thingy in index.php
3. Add it in themes.js inside the user_themes_default object :

const user_themes_default = {
  0: true, // css.css will always be true as long as the design doesn't change.
  1: false // css-halloween.css, if true the Halloween theme is activated.
  2: true // possible new theme, activated on top of the default one.
};

• TODO :

1. I don't like how adding a new theme requires 3 separate actions, maybe use themes.json that once parsed does the other actions ( bloated ?... ).
2. Optimizations/Cleanup comments and such.
3. Checking the forum part, i did not look into that yet maybe that will work directly maybe not.
4. The select html tag needs css beautification i'm bad at css.

Anyway, any thought ?

[def-]

Great!

About 1: How about just storing which additional css file should be loaded as a string like "css-halloween.css"? But then you'd have to be careful not to allow including a css from an untrusted domain.
About 3.: Don't worry about the forum.

[edg-l]

Maybe you could turn the select into a simple switch button that clearly shows which is on/off.

https://www.w3schools.com/howto/howto_css_switch.asp

[def-]

Ready to be merged? Could it share the forum setting even though the forum is in forum.ddnet.tw instead of ddnet.tw?

[xse]

nope some cleanup to do i left some console.log calls and i think i need to handle the case when default_theme is set to something, will be soon tho

EDIT : for the forum i don't know the link is as "/thefile.css" so if that file exists at the / of forum.ddnet.tw it should work

[xse]

Indeed i did not thought about the forum, it's on a different subdomain i'll have to rewrite the storage part for it to to use a cookie.

code is way simpler but with limitations :

1. Only one theme available ( it's a checkbox )
2. Default theme is only useful for users that don't already have a theme stored. ( e.g if user prefers no theme he'll keep using no theme even if there is a new default_theme )
3. Users that don't have js activated will always use no theme (they never download the css) whereas as it is now they do.

Are any of those problematic/needed ?

To add a new theme just modify the available_theme variable.

var available_theme = "/css-halloween.css";
const default_theme = "";

Alright i'll start on the cookie storage part by tomorrow have a good day !

[def-]

Thanks a lot, sounds all good to me :)

[xse]

http://foo.krkrkr.org/ - http://bar.krkrkr.org/

As long as the script is called in the page and somefile.css is at / of that domain/subdomain it should work, did not do extensive testing tho

[def-]

The switch stays on dark when you switch one to bright but still have the other tab open and press f5 there, even though the color changes.

[xse]

Should be fixed 👍

[def-]

I'd like to merge it and see how it works in production. Anything you still want to clean up before that?

[xse]

nope i mean can change default_theme if you want the default to be halloween style otherwise it's fine.
I'd still advise backup in case that breaks something as i can't test extensively on a "real" environment like on the pages i don't have in my copy, the forum and so on.

edit : demo not available atm server in maintenance for a defective memory module.

[xse]

@def- for example right now on ddnet.tw, https://ddnet.tw/ranks/ gets the halloween css but if i search my nickname https://ddnet.tw/players/-9835-/ i don't get that css.

The /ranks directory does not exist in that repo, & the thing is /players exists and is apparently based on the default layout, where the css is included, so there's an issue here. Must have been generated before that halloween css were included or something like that, i don't know how that's organized in production

[def-]

Huge thanks! I'll fix it up for forum and scripts now :)

[def-]

Hm, doesn't seem to work with the forum. And it's a bit annoying that it first loads in the bright color and then switches to dark.

[xse]

Doesn't work on the forums because themes.js isn't at the forum /

Yeah indeed the flickering can get annoying i'm gonna try to see if i can fix it as soon as i get a bit of free time

[def-]

Doesn't work on the forums because themes.js isn't at the forum /

Fixed, still not working.

[def-]

Actually the forum had its own halloween style, I guess it'll be hard to make that switch too. So no worries.

[xse]

I mean there is code for the forum on the halloween file.
Is css-halloween.css avaiable at the / of that forum ?

[def-]

Ah nope, that's also at //ddnet.tw/css-halloween.css. Should I symlink it or what's the easiest fix?

[xse]

As you wish either symlink it or otherwise themes.js could checks for the url and add "//ddnet.tw//css-halloween.css" if it is on the forums, same results i guess

[def-]

Great, works! Should I write a news article for this or should we wait to see if you can fix the flash first?

[xse]

yeah i'll try to fix that first, no needs for an article about that 👍

[xse]

Ok solution to fix flickering basically involves adding the halloween style on post & default and enabling/disabling in using js instead of adding it only if needed

edit: demo should work without flickering atm
edit : see #70