Hard-coded colors and miss-match between SCSS and CSS variables make custom themes hard to implement about listed HOT 9 CLOSED

Awesome, thanks very much for doing that :)

from listed.

Hi @Lissy93 !

Ohhh yes! You're right, I searched for # in the code and forgot about the places that use $, thank you for the heads up! I'll fix that ASAP 😄 🤩

from listed.

Hi @Lissy93! Thanks for taking the time to report this. I'll forward this to one of our devs who is currently working on Listed. 🙂

from listed.

Thank you :)
I'd be happy to help out with a PR if you'd like

from listed.

Hi @Lissy93 ! How are you?

I just created a PR so you don't have to worry about that 😄
Thank you for reporting this!

Have a nice day 😌

from listed.

That was quick- thank you very much 😄
It might be good in the future to have all components using CSS variables, so that users can easily theme their blogs?

from listed.

Hi @Lissy93 !

From what I can see, almost every component that has color uses CSS variables (I think there are only two places that use hardcoded colors, I will change that ASAP).

You can theme your blog with custom CSS and you can change the blog layout on Settings -> Appearance 😎

Let me know if there's anything else I can help you with! 😃

from listed.

From what I can see, almost every component that has color uses CSS variables (I think there are only two places that use hardcoded colors, I will change that ASAP).

Hi @daianaszwimer thanks for you're reply 😃 I might be missing something, sorry if I'm just being dumb here, but when making a theme for my blog, a lot of the colors have to be overridden by selector (rather than variable). For example:

• #author-profile background in Show.scss
• .footer--blog-page background in Footer.scss
• .page-header__container--post background in HeaderContainer.scss
• #single-post-footer background in Show.scss
• .callout background in application.scss
• .scroll-to-top__container and .button.scroll-to-top__button background in ScrollToTopButton.scss

This is because, in these instances the app is using SASS/ SCSS variables ($color) for colors (as opposed to CSS var(--color)), and SCSS is compiled at build time, which means the variables cannot be modified by the user in the production application. e.g. take a look at the gradient background for .button--primary in application.scss - it has two colors: the second is a CSS variable (and it is easily modifiable by the user), but the first value is a SASS variable (so appears as a hex code in the built app)

So for the user to apply custom colors, they must target elements individually by their selectors, and override the existing styles. Not the end of the world at all, but it makes things a little harder for the user, and may mean that any changes in the markup or class names could break the users theme.

from listed.

Hi @Lissy93 !

Here's the PR with almost all of the missing variables. It will soon be deployed to production! 😄
#164

Thank you!

from listed.