Dark mode support

[asharonbaltazar]

Dark mode (mentioned in #9 ) is now enabled via @media (prefers-color-scheme: dark). Colors will probably need to adjusted.

(I've had another pull request, but I took it down due to conflicts. Still learning Git as I go).

[blenderskool]

@asharonbaltazar Thank you for the PR. As I mentioned in the issue we first need to extract the colors as CSS variables to the root App component so that we don't have to add the media query to every single component to change the color.

Also, I'm wondering why the unchanged files also getting committed. Maybe look into how you are adding and committing files once again?

[asharonbaltazar]

Okay, but how would I be able to change the classes for the various elements?

[blenderskool]

@asharonbaltazar I would suggest you to take a look at CSS variables. Using that we can only change the value of variables at one place and all the styles using that variable would update automatically!

[asharonbaltazar]

I understand CSS variables, but how would this:

so that we don't have to add the media query to every single component to change the color.

work?

Assuming you're referring to App.svelte, how are we going to pass the variables to Input.svelte, Results.svelte, and Result.svelte, which, mind you, all use different colors?

[blenderskool]

@asharonbaltazar We don't have to pass the CSS variables. The variables defined in App.svelte will be automatically accessible in all the child components (as long as the CSS variables are part of the global stylesheet).

Also as you mentioned that Input.svelte, Results.svelte and Result.svelte have different colors, let me try to make them consistent so that we can have a strong light theme to start with 🙂

[asharonbaltazar]

Okay, easy peasy. Looking forward for those updated colors.

[blenderskool]

@asharonbaltazar Closing in favor of #32