1
0 Comments

Roast my palette (show you can do better!)

Part of a good landing page is a good color scheme, and I have absolutely zero taste in the aesthetics! So, I made a page that allow anyone to interactively play with the colors using sliders and then export the color scheme to JSON.

So, as a bit of a format-breaker, I invite you to 1) roast my current color scheme and 2) invite you to show off your artistic side and make a cool looking theme! You can post the exported JSON in the comments for everyone to admire your taste!

https://sharedgametimer.com/theme

Background: This is for a Board Game Timer that synchronizes its state across multiple devices, so can be used both around a gaming table and online gaming. I'm aiming for a dark theme since a bright screen will draw too much attention when laying next to a board game.

------- for techies ---------

If you want to know how I did this, it is all done through CSS Custom Variables. On the root element, I have

body { --color-fg-hsl: 26, 100%, 95%; }

Then I use that in the normal CSS. For example:

p { color: hsl(var(--color-fg-hsl)); }
p.faded { color: hsla(var(--color-fg-hsl), 0.8); }

Then in the controls, when I want to change the color, I simply change the style of the body, and all the rest of the site is updated automagically.

document.body.style.setProperty('--color-fg-hsl',  '126, 100%, 95%')

If you want to use the JSON produced by this page for your own Vue + Vuetify project, contact me and I'll give you the SCSS files I have to wire up the Custom variables with the Vuetify components.

Trending on Indie Hackers
How I grew a side project to 100k Unique Visitors in 7 days with 0 audience 49 comments Competing with Product Hunt: a month later 33 comments Why do you hate marketing? 28 comments My Top 20 Free Tools That I Use Everyday as an Indie Hacker 14 comments $15k revenues in <4 months as a solopreneur 14 comments Use Your Product 13 comments