feat: event-based theme

[madkarmaa]

What is this?

Read #226

Description

I've created a simple JS library called DateTrigger, which executes given code on given dates, just like the issue describes. The library is now added to the dependencies, and used in +layout.svelte so the changes can be globalized. While the library itself doesn't do anything on its own, it got supplied with a default set of events which, once again, fullfill #226 at least partially (changing CSS color variables). The variables selection can be tweaked according to your liking, and if the default events aren't enough or don't feel right, custom events can be created.

How to test if it works?

Change the parameter passed to DateTriggerEventsHandler with the following:

{
	TEST_EVENT: new DateTriggerEvent(new Date(), 10, () => {
		document.documentElement.style.setProperty('--text', '#e6e8fe');
		document.documentElement.style.setProperty('--accent', '#f62e65');
		document.documentElement.style.setProperty('--secondary', '#960670');
		document.documentElement.style.setProperty('--background', '#010215');
		document.documentElement.style.setProperty('--primary', '#7082f9');
	})
}

The event should fire immediately.

~~A little concern~~ fixed in f3aeadc

~~The library cannot work (with default events) if it doesn't have access to the document object, but using browser from $app/environment is really slow, at least on my end.~~

[madkarmaa]

TODO

• [x] Add to npm registry
• [x] Convert to TypeScript
• [x] Make sure compiling TS outputs types
• [x] Merge build and release workflows in 2 different jobs
• [x] Create custom events to change the HUE

[madkarmaa]

@KTibow is this ( 97e3092 ) what you wanted here ?

[madkarmaa]

colors look a bit odd but I hope they're decent. if not, they can be tweaked

[Ushie]

Hey!

I would like to take a different approach than this, the shifting in the theme is very noticeable! I don't think there's any way to prevent that, so instead it would make sense to handle this at build time

We would have a theme deployer that runs on the build of the website, that creates the theme that the website will use, and we can then assign cronjobs (or something else) to redeploy the site during events automatically

I looked into what method to use to deploy the theme, whether we would manually create a file or so, but it seems like there's a package called svelte-preprocess which seems fitting

[oSumAtrIX]

Build time has previously been dismissed as unsuitable. If the theme shifting is noticeable, add a transition if it is not preventable.

[Ushie]

Build time has previously been dismissed as unsuitable

Why? I opened all the previous reviews and I saw nothing related to this, I don't see any reason why build time would be considered unsuitable, it is the most elegant and seamless route

[oSumAtrIX]

It was discussed on Discord. The reason is that it needs re-building the project.

[Ushie]

Why is that a problem? it's hardly 10 times a year

[oSumAtrIX]

The final product does not include the source. If your product depends on its source after building it, you are doing something wrong.

[PalmDevs]

Don't forget to fix conflicts! If you have issues with that, let me know so I can fix them for you.

[madkarmaa]

Don't forget to fix conflicts! If you have issues with that, let me know so I can fix them for you.

please do Idk what to accept

[madkarmaa]

it would make the text unreadable to some. I would suggest fallback to the original font instead.

how about a random chance of it happening? a simple page refresh would remove it. if that's still not good enough then I'll just remove it entirely @validcube

[oSumAtrIX]

@madkarmaa it would be unreadable by chance then, better mske it readable for everyone

[validcube]

https://github.com/ReVanced/revanced-website/commit/5b70844f3d99cf3d80e1ec01c5a6a5ffe6c8ae51 😭😭 was suggesting that we should remove the calligraphy style (“cursive”) font because it's not readable compared to comic sans which dyslexic user can read (more comfortably)

[oSumAtrIX]

Semantics need to be kept