Pictogrammers / pictogrammers.com

Code for Pictogrammers.com
https://pictogrammers.com
80 stars 18 forks source link

WIP: Start using dark mode #48

Closed andrejsharapov closed 1 year ago

andrejsharapov commented 1 year ago

I made a few changes to create a dark theme (feat #8). This is just an idea from a couple of mixins and variables, but I think it would be nice to start rethinking the use of colors directly in blocks and replace them with theme-specific variables:

// from
--white: #fff;
background-color: var(--white);
// to
--white: #fff;
 --bg-color: var(--white);
background-color: var(--bg-color);

So it will be possible to create not only dark and light, but also custom themes.

mririgoyen commented 1 year ago

I made a few changes to create a dark theme (feat #8). This is just an idea from a couple of mixins and variables, but I think it would be nice to start rethinking the use of colors directly in blocks and replace them with theme-specific variables:

// from
--white: #fff;
background-color: var(--white);
// to
--white: #fff;
 --bg-color: var(--white);
background-color: var(--bg-color);

So it will be possible to create not only dark and light, but also custom themes.

All colors should be in HSL format.

--white: 0deg 0% 100%;
background-color: hsl(var(--white));

This allows us to manipulate the base color without the need for a million variables. It also ensures the base color is consistent.

background-color: hsl(var(--white) / 50%);

I also have this mostly implemented already, hate to see you do a bunch of work for nothing. 😆

andrejsharapov commented 1 year ago

I also have this mostly implemented already, hate to see you do a bunch of work for nothing.

In that case, I will close this PR) p.s. for me, working with a website or icons is good practice, better than working on a pet-project. I like that you accept the ideas of other users, and also I get the unusual experience of "team" work :smile: