CrowderSoup

I build my own tools. Sometimes robots help. Sometimes they break.

Aaron Crowder avatar

Aaron Crowder

Hi, I'm Aaron Crowder. Or—if you know me online—CrowderSoup.

Father of two, Software developer, and lover of the open web. I like to take things apart (and sometimes even put them back together). I can frequently be found tinkering with some bit of code in my spare time.

New theme, who dis?
Aaron Crowder

If you're reading this on my site instead of in a feed reader: hi, yes, it looks different. 👋 Honestly, the old look had gotten stale. It was the stock Webstead default theme with every setting left at its default. Cream background, orange accent, fancy serif headings. Nice! But it looked like every Webstead site, and I wanted mine to feel like mine. So now it's a terminal. What changed A prompt for a header. aaron@crowdersoup:~$, with a blinking cursor (it stops blinking if your system asks...

Read more
  1. screenshot of theme settings and color picker
    The color glow is such a vibe

I'm implementing custom theme settings! This is something I had the idea for late one night last week. You define the settings you want in your theme's theme.json like this:

{
  ...
  "settings": {
    "fields": {
      "accent_color": {
        "type": "color",
        "label": "Accent color",
        "default": "#cc3f2e"
      },
      "background_color": {
        "type": "color",
        "label": "Background color",
        "default": "#f8f4ef"
      },
      "max_width": {
        "type": "string",
        "label": "Layout max width",
        "default": "72rem",
        "help": "Used for the main content column."
      }
    },
    "groups": [
      {
        "label": "Colors",
        "fields": ["accent_color", "background_color"]
      },
      {
        "label": "Layout",
        "fields": ["max_width"]
      }
    ]
  }
}

The result is the UI you see above! Then they can be used your theme like this:

<style>
    :root {
        --accent: {{ theme.settings.accent_color|default:"#cc3f2e" }};
        --bg: {{ theme.settings.background_color|default:"#f8f4ef" }};
    }
</style>

This seems like a small feature but it gives users and theme devs a ton of flexibility! I'm exicted to someday see how people use it.

Aaron Crowder