ReVanced / revanced-website

🌐 Website for ReVanced
https://revanced.app
GNU General Public License v3.0
313 stars 42 forks source link

feat: Apply themes on specific events #227

Closed madkarmaa closed 3 months ago

madkarmaa commented 9 months ago

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 commented 9 months ago

TODO

madkarmaa commented 9 months ago

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

madkarmaa commented 9 months ago

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

Ushie commented 5 months ago

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 commented 5 months ago

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

Ushie commented 5 months ago

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 commented 5 months ago

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

Ushie commented 5 months ago

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

oSumAtrIX commented 5 months ago

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

PalmDevs commented 3 months ago

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

madkarmaa commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

validcube commented 3 months ago

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 commented 3 months ago

Semantics need to be kept