Themes & Components

I want to keep the core lightweight, but at the same time I’d hate for lots of people to adopt Shoelace and then run into Bootstrap Syndrome (every website looks the same).

We can prevent this by encouraging third-party themes and linking to them from the website.

These can be simple copy/paste snippets to start:

/* Shoelace.css dark theme */
:root {
  --body-color: white;
  --body-bg-color: black;
  ...
}

We could do something similar with third-party components, too. I’m posting this here as a TODO and to gather thoughts and ideas.

Ideas

• Cards

[ghost]

Here is a theme loosely based on Solarized Dark…

:root {
  --body-color: #839496;
  --body-bg-color: #073642;
  --color-black: #000;
  --color-primary: #3d9970;
  --color-blue: #0074b9;
  --color-smooth-blue: #275662;
  --color-stripe-blue: #174652;
  --color-deep-blue: #073642;
  --color-orange: #cf751b;
  --color-sunset: #cb4b16;
  --color-red: #cf3136;
  --color-camel: #eee8d5;
  --color-yellow: #ff0;
  --color-sand: #b58900;

  --input-bg-color: var(--body-bg-color);
  --button-bg-color-primary: var(--body-color);
  --badge-bg-color-primary: var(--body-color);
  --alert-bg-color-primary: var(--body-color);
  --state-success: var(--color-primary);
  --state-info: var(--color-blue);
  --pre-bg-color: var(--color-camel);
  --code-bg-color: var(--color-camel);
  --link-color: var(--color-sand);
  --link-color-hover: var(--color-sunset);
  --input-readonly-bg-color: var(--color-smooth-blue);
  --mark-color: var(--color-black);
  --mark-bg-color: var(--color-yellow);
  --switch-bg-color: var(--link-color-hover);
  --table-stripe-bg-color: var(--color-stripe-blue);
  --component-border-color: var(--color-smooth-blue);
  --switch-bg-color: var(--color-sunset);
}
.input-addon { background-color: var(--color-deep-blue); }

[claviska]

You can build from source to get all the customizations (and other future CSS features). This way it works with all browsers today. If you want custom properties (i.e. variables) in your own dist, you can use cssnext.io to build it. Just disable it like this:

  cssnext({
    features: {
      customProperties: false
    }
  })