Theme styling guide

The next step after the basics: fonts, colors, links, and a few finishing touches, one change at a time.

This picks up where the theme building guide left off. Changes are listed in the order they happened, so you can follow along from the start.

Fonts and content width

:root {
  --width: 65ch;
  --font-main: system-ui, sans-serif;
  --font-secondary: system-ui, sans-serif;
  --font-scale: 1.0625em;
}

System fonts use whatever's already on the visitor's device, and ch adapts the width to the font itself instead of being fixed. 1.0625em nudges the base size up slightly.

Font rendering

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}

The first two make text render a touch crisper on Mac (though it's a genuinely debated technique). The third stops mobile Safari from auto-resizing text on its own, so your layout stays as intended.

Better contrast, calmer colors

:root {
  --background-color: #f8f8f8;
  --heading-color: #2c2d2e;
  --text-color: #2c2d2e;
  --link-color: #2952cc;
  --visited-color: #7c5a91;
  --code-background-color: #eaeaea;
  --code-color: #2c2d2e;
  --blockquote-color: #2c2d2e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #01242e;
    --heading-color: #d5d8dc;
    --text-color: #d5d8dc;
    --link-color: #98cbe3;
    --visited-color: #c9add7;
    --code-background-color: #16374a;
    --code-color: #d5d8dc;
    --blockquote-color: #d5d8dc;
  }
}

Softer tones instead of pure black and white to make it easier on the eyes. The visited link color is also tweaked. Bear's default fails accessibility contrast standards in both light and dark mode, and this one passes.

Link hover and focus

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1.5px;
}

a:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

On hover, the underline sits a little further from the text and is slightly thicker. The focus outline shows keyboard users which link is selected. The redundant cursor: pointer is removed.

Upvote button

button {
  margin: 0;
  cursor: pointer;
  font-size: inherit;
}

Makes the upvote button match the body font size.

Dates

time {
  font-family: ui-monospace, monospace;
  font-style: normal;
  font-size: 0.95em;
  opacity: 0.8;
}

A slightly muted look sets dates apart from the surrounding text. Using the system's own monospace font keeps it consistent with the rest of the theme, and em means it scales with the base font size.

Image corners

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}

Slightly rounded corners to soften images a bit.

Happy theming!

Want more? Check out the full Bear Blog library.