Bearming theme

Bearming is a Bear theme built for readability, easy customization, and modern styling with a bit of warmth and personality.
You can use it on its own or shape it further. Swap the colors with a palette, change the look with styles, or add features with add-ons. Mix and match however you like.
To see how everything fits together, check out the style guide. Curious what others think of it? Check out the testimonials.
The theme was last updated 5 days, 3 hours ago.
/*
* Bearming — a personal Bear theme
* Version 5.2.1 | 2026-04-03
* Robert Birming | robertbirming.com
*/

/* Palette: Default */
:root {
  color-scheme: light dark;

  /* Layout */
  --page-width: 65ch;
  --line-height: 1.65;
  --space-block: 1.8rem;
  --radius: 4px;

  /* Typography */
  --font-heading: var(--font-body);
  --font-body: system-ui, sans-serif;
  --font-mono: ui-monospace, monospace;
  --font-size: 1.0625rem;
  --font-small: calc(var(--font-size) * 0.875);

  /* Light */
  --bg: #f9f7f4;
  --text: #2c2d2e;
  --link: #1f5fbf;
  --visited: #7c5a91;
  --accent: var(--link);
  --muted: color-mix(in srgb, var(--accent) 15%, color-mix(in srgb, var(--text) 65%, var(--bg)));
  --surface: color-mix(in srgb, var(--accent) 7%, var(--bg));
  --border: color-mix(in srgb, var(--accent) 20%, var(--bg));
}

@media (prefers-color-scheme: dark) {
:root {

  /* Dark */
  --bg: #1c1f23;
  --text: #e6e7e8;
  --link: #74b0f4;
  --visited: #a88bbd;
  --muted: color-mix(in srgb, var(--accent) 10%, color-mix(in srgb, var(--text) 80%, var(--bg)));
}
}

/* =========================
   Base - theme structure
   Best left as is
   ========================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--bg);
}

body {
  margin-inline: auto;
  padding: 1.25rem;
  max-width: var(--page-width);
  font-family: var(--font-body);
  font-size: var(--font-size);
  line-height: var(--line-height);
  overflow-wrap: break-word;
  color: var(--text);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

p {
  margin-block: 1.2em;
}

h1, h2, h3, h4 {
  margin-block: var(--space-block) 0.5em;
  line-height: 1.3;
  font-family: var(--font-heading);
}

h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.2rem; }

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

main a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, var(--link) 40%, transparent);
}

.blog-posts a {
  text-decoration: none;
}

main a:visited {
  color: var(--visited);
  text-decoration-color: color-mix(in srgb, var(--visited) 40%, transparent);
}

@media (hover: hover) {
  a:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
    text-decoration-color: currentColor; 
  }
}

ul, ol {
  padding-inline-start: 1.5rem;
}

li {
  margin-block: 0.4em;
}

li > ul, 
li > ol {
  margin-block: 0.4em;
}

hr,
img,
pre,
blockquote {
  margin-block: var(--space-block);
}

hr {
  border: none;
  border-top: 1px solid var(--border);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}

figure {
  margin-inline: 0;
  margin-block: var(--space-block);
}

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

figcaption {
  margin-block-start: 0.7em;
  font-size: var(--font-small);
  color: var(--muted);
}

blockquote > :first-child { margin-block-start: 0; }
blockquote > :last-child { margin-block-end: 0; }

blockquote cite {
  display: block;
  margin-block-start: 0.7em;
  font-style: normal;
}

pre {
  padding-block: 1rem;
  padding-inline: 1.2rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: var(--font-small);
  line-height: 1.5;
  tab-size: 2;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

code {
  padding-block: 0.1em;
  padding-inline: 0.3em;
  font-family: var(--font-mono);
  font-size: var(--font-small);
  overflow-wrap: anywhere;
  background: var(--surface);
  border-radius: var(--radius);
}

pre code {
  padding: 0;
  background: none;
  border-radius: 0;
  font-size: inherit;
  overflow-wrap: normal;
}

mark {
  padding-inline: 0.15em;
  color: var(--bg);
  background: color-mix(in srgb, var(--link) 70%, var(--text));
  border-radius: 2px;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-small);
}

th, td {
  padding-block: 0.5em;
  padding-inline: 0.75em;
  border: 1px solid var(--border);
  text-align: start;
}

th {
  background: var(--surface);
  font-weight: 700;
}

time {
  font-family: var(--font-mono);
  font-size: calc(var(--font-small) * 0.95);
  font-style: normal;
  color: var(--muted);
}

header nav p,
main > :first-child,
.post main > h1 + p {
  margin-block-start: 0;
}

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

.tags {
  display: none;
}

p.tags {
  display: block;
  margin-block: var(--space-block);
}

p.tags a,
p.tags a:visited {
  margin-inline-end: 0.5em;
  font-size: var(--font-small);
  color: var(--muted);
}

/* =========================
   Add-ons - view options:
   robertbirming.com/bearming/add-ons
   ========================= */