Robert Birming

Bearful theme

Bearful theme

The Bearful theme for Bear blog has been carefully put together with accessibility and readability in mind.

Colors and contrast have been tested against accessibility standards (WCAG AA) to make sure text is easy to read for everyone, including people with reduced vision.

For the same reasons, links are underlined by default. That makes it easier to distinguish links from normal text, especially for people with color blindness.

It also comes with basic print styles, which I personally think all themes should include, at least text-focused blogs. Even if printing on paper isn’t that common these days, it makes your posts look much better when saved as a PDF.

How to use

If you want to try the Bearful theme with your blog, simply copy the styles below, head over to your Bear theme settings, paste them in, and you’re done.

Happy accessible blogging!

Styles

/*
* Bearful — a careful Bear theme
* Version 1.0.0 | 2026-03-01
* Robert Birming | robertbirming.com
*/

:root {
  color-scheme: light dark;
  --width: 65ch;
  --font-main: Verdana, sans-serif;
  --font-secondary: Verdana, sans-serif;
  --font-scale: 1em;
  --background-color: #fefefe;
  --heading-color: #3a3a3a;
  --text-color: #3a3a3a;
  --link-color: #2d66c4;
  --visited-color: #8b6fcb;
  --code-background-color: #f2f2f2;
  --code-color: #3a3a3a;
  --blockquote-color: #4a4a4a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1c1c1c;
    --heading-color: #c0c0c0;
    --text-color: #c0c0c0;
    --link-color: #8cc2dd;
    --visited-color: #b89ee3;
    --code-background-color: #141414;
    --code-color: #c0c0c0;
    --blockquote-color: #b0b0b0;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  max-width: var(--width);
  margin-inline: auto;
  padding: 1.25rem;
  font-family: var(--font-secondary);
  font-size: var(--font-scale);
  line-height: 1.6;
  overflow-wrap: break-word;
  color: var(--text-color);
  background-color: var(--background-color);
}

p {
  margin-block: 1.2em;
}

h1, h2, h3, h4, h5, h6 {
  margin-block: 1.6em 0.5em;
  font-family: var(--font-main);
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--heading-color);
}

h1 { font-size: 1.8em; }
h2 { font-size: 1.4em; }
h3 { font-size: 1.15em; }
h4 { font-size: 1em; }

a {
  color: var(--link-color);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

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

main a:visited {
  color: var(--visited-color);
}

hr,
img,
blockquote,
.highlight, .code {
  margin-block: 1.6em;
}

hr {
  border: 0;
  border-top: 1px solid;
  opacity: 0.4;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

figure {
  margin-inline: 0;
  margin-block: 1.6em;
}

figure img,
figure p {
  margin-block: 0;
}

figcaption {
  margin-block-start: 0.8em;
  font-size: 0.9em;
  text-align: center;
  opacity: 0.8;
}

.inline {
  width: auto !important;
}

blockquote {
  margin-inline: 0;
  border-inline-start: 2px solid currentColor;
  padding-inline-start: 1.25em;
  color: var(--blockquote-color);
  font-style: italic;
}

cite {
  display: block;
  margin-block-start: 0.5em;
  font-size: 0.9em;
  font-style: normal;
  opacity: 0.8;
}

code {
  font-family: monospace;
  padding-inline: 0.3em;
  background-color: var(--code-background-color);
  color: var(--code-color);
  border-radius: 3px;
}

pre {
  margin: 0;
  font-size: inherit;
}

pre code {
  padding: 0;
  background: none;
  border-radius: 0;
}

.highlight, .code {
  padding: 0.75em 1em;
  overflow-x: auto;
  background-color: var(--code-background-color);
  color: var(--code-color);
  border-radius: 3px;
}

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 0.5em 0.75em;
  text-align: start;
}

th {
  font-weight: bold;
}

td {
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 15%, var(--background-color));
}

time {
  font-family: monospace;
  font-style: normal;
  font-size: 1.15em;
  opacity: 0.8;
}

button {
  margin: 0;
  cursor: pointer;
}

input, textarea, button {
  font: inherit;
  letter-spacing: inherit;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
  border-radius: 2px;
}

header {
  margin-block: 0 2em;
}

header a.title {
  display: inline-block;
  text-decoration: none;
}

.title h1 {
  margin-block: 0;
  font-size: 1.5em;
}

nav a {
  margin-inline-end: 0.5em;
}

/* Blog list */
ul.blog-posts {
  margin-block-end: 1.6em;
  list-style-type: none;
  padding: unset;
}

ul.blog-posts li {
  display: flex;
  margin-block-end: 0.7em;
}

ul.blog-posts li span {
  flex: 0 0 7.5rem;
}

/* Blog posts */
header nav p,
.post main > h1 + p {
  margin-block-start: 0.25em;
}

.post main > h1 {
  margin-block-end: 0;
}

body main > h1:first-child {
  margin-block-start: 0;
}

/* Upvote button */
.upvote-count {
  font-size: 0.75em;
}

footer {
  margin-block-start: 2rem;
  text-align: center;
}

footer p {
  margin-block: 0.7em;
}

/* Print styles */
@media print {
  body {
    max-width: 100%;
    padding: 0;
    background: none;
    color: #000;
  }

  a {
    color: #000;
    text-decoration: underline;
  }

  hr {
    border-top-color: #000;
    opacity: 1;
  }

  .highlight, .code {
    border: 1px solid #ccc;
  }

  header,
  footer,
  #upvote-form,
  .upvote-button,
  .tags {
    display: none;
  }
}

/*
* Want add-ons and style options?
* Visit my growing Bear library:
* https://robertbirming.com/bear-library/
*/