Its difficult to choose a theme

[jedahan]

What's the problem you want to solved? Right now I have to pick a theme by name and then apply to see what it looks like.

Is there a solution you'd like to recommend? It would be nice to have some sort of preview. Two ideas:

• use nth-child selector to have the dropdown background and foreground set to the theme colors.
• show all theme color bars in a column and just click one to set it. Not sure how much vertical space that would take

[christianbundy]

Totally agree, I'm not happy with the current process. Thanks for bringing this up.

We should solve this in the app, but one quickfix might be to use the theme preview. Unfortunately it requires using j and k to scroll through themes, which sucks, but at least it lets you see most of the colors reasonably quickly.

[jedahan]

And it also requires javascript right?

[christianbundy]

Yeah, I suppose I should've said "one quickfix for you, personally". I don't think we want to deploy that in the app, but if someone said "help I can't look at all the themes" I'd probably send them that link.

[cinnamon-bun]

How about

• Render a preview of every theme
• It'll be large, so put them all inside a single <details>

The preview could be the row of boxes we have now, or a little fake screen with some text in it.

Or instead of hiding them in <details>, there could be a whole separate page for choosing a theme.

[christianbundy]

+1 to all of the above

My fav would be a whole other page for theme preferences.

[true-chaotic]

Hi, I've cobbled up a proof of concept of theme selection with preview, html and css only, no js, choosing an option applies theme to example in a post.

I doubt, of course, that this solution is viable in production, but it was a fun excercise!

Current version is here at https://github.com/true-chaotic/oasis/commit/c95f849dfbdb2cb9e5f2e77bc756d47821301f59

Basically, it generates additional css for each option, based on the theme it represents, e.g

#theme-examples-unikitty-dark:checked + label
+ input + label
+ input + label
+ input + label
+ input + label + .theme-examples-post {
  --base00: #2e2a31;
  --base01: #4a464d;
  --base02: #666369;
  --base03: #838085;
  --base04: #9f9da2;
  --base05: #bcbabe;
  --base06: #d8d7da;
  --base07: #f5f4f7;
  --base08: #d8137f;
  --base09: #d65407;
  --base0A: #dc8a0e;
  --base0B: #17ad98;
  --base0C: #149bda;
  --base0D: #796af5;
  --base0E: #bb60ea;
  --base0F: #c720ca;
}

[christianbundy]

Wait that's actually really fun. I like it!

[cinnamon-bun]

@true-chaotic Nice!

Could it be a single giant page showing all the previews at the same time? It would make it easy to scroll through and compare them quickly.

[true-chaotic]

@cinnamon-bun Actually yes, I'll try that. I also had an idea for a separate page, to have a scrollable list of options like a sidebar, and use static positioning for a block that contains the whole page 😈