Robert Birming

Pixel Bear theme

Pixel Bear theme

I mentioned earlier that my next theme would be “quite the opposite when it comes to looks” compared to Bearful. I wasn’t exaggerating.

Say hello to Pixel Bear!

The theme is a celebration of Sylvia’s awesome pixel bears, which she created for the ongoing Bearblog Creation Festival. It comes with a pixelated, retro-inspired style and a bunch of geeky little details.

The Grid. A digital frontier. I tried to picture clusters of information as they moved through the computer. Kevin Flynn

Pixel Bear is based on the Bearful theme, so most add-ons should work fine, even though I haven’t tested them all.

I’ve also included a new upvote button, updated looks for the guestbook and status log, plus side note (.pixel-note) and image frame (.pixel-frame) styles.

Last, but definitely not least, an optional style to show a pixel bear, or any image you like, in the footer. This is what started it all, the very reason this theme exists. Thank you, Sylvia!

How to use

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

Happy pixelated blogging!

Styles

/*
* Pixel Bear — a pixelated Bear theme
* Version 0.3.0 | 2026-03-03
* Robert Birming | robertbirming.com
*/

:root {
  color-scheme: light dark;
  --width: 72ch;
  --font-main: ui-monospace, monospace;
  --font-secondary: ui-monospace, monospace;
  --font-scale: 1em;

  --background-color: #f0e8d8;
  --heading-color: #3b2e20;
  --text-color: #4a3c2e;
  --link-color: #2e6e4e;
  --visited-color: #8a7e6e;
  --code-background-color: #e4dac6;
  --code-color: #4a3c2e;
  --blockquote-color: #5e4e3e;
  --border-color: #4a3c2e;
  --muted-color: #8a7e6e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #222129;
    --heading-color: #d4c8b0;
    --text-color: #b8ae9a;
    --link-color: #6ecf8e;
    --visited-color: #9a9a7a;
    --code-background-color: #1a1924;
    --code-color: #b8ae9a;
    --blockquote-color: #9a8e7a;
    --border-color: #b8ae9a;
    --muted-color: #847b6e;
  }
}

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

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

body {
  max-width: var(--width);
  margin-inline: auto;
  padding: 20px;
  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);
  background-image:
    linear-gradient(
      to right,
      color-mix(in srgb, var(--border-color) 6%, transparent) 1px,
      transparent 1px
    ),
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--border-color) 6%, transparent) 1px,
      transparent 1px
    );
  background-size: 12px 12px;
}

p {
  margin-block: 1.2em;
}

hr,
img,
figure,
blockquote,
table,
.highlight, .code,
.statuslog,
.pixel-note,
.gallery,
.preview {
  margin-block: 1.8em;
}

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

h1 { font-size: 1.6em; }
h2 { font-size: 1.25em; }
h3 { font-size: 1.1em; }
h4 { font-size: 1em; }

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

a:hover {
  text-decoration-style: solid;
}

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

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

hr {
  border: 0;
  text-align: center;
  line-height: 1;
}

hr::after {
  content: "□ □ □ □ □";
  letter-spacing: 0.25em;
  color: var(--muted-color);
  font-size: 0.7em;
}

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

figure {
  margin-inline: 0;
}

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

figcaption {
  margin-block-start: 0.8em;
  font-size: 0.85em;
  text-align: center;
  color: var(--muted-color);
}

.inline {
  width: auto !important;
}

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

blockquote::before {
  content: "QUOTE";
  position: absolute;
  top: -0.75em;
  left: 0.8em;
  padding: 0 0.4em;
  font-size: 0.7em;
  font-style: normal;
  letter-spacing: 0.08em;
  background: var(--background-color);
  color: var(--muted-color);
}

blockquote cite {
  display: table;
  margin-block-start: 1.6em;
  margin-inline-start: auto;
  padding: 0.2em 0.6em;
  font-size: 0.75em;
  font-style: normal;
  background-color: var(--border-color);
  color: var(--background-color);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  box-shadow: 2px 2px 0 0 var(--border-color);
}

blockquote cite::before {
  content: "ref_id: ";
  text-transform: none;
  color: color-mix(in srgb, var(--background-color) 85%, transparent);
}

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

pre {
  margin: 0;
}

pre code {
  padding: 0;
  background: none;
}

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

table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid var(--border-color);
}

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

th {
  font-weight: bold;
  background-color: var(--border-color);
  color: var(--background-color);
}

time {
  font-style: normal;
  color: var(--muted-color);
}

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;
}

header {
  margin-block: 0 2em;
  padding-block-end: 1.5em;
  border-bottom: 2px dashed var(--border-color);
  text-align: center;
}

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

header a.title:hover {
  background-color: transparent;
  text-decoration: none;
}

header a.title h1 {
  display: inline-block;
  margin-block: 0 0.75em;
  font-size: 1.5em;
  line-height: 1.2;
  background-color: var(--code-background-color);
  color: var(--text-color);
  border: 2px solid var(--border-color);
  padding: 0.35em 0.6em;
  box-shadow: 4px 4px 0 0 var(--border-color);
}

header a.title:hover h1 {
  transform: translate(-1px, -1px);
  box-shadow: 5px 5px 0 0 var(--border-color);
}

nav {
  display: flex;
  justify-content: center;
  gap: 0.25em;
  flex-wrap: wrap;
}

nav a {
  text-decoration: none;
  padding: 0.15em 0.4em;
  font-size: 0.95em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

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

nav a::before {
  content: "► ";
  color: color-mix(in srgb, var(--muted-color) 75%, transparent);
  font-size: 0.75em;
  vertical-align: 0.15em;
}

nav a:hover::before,
nav a:focus-visible::before {
  color: var(--background-color);
}

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

ul.blog-posts li {
  display: flex;
  align-items: center;
  gap: 0.75em;
  padding: 0.55rem 0.9rem 0.55rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--text-color) 12%, var(--background-color));
}

ul.blog-posts li:last-child {
  border-bottom: 0;
}

ul.blog-posts li a {
  order: 1;
  flex: 1;
  min-width: 0;
  font-weight: bold;
  text-decoration: none;
}

ul.blog-posts li a::before {
  content: "▸ ";
  color: color-mix(in srgb, var(--muted-color) 25%, transparent);
  font-size: 0.85em;
  vertical-align: 0.1em;
}

ul.blog-posts li:hover a::before,
ul.blog-posts li a:focus-visible::before {
  color: var(--link-color);
}

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

ul.blog-posts li a:visited {
  color: var(--visited-color);
}

ul.blog-posts li span {
  order: 2;
  flex: 0 0 auto;
  margin-inline-start: auto;
  white-space: nowrap;
  padding: 0.1em 0.5em;
  font-size: 0.8em;
  border: 1px solid color-mix(in srgb, var(--border-color) 20%, transparent);
  background: color-mix(in srgb, var(--background-color) 75%, transparent);
  color: var(--muted-color);
}

ul.blog-posts li:hover span {
  border-color: var(--link-color);
  color: var(--link-color);
}

/* 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: 4em;
  padding: 1.8em 1em;
  border: 2px solid var(--border-color);
  position: relative;
  text-align: center;
  font-size: 0.85em;
  word-spacing: -0.05em;
  background-color: color-mix(in srgb, var(--code-background-color) 40%, transparent);
}

footer::before {
  content: "SYSTEM.END";
  position: absolute;
  top: -0.8em;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 0.6em;
  font-size: 0.7em;
  letter-spacing: 0.1em;
  background: var(--background-color);
  color: var(--muted-color);
  border: 2px solid var(--border-color);
}

footer p {
  margin-block: 0.5em;
  color: var(--text-color);
}

footer a {
  color: var(--link-color);
  margin-inline: 0.1em;
  text-transform: lowercase;
  font-weight: bold;
  text-decoration: none;
}

footer a::before {
  content: "[";
  color: var(--muted-color);
}

footer a::after {
  content: "]";
  color: var(--muted-color);
}

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

::selection {
  background-color: var(--link-color);
  color: var(--background-color);
}

mark {
  background-color: var(--code-background-color);
  color: var(--text-color);
  padding-inline: 0.3em;
}

@media only screen and (max-width: 767px) {
  ul.blog-posts li {
    flex-wrap: wrap;
    gap: 0.4em;
  }

  ul.blog-posts li span {
    flex: 0 0 100%;
    margin-inline-start: 0;
    font-size: 0.75em;
  }
}

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

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

  hr::after {
    color: #000;
  }

  .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/
*/

/* Footer image (uncomment and change URL to show a pixel bear or any image in the footer)
footer > span:last-child::before {
  content: "";
  display: block;
  width: 96px;
  height: 96px;
  margin: 1.8em auto;
  background: url("https://your-image-url.gif") no-repeat center / contain;
  image-rendering: pixelated;
}
*/

/* Upvote: Pixel toast */
#upvote-form > small {
  display: block;
  margin-block-start: 1.8rem;
  font-size: 1em;
}

#upvote-form .upvote-button {
  display: inline-block;
  padding: 0.25em 0.6em;
  border: 2px solid var(--border-color);
  background: var(--code-background-color);
  color: var(--text-color);
  font: inherit;
  font-size: 0.85em;
  letter-spacing: 0.05em;
  cursor: pointer;
  box-shadow: 2px 2px 0 0 var(--border-color);
}

#upvote-form .upvote-button svg,
#upvote-form .upvote-button .upvote-count {
  display: none;
}

#upvote-form .upvote-button::before {
  content: "▲ TOAST";
}

#upvote-form .upvote-button:focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

@media (hover: hover) {
  #upvote-form .upvote-button:not([disabled]):hover {
    background-color: var(--link-color);
    color: var(--background-color);
    border-color: var(--link-color);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 0 var(--border-color);
  }
}

#upvote-form .upvote-button.upvoted,
#upvote-form .upvote-button[disabled] {
  opacity: 0.6;
  cursor: default;
  box-shadow: none;
  color: var(--text-color) !important;
}

#upvote-form .upvote-button.upvoted::before,
#upvote-form .upvote-button[disabled]::before {
  content: "▲ TOASTED";
}

/* Status log */
.statuslog {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3em 1em;
  max-width: 34rem;
  margin-inline: auto;
  padding: 1em 1.1em;
  color: var(--text-color);
  background: var(--code-background-color);
  border: 2px solid var(--border-color);
  position: relative;
}

.statuslog::before {
  content: "STATUS";
  position: absolute;
  top: -0.75em;
  left: 0.8em;
  padding: 0 0.4em;
  font-size: 0.7em;
  letter-spacing: 0.08em;
  background: var(--background-color);
  color: var(--muted-color);
}

.statuslog-emoji {
  font-size: 2.9rem;
  line-height: 1;
  align-self: start;
}

.statuslog-content {
  font-size: 1em;
  overflow-wrap: break-word;
}

.statuslog-content > :first-child {
  margin-block-start: 0;
}

.statuslog-content > :last-child {
  margin-block-end: 0;
}

footer .statuslog {
  text-align: start;
}

/* Image frame (add class="pixel-frame" to a <figure> or wrapping <div>) */
.pixel-frame {
  border: 2px solid var(--border-color);
  padding: 0.75em;
  position: relative;
  background: var(--code-background-color);
}

.pixel-frame::before {
  content: "IMG";
  position: absolute;
  top: -0.75em;
  left: 0.8em;
  padding: 0 0.4em;
  font-size: 0.7em;
  letter-spacing: 0.08em;
  background: var(--background-color);
  color: var(--muted-color);
}

.pixel-frame img {
  margin: 0;
}

.pixel-frame figcaption {
  margin-block: 0.6em 0;
}

/* Guestbook (guestbooks.meadow.cafe) */
#guestbooks___guestbook-form-container form {
  display: flex;
  flex-direction: column;
  gap: 0.8em;
  margin-block: 1.6em;
}

#guestbooks___guestbook-form-container :is(input, textarea, button) {
  font: inherit;
  letter-spacing: inherit;
  appearance: none;
}

#guestbooks___guestbook-form-container :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
  width: 100%;
  padding: 0.65em 0.85em;
  color: var(--text-color);
  background: var(--background-color);
  border: 2px solid var(--border-color);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

#guestbooks___guestbook-form-container :is(input[type="text"], input[type="email"], input[type="url"], textarea):focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

#guestbooks___guestbook-form-container textarea {
  min-height: 7.5em;
  resize: vertical;
}

#guestbooks___guestbook-form-container :is(button, input[type="submit"]) {
  align-self: flex-start;
  padding: 0.55em 0.9em;
  color: var(--text-color);
  background: var(--code-background-color);
  border: 2px solid var(--border-color);
  cursor: pointer;
  box-shadow: 2px 2px 0 0 var(--border-color);
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

#guestbooks___guestbook-form-container :is(button, input[type="submit"]):focus-visible {
  outline: 2px solid var(--link-color);
  outline-offset: 2px;
}

@media (hover: hover) {
  #guestbooks___guestbook-form-container :is(button, input[type="submit"]):hover {
    background-color: var(--link-color);
    color: var(--background-color);
    border-color: var(--link-color);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 0 var(--border-color);
  }
}

#guestbooks___guestbook-messages-header {
  display: flex;
  align-items: center;
  gap: 0.4em;
  margin-block: 2em 1em;
}

#guestbooks___guestbook-messages-header::before {
  content: "💬";
  translate: 0 1px;
}

#guestbooks___guestbook-messages-container > div {
  margin-block: 1.2em;
  padding: 1em 1.2em;
  font-size: 0.95em;
  border: 2px solid var(--border-color);
}

#guestbooks___guestbook-messages-container p {
  margin: 0.35em 0 0;
  padding: 0;
}

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

#guestbooks___guestbook-messages-container blockquote::before {
  content: none;
}

#guestbooks___guestbook-messages-container time {
  font-size: 0.85em;
  opacity: 0.8;
  white-space: nowrap;
}

#guestbooks___guestbook-messages-container .guestbook-message-reply {
  position: relative;
  margin-block: 0.9em 0.2em;
  margin-inline-start: 1.6em;
  padding: 0.9em 1.1em;
  background: var(--code-background-color);
  border: 2px solid var(--border-color);
}

#guestbooks___guestbook-messages-container .guestbook-message-reply::before {
  content: "";
  position: absolute;
  top: -1em;
  left: -0.9em;
  width: 0.7em;
  height: 1.6em;
  border-left: 2px solid var(--border-color);
  border-bottom: 2px solid var(--border-color);
}

/* Side note (wrap content in <div class="pixel-note">) */
.pixel-note {
  padding: 1em 1.25em;
  border: 2px solid var(--border-color);
  border-inline-start: 6px solid var(--border-color);
  background: var(--code-background-color);
  position: relative;
  font-size: 0.9em;
}

.pixel-note::before {
  content: "NOTE";
  position: absolute;
  top: -0.75em;
  left: 0.8em;
  padding: 0 0.4em;
  font-size: 0.7em;
  letter-spacing: 0.08em;
  background: var(--background-color);
  color: var(--muted-color);
}

.pixel-note > :first-child {
  margin-block-start: 0;
}

.pixel-note > :last-child {
  margin-block-end: 0;
}