Bearly theme for Bear Blog

Preview
background
link
text
muted
border
surface
A Bear Blog
Bearly theme for Bear Blog

11 Feb 2026
Bearly keeps things simple. System font, comfortable spacing, light touch. The kind of theme that blends into the background and lets the writing do the talking.
They say you should let sleeping bears lie, but that was before we found out how good a blockquote looks with custom CSS.
It plays well with any Bear blog, with or without add-ons. Copy the styles, paste, and you're done.
bear theme css
Bearly has been replaced by the more flexible and complete Bearming theme. But if you’d like, you can still use Bearly.
Here’s the very last version I made:
/*
* Bearly — a lovely Bear theme
* Version 2.0.1 | 2026-02-11
* Robert Birming | robertbirming.com
*/

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

  /* Light mode colors */
  --background: #fafbfc;
  --link:       #3a73c8;
  --text:       #373a3c;

  /* Colors based on text, links, and background */
  --muted:      color-mix(in srgb, var(--text) 60%, var(--background));
  --border:     color-mix(in srgb, var(--link) 20%, var(--background));
  --surface:    color-mix(in srgb, var(--background) 94%, var(--text) 6%);
  
  /* Font sizes */
  --font-xs:    0.85rem;
  --font-s:     0.95rem;
  --font-m:     1.0625rem;
  
  /* Line heights */
  --lh-s:       1.3;
  --lh-m:       1.65;

  /* Shapes */
  --line:       1px solid;
  --radius:     4px;

  /* Spacing */
  --space-xs:   0.5em;
  --space-s:    1em;
  --space-m:    1.2em;
  --space-l:    1.5em;
}

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

  /* Dark mode colors */
  --background: #1c2126;
  --link:       #82aee3;
  --text:       #d9d9d8;
  }
}

/* Layout */
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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

body {
  max-width: 66ch;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  font-family: system-ui, sans-serif;
  font-size: var(--font-m);
  line-height: var(--lh-m);
  color: var(--text);
  background: var(--background);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Styles */
h1, h2, h3, h4 {
  margin: 0 0 var(--space-s);
  font-weight: 600;
  line-height: var(--lh-s);
  letter-spacing: 0;
}

h1 { font-size: 1.7rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.1rem; }

p {
  margin: 0 0 var(--space-m);
}

ul, ol {
  margin: 0 0 var(--space-m);
  padding-left: var(--space-m);
}

li {
  margin: var(--space-xs) 0;
}

blockquote {
  margin: var(--space-l) 0;
  padding: var(--space-s) var(--space-m);
  font-style: italic;
  border: var(--line) var(--border);
  border-left: 4px solid var(--link);
  border-radius: var(--radius);
  background: var(--surface);
}

blockquote p {
  margin: 0;
}

hr {
  margin: var(--space-l) 0;
  border: 0;
  border-top: var(--line) var(--border);
}

time {
  font-style: normal;
  font-size: var(--font-s);
  font-variant-numeric: tabular-nums;
  line-height: var(--lh-s);
  color: var(--muted);
}

a {
  color: var(--link);
  text-decoration: none;
  text-underline-offset: 0.18em;
}

a:hover,
a:focus-visible {
  text-decoration: underline;
}

strong {
  font-weight: 600;
  color: var(--text);
}

em {
  font-style: italic;
  color: var(--text);
}

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

pre {
  margin: var(--space-l) 0;
  padding: var(--space-s);
  background: var(--surface);
  border: var(--line) var(--border);
  border-radius: var(--radius);
  font-size: var(--font-s);
  overflow-x: auto;
}

code {
  font-family: ui-monospace, monospace;
}

table {
  width: 100%;
  margin: var(--space-l) 0;
  border-collapse: collapse;
  font-size: var(--font-s);
}

th, td {
  padding: var(--space-xs) var(--space-s);
  border: var(--line) var(--border);
}

th {
  background: var(--surface);
  text-align: left;
}

input, textarea, select {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: var(--line) var(--border);
  border-radius: var(--radius);
  padding: var(--space-xs);
  width: 100%;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--link);
  outline-offset: 2px;
}

label {
  display: block;
  margin-bottom: var(--space-xs);
}

button:not(.upvote-button),
input[type="submit"],
input[type="button"] {
  font: inherit;
  color: var(--background);
  background: var(--link);
  border: 0;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius);
  cursor: pointer;
}

button:not(.upvote-button):hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: color-mix(in srgb, var(--link) 90%, var(--text) 10%);
}

/* Header */
header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-s);
  margin-bottom: var(--space-l);
  padding-bottom: calc(var(--space-l) * 0.8);
  border-bottom: var(--line) var(--border);
}

header .title {
  color: var(--text);
  text-decoration: none;
  transition: inherit;
}

header a.title h1 {
  margin: 0;
  font-size: var(--font-m);
  line-height: var(--lh-s);
}

header nav {
  margin-left: auto;
}

header nav p {
  margin: 0;
  display: flex;
  gap: var(--space-s);
  font-size: var(--font-s);
}

@media (max-width: 600px) {
  header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-xs);
  }

  header nav {
    margin-left: 0;
  }

  header nav p {
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-s);
  }
}

/* Footer */
footer {
  border-top: var(--line) var(--border);
  margin-top: var(--space-l);
  padding: calc(var(--space-l) * 1.2) 0;
  text-align: center;
  font-size: var(--font-s);
  line-height: var(--lh-s);
  color: var(--muted);
}

footer span:last-of-type {
  font-size: var(--font-xs);
}

footer span:last-of-type a {
  color: inherit;
}

/* Pages & Posts */
main > h1:first-child {
  margin: 0;
}

:is(.post, .page) main > h1 + p {
  margin: var(--space-xs) 0 var(--space-l);
}

body.post main > h1 + p:has(time) {
  margin: 0 0 var(--space-l);
}

/* Blog list */
ul.blog-posts {
  margin: var(--space-l) 0;
  padding: 0;
  list-style: none;
  border: var(--line) var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

ul.blog-posts li {
  display: flex;
  align-items: center;
  gap: var(--space-s);
  padding: var(--space-xs) var(--space-m) var(--space-s);
  border-bottom: var(--line) var(--border);
}

ul.blog-posts li:last-child {
  padding-bottom: var(--space-xs);
  border-bottom: 0;
}

ul.blog-posts li * {
  margin: 0;
}

ul.blog-posts li a {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  line-height: var(--lh-s);
  color: inherit;
  text-decoration: none;
  transform: translateX(0);
  transition: transform .18s ease;
}

ul.blog-posts li:hover a,
ul.blog-posts li:focus-within a {
  transform: translateX(6px);
}

ul.blog-posts li a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

ul.blog-posts li span {
  order: 2;
  flex: 0 0 auto;
  margin-left: auto;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: right;
}

ul.blog-posts li span time {
  font-size: var(--font-xs);
  line-height: var(--lh-s);
}

@media (max-width: 600px) {
  ul.blog-posts li {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1em;
    padding: var(--space-xs) var(--space-m);
  }

  ul.blog-posts li a {
    order: 1;
    width: 100%;
  }

  ul.blog-posts li span {
    order: 2;
    margin-left: 0;
    text-align: left;
  }
}

/* Optional: Upvote button */ /* Continue optimizing */
:is(.post, .page) .upvote-button {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: .25em;
  padding: .15em .3em;
  border: 0;
  background: transparent !important;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

:is(.post, .page) .upvote-button svg {
  display: none !important;
}

:is(.post, .page) .upvote-button::before {
  content: "♡";
  font-size: 1.5em;
  line-height: 1;
  color: var(--link);
}

:is(.post, .page) .upvote-button .upvote-count {
  display: inline-block !important;
  width: auto !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: var(--font-s);
  color: var(--text);
  opacity: .7;
  white-space: nowrap;
  transform: translateY(1px);
}

:is(.post, .page) .upvote-button:is(.upvoted, [aria-pressed="true"], [disabled])::before {
  content: "♥";
}

:is(.post, .page) .upvote-button[disabled] {
  cursor: default;
}

/* Optional: Guestbooks.meadow.cafe */
#guestbooks___guestbook-form-container form {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: var(--space-m) 0;
}

#guestbooks___guestbook-messages-container > div {
  margin: var(--space-m) 0;
  padding: var(--space-m);
  font-size: var(--font-s);
  border: var(--line) var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

#guestbooks___guestbook-messages-container blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  background: transparent;
}

#guestbooks___guestbook-messages-container p {
  margin-bottom: var(--space-xs);
}

#guestbooks___guestbook-made-with {
  color: var(--muted);
}

/* Post Meta: Tags */
p.tags {
  margin-block: var(--space-l);
  text-align: center;
}

p.tags a {
  color: var(--muted); 
  font-size: var(--font-s); 
  text-decoration: none;
  padding: 0.3em 0.6em;
  background: var(--surface);
  border-radius: var(--radius);
  transition: all 0.2s ease;
}

p.tags a:hover {
  color: var(--background);
  background: var(--link);
}