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.