Css is too complex to permit anyone to create new theme

[inkhey]

Detailed description of the problem

Hello, i wanted to use lychee for a drawing gallery. I wanted a light theme. I checked LycheeOrg/Lychee#2086 but don't see any good solution.

My idea was simple, just changing the color used, nothing else.
Working on css directly is very hard, we get a 4000 line css which is hard to understand.
Working on scss look a bit simpler, but for my simple change, it's still really hard to do:

• There are a big number of color: > 44, which look to me probably unnecessary.
• There are color using different color syntax making harder to replace them.

So i try something, reading this article : https://codepen.io/jakealbaugh/post/css4-variables-and-sass .
I just put most of the color in one place, there are still some rgba and named color missing because i was a bit tired at the end, there probably some kind of script to do this automatically.

I create a PR to show this idea:

• use css var or at least scss var for color.
• rationate color if possible.
• find some other way to make customization of the current theme less painfull.
  here: POC: use scss/css variable to make easier to switch color. #269

Edit: Please note i'm not very competent at css (this is the first time i see scss), i'm more a backend guy.
Edit 2: Also, apart from this technical debt issue there in CSS, lychee >4 is awesome 👍 .

[ildyria]

This is a good first step but you lose the semantic of the color.
What I mean by that is what does color a corresponds to ?

If you provide a solution which allow to more easily set-up the colors while preserving their meaning then yes this will be considered.

As is, there is absolutely no way to know which colors corresponds to what. :|

[inkhey]

Hello !

This is a good first step but you lose the semantic of the color.
What I mean by that is what does color a corresponds to ?

If you provide a solution which allow to more easily set-up the colors while preserving their meaning then yes this will be considered.

As is, there is absolutely no way to know which colors corresponds to what. :|

I don't think we loose the semantic of the color, as there is not real semantic now. I can replace "a" by color name, but it's not really what we would expect for a semantic naming. But i can try it just to make thing a bit easier for now.

The problem i do face now, is that the css code is heavy, and i'm really new to the project, so i don't have clear clue about how to properly rationate color. In some case, we may expect 2 named colors for one real color (for example white foreground vs white background) and have naming more accordingly to the usage we do of the color than to the color itself like: "primary_background", "primary_foreground"… and with around 50 colors, it's really complicated to do so.

[ildyria]

"primary_background", "primary_foreground"… and with around 50 colors, it's really complicated to do so.

That is indeed my intent.

You can also use the information where this color appear:
color--base--background
color--sidebar--background
color--album--thumb-border

etc...

Rather than foreground, I tend to prefer text as it is more explicit in my mind (maybe not for everyone though)

[kamil4]

I agree that 50 colors seems unnecessary and I would sure like to see that number brought down to something more manageable. But first we need to understand how those colors are currently used...

[inkhey]

Hello all !
I made a big update of my POC.
I revert my change and i did 2 scss list:

• color name list with most color used (this probably need to be completed) using naming found with https://chir.ag/projects/name-that-color/ . I also organised these color by color, to make easier to find very close color. From the color only point of view, it easy to see that some color are too close to make sense to be keep. note: I don't remove any color, i'm waiting for suggestion.
• semantic-color list with semantic name of usage of the color
  • naming is far from perfect, so be free to suggest or just modify naming in place, after posting a comment here if you decide to do so.
  • This part is really hard for me, so i did just a part of the process. I will try to do some other part if i found some time to do so but i will be more confident if someone in the dev team help me there.

Note: i have removed the old color variable.
Note2: The best solution to work with css var and transparency seems to be like this: background-color: rgba(color(punch),0.8);

[andjar]

Thank you @inkhey for working on this issue! I was going to suggest that a collection of themes would also made lychee more attractive and this is a great start. To add to the discussion, we might want to look to other projects and how colors are done there to ease the transition for others and perhaps make porting of themes easier. Eg. https://getbootstrap.com/docs/5.0/customize/color