Bear Blog palettes

These palettes let you change the overall feel of your blog, while keeping the simplicity of the default Bear theme intact.

Each palette works nicely on its own, but you can also use one as a starting point for your own tweaks. Just copy the palette you like and paste it over the theme's :root styles in the Bear dashboard. Done.

Last updated 3 days, 14 hours ago.

Antique

A soft look with serif typography and warm, paper-like colors.

Fonts

Heading: Georgia, serif
Body: Georgia, serif

Colors

Token	Light	Dark
`--background-color`	`#faf8f3`	`#1e1b18`
`--text-color`	`#3a342e`	`#d6d0c8`
`--link-color`	`#7a4f2a`	`#d0a878`
`--visited-color`	`#6a655e`	`#a9a6a2`

Styles

/* Palette: Antique */
:root {
  /* Layout and typography */
  --width: 68ch;
  --font-main: Georgia, serif;
  --font-secondary: Georgia, serif;
  --font-scale: 1.0625em;

  /* Light colors */
  --background-color: #faf8f3;
  --heading-color: #2f2a24;
  --text-color: #3a342e;
  --link-color: #7a4f2a;
  --visited-color: #6a655e;
  --code-background-color: color-mix(in srgb, var(--background-color), black 5%);
  --code-color: var(--text-color);
  --blockquote-color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark colors */
    --background-color: #1e1b18;
    --heading-color: #e7e2dc;
    --text-color: #d6d0c8;
    --link-color: #d0a878;
    --visited-color: #a9a6a2;
    --code-background-color: color-mix(in srgb, var(--background-color), white 8%);
    --code-color: var(--text-color);
    --blockquote-color: var(--text-color);
  }
}

Modern

A clean, modern look using system fonts and neutral colors.

Fonts

Heading: system-ui, sans-serif
Body: system-ui, sans-serif

Colors

Token	Light	Dark
`--background-color`	`#f8f9fa`	`#171b20`
`--heading-color`	`#20242a`	`#e7e9ec`
`--text-color`	`#343940`	`#c9ced4`
`--link-color`	`#315eb5`	`#82b4f4`
`--visited-color`	`#76558f`	`#b69bd0`

Styles

/* Palette: Modern */
:root {
  --width: 65ch;
  --font-main: system-ui, sans-serif;
  --font-secondary: system-ui, sans-serif;
  --font-scale: 1.0625em;
  --background-color: #f8f9fa;
  --heading-color: #20242a;
  --text-color: #343940;
  --link-color: #315eb5;
  --visited-color: #76558f;
  --code-background-color: #eef1f4;
  --code-color: #2e343b;
  --blockquote-color: #525b66;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #171b20;
    --heading-color: #e7e9ec;
    --text-color: #c9ced4;
    --link-color: #82b4f4;
    --visited-color: #b69bd0;
    --code-background-color: #20262d;
    --code-color: #d6dae0;
    --blockquote-color: #aeb5be;
  }
}

Playful

A colorful and playful look with fun typography and bright colors.

Fonts

Heading: Comic Sans MS, cursive
Body: Trebuchet MS, sans-serif

Colors

Token	Light	Dark
`--background-color`	`#fff2b8`	`#201b24`
`--text-color`	`#1c1c1c`	`#e3dff2`
`--link-color`	`#ff007f`	`#ff69b4`
`--visited-color`	`#8b5a9f`	`#b88fca`

Styles

/* Palette: Playful */
:root {
  --width: 74ch;
  --font-main: 'Comic Sans MS', cursive;
  --font-secondary: 'Trebuchet MS', sans-serif;
  --font-scale: 1.0625rem;
  --background-color: #fff2b8;
  --heading-color: #1c1c1c;
  --text-color: #1c1c1c;
  --link-color: #ff007f;
  --visited-color: #8b5a9f;
  --code-background-color: color-mix(in srgb, #1c1c1c 6%, #fff2b8);
  --code-color: #1c1c1c;
  --blockquote-color: #1c1c1c;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #201b24;
    --heading-color: #e3dff2;
    --text-color: #e3dff2;
    --link-color: #ff69b4;
    --visited-color: #b88fca;
    --code-background-color: #000;
    --code-color: #e3dff2;
    --blockquote-color: #ccc;
  }
}

Matrix

A dark, terminal-inspired palette with neon green text and high contrast.

Fonts

Heading: ui-monospace, monospace
Body: ui-monospace, monospace

Colors

Token	Dark
`--background-color`	`#0b0f0d`
`--text-color`	`#d6ffd6`
`--link-color`	`#3cff6a`
`--visited-color`	`#8b5a9f`

Styles

/* Palette: Matrix */
:root {
  color-scheme: dark;

  --width: 70ch;
  --font-main: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-secondary: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  --font-scale: 1rem;

  --background-color: #0b0f0d;
  --heading-color: #d6ffd6;
  --text-color: #d6ffd6;
  --link-color: #3cff6a;
  --visited-color: #8b5a9f;

  --code-background-color: color-mix(in srgb, #d6ffd6 6%, #0b0f0d);
  --code-color: #d6ffd6;
  --blockquote-color: #d6ffd6;
}

Terminal

An earthy, forest-green take on the classic terminal look, with monospace type and light/dark support.

Fonts

Heading: ui-monospace, monospace
Body: ui-monospace, monospace

Colors

Token	Light	Dark
`--background-color`	`#f0f5ee`	`#0d1208`
`--text-color`	`#2d3a2a`	`#c8d4c0`
`--link-color`	`#2d7a1f`	`#4cd137`
`--visited-color`	`#5a6e50`	`#7aab6e`

Styles

/* Palette: Terminal */
:root {
  /* Layout and typography */
  --width: 68ch;
  --font-main: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  --font-secondary: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
  --font-scale: 0.9375rem;

  /* Light colors */
  --background-color: #f0f5ee;
  --heading-color: #2d3a2a;
  --text-color: #2d3a2a;
  --link-color: #2d7a1f;
  --visited-color: #5a6e50;
  --code-background-color: color-mix(in srgb, var(--background-color), black 5%);
  --code-color: var(--text-color);
  --blockquote-color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark colors */
    --background-color: #0d1208;
    --heading-color: #c8d4c0;
    --text-color: #c8d4c0;
    --link-color: #4cd137;
    --visited-color: #7aab6e;
    --code-background-color: color-mix(in srgb, var(--background-color), white 8%);
    --code-color: var(--text-color);
    --blockquote-color: var(--text-color);
  }
}

Twilight

A soft, evening-inspired palette with muted purples and gentle contrast.

Fonts

Heading: system-ui, sans-serif
Body: system-ui, sans-serif

Colors

Token	Light	Dark
`--background-color`	`#f5f3f7`	`#1a1620`
`--text-color`	`#2e2834`	`#e4e1e8`
`--link-color`	`#6b4fa3`	`#b49dde`
`--visited-color`	`#8b5a9f`	`#b88fca`

Styles

/* Palette: Twilight */
:root {
  --width: 70ch;
  --font-main: system-ui, sans-serif;
  --font-secondary: system-ui, sans-serif;
  --font-scale: 1.0625rem;

  --background-color: #f5f3f7;
  --heading-color: #2e2834;
  --text-color: #2e2834;
  --link-color: #6b4fa3;
  --visited-color: #8b5a9f;

  --code-background-color: color-mix(in srgb, #2e2834 6%, #f5f3f7);
  --code-color: #2e2834;
  --blockquote-color: #2e2834;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1a1620;
    --heading-color: #e4e1e8;
    --text-color: #e4e1e8;
    --link-color: #b49dde;
    --visited-color: #b88fca;

    --code-background-color: #000;
    --code-color: #e4e1e8;
    --blockquote-color: #ccc;
  }
}

Woods

A calm, nature-inspired palette with soft greens and muted tones.

Fonts

Heading: system-ui, sans-serif
Body: system-ui, sans-serif

Colors

Token	Light	Dark
`--background-color`	`#fafbfa`	`#1b1f1d`
`--text-color`	`#3a3f3d`	`#e6e6e3`
`--link-color`	`#2a8573`	`#8fc7b3`
`--visited-color`	`#8b5a9f`	`#b88fca`

Styles

/* Palette: Woods */
:root {
  --width: 70ch;
  --font-main: system-ui, sans-serif;
  --font-secondary: system-ui, sans-serif;
  --font-scale: 1.0625rem;

  --background-color: #fafbfa;
  --heading-color: #3a3f3d;
  --text-color: #3a3f3d;
  --link-color: #2a8573;
  --visited-color: #8b5a9f;

  --code-background-color: color-mix(in srgb, #3a3f3d 6%, #fafbfa);
  --code-color: #3a3f3d;
  --blockquote-color: #3a3f3d;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #1b1f1d;
    --heading-color: #e6e6e3;
    --text-color: #e6e6e3;
    --link-color: #8fc7b3;
    --visited-color: #b88fca;

    --code-background-color: #000;
    --code-color: #e6e6e3;
    --blockquote-color: #ccc;
  }
}

Dusk

A warm, rosy palette inspired by the soft glow just after sunset.

Fonts

Heading: system-ui, sans-serif
Body: system-ui, sans-serif

Colors

Token	Light	Dark
`--background-color`	`#faf5f4`	`#221a1c`
`--text-color`	`#3a2c2e`	`#ecdfe1`
`--link-color`	`#b5485a`	`#e08a9a`
`--visited-color`	`#8b5a9f`	`#b88fca`

Styles

/* Palette: Dusk */
:root {
  --width: 70ch;
  --font-main: system-ui, sans-serif;
  --font-secondary: system-ui, sans-serif;
  --font-scale: 1.0625rem;
  --background-color: #faf5f4;
  --heading-color: #3a2c2e;
  --text-color: #3a2c2e;
  --link-color: #b5485a;
  --visited-color: #8b5a9f;
  --code-background-color: color-mix(in srgb, #3a2c2e 6%, #faf5f4);
  --code-color: #3a2c2e;
  --blockquote-color: #3a2c2e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #221a1c;
    --heading-color: #ecdfe1;
    --text-color: #ecdfe1;
    --link-color: #e08a9a;
    --visited-color: #b88fca;
    --code-background-color: #000;
    --code-color: #ecdfe1;
    --blockquote-color: #ccc;
  }
}

Amber

A warm, sepia-toned palette with a bold amber accent and cozy character.

Fonts

Heading: Bricolage Grotesque, sans-serif
Body: DM Sans, sans-serif

Colors

Token	Light	Dark
`--background-color`	`#f5f1eb`	`#1c1710`
`--text-color`	`#2a1e0e`	`#d2cdbf`
`--link-color`	`#a0651a`	`#e8a83c`
`--visited-color`	`#7a5540`	`#c49070`

Styles

/* Palette: Amber */
@import url('https://fonts.bunny.net/css?family=bricolage-grotesque:600,700,800|dm-sans:400,400i,500&display=swap');

:root {
  /* Layout and typography */
  --width: 65ch;
  --font-main: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-secondary: 'DM Sans', system-ui, sans-serif;
  --font-scale: 1.0625rem;

  /* Light colors */
  --background-color: #f5f1eb;
  --heading-color: #2a1e0e;
  --text-color: #2a1e0e;
  --link-color: #a0651a;
  --visited-color: #7a5540;
  --code-background-color: color-mix(in srgb, var(--background-color), black 5%);
  --code-color: var(--text-color);
  --blockquote-color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark colors */
    --background-color: #1c1710;
    --heading-color: #d2cdbf;
    --text-color: #d2cdbf;
    --link-color: #e8a83c;
    --visited-color: #c49070;
    --code-background-color: color-mix(in srgb, var(--background-color), white 8%);
    --code-color: var(--text-color);
    --blockquote-color: var(--text-color);
  }
}

Robeart

The default Robeart theme palette — a balanced, everyday look with classic system fonts.

Fonts

Heading: Tahoma, sans-serif
Body: Verdana, sans-serif

Colors

Token	Light	Dark
`--background-color`	`#f8f8f8`	`#01242e`
`--text-color`	`#2c2d2e`	`#d5d8dc`
`--link-color`	`#2952cc`	`#98cbe3`
`--visited-color`	`#7c5a91`	`#c9add7`

Styles

/* Palette: Robeart */
:root {
  /* Layout and typography */
  --width: 66ch;
  --font-main: Tahoma, sans-serif;
  --font-secondary: Verdana, sans-serif;
  --font-scale: 1rem;

  /* Light colors */
  --background-color: #f8f8f8;
  --heading-color: #2c2d2e;
  --text-color: #2c2d2e;
  --link-color: #2952cc;
  --visited-color: #7c5a91;
  --code-background-color: color-mix(in srgb, var(--background-color), black 5%);
  --code-color: var(--text-color);
  --blockquote-color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark colors */
    --background-color: #01242e;
    --heading-color: #d5d8dc;
    --text-color: #d5d8dc;
    --link-color: #98cbe3;
    --visited-color: #c9add7;
    --code-background-color: color-mix(in srgb, var(--background-color), white 8%);
    --code-color: var(--text-color);
    --blockquote-color: var(--text-color);
  }
}

Lavender

A dreamy, saturated violet look with modern geometric type.

Fonts

Heading: Lexend, sans-serif
Body: Inter, sans-serif

Colors

Token	Light	Dark
`--background-color`	`#f7f5fb`	`#17141f`
`--text-color`	`#24212c`	`#e8e4f2`
`--link-color`	`#6f3fd6`	`#b399ff`
`--visited-color`	`#8f4a7a`	`#e0a3c2`

Styles

/* Palette: Lavender */
@import url('https://fonts.bunny.net/css?family=lexend:700,800|inter:400,400i,500,700&display=swap');

:root {
  /* Layout and typography */
  --width: 65ch;
  --font-main: 'Lexend', system-ui, sans-serif;
  --font-secondary: 'Inter', system-ui, sans-serif;
  --font-scale: 1rem;

  /* Light colors */
  --background-color: #f7f5fb;
  --heading-color: #24212c;
  --text-color: #24212c;
  --link-color: #6f3fd6;
  --visited-color: #8f4a7a;
  --code-background-color: color-mix(in srgb, var(--background-color), black 5%);
  --code-color: var(--text-color);
  --blockquote-color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark colors */
    --background-color: #17141f;
    --heading-color: #e8e4f2;
    --text-color: #e8e4f2;
    --link-color: #b399ff;
    --visited-color: #e0a3c2;
    --code-background-color: color-mix(in srgb, var(--background-color), white 8%);
    --code-color: var(--text-color);
    --blockquote-color: var(--text-color);
  }
}

Polarnatt

A calm, high-legibility dark palette designed for comfortable low-light reading.

Fonts

Heading: Atkinson Hyperlegible, sans-serif
Body: Atkinson Hyperlegible, sans-serif

Colors

Token	Dark
`--background-color`	`#0e0e10`
`--text-color`	`#f0f0f0`
`--link-color`	`#5eb8ff`
`--visited-color`	`#c49aff`

Styles

/* Palette: Polarnatt */
@import url('https://fonts.bunny.net/css?family=atkinson-hyperlegible:400,400i,700&display=swap');

:root {
  color-scheme: dark;

  --width: 65ch;
  --font-main: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-secondary: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --font-scale: 1.1rem;

  --background-color: #0e0e10;
  --heading-color: #f0f0f0;
  --text-color: #f0f0f0;
  --link-color: #5eb8ff;
  --visited-color: #c49aff;

  --code-background-color: color-mix(in srgb, #f0f0f0 6%, #0e0e10);
  --code-color: #f0f0f0;
  --blockquote-color: #f0f0f0;
}

Studio

An editorial look with warm cream tones, teal links, and a bold serif/rounded-sans pairing.

Fonts

Heading: Fraunces, serif
Body: Nunito, sans-serif

Colors

Token	Light	Dark
`--background-color`	`#fdf8f2`	`#13121e`
`--heading-color`	`#e0407a`	`#f06898`
`--text-color`	`#1e1828`	`#ede8f8`
`--link-color`	`#0a8f8a`	`#38c8c0`
`--visited-color`	`#7a60a0`	`#b090d8`

Styles

/* Palette: Studio */
@import url('https://fonts.bunny.net/css?family=fraunces:700,800|nunito:400,400i,600&display=swap');

:root {
  /* Layout and typography */
  --width: 70ch;
  --font-main: 'Fraunces', Georgia, serif;
  --font-secondary: 'Nunito', system-ui, sans-serif;
  --font-scale: 1.0625rem;

  /* Light colors */
  --background-color: #fdf8f2;
  --heading-color: #e0407a;
  --text-color: #1e1828;
  --link-color: #0a8f8a;
  --visited-color: #7a60a0;
  --code-background-color: color-mix(in srgb, var(--background-color), black 5%);
  --code-color: var(--text-color);
  --blockquote-color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark colors */
    --background-color: #13121e;
    --heading-color: #f06898;
    --text-color: #ede8f8;
    --link-color: #38c8c0;
    --visited-color: #b090d8;
    --code-background-color: color-mix(in srgb, var(--background-color), white 8%);
    --code-color: var(--text-color);
    --blockquote-color: var(--text-color);
  }
}

Sverige

A blue-and-gold palette inspired by Swedish flag colors, with a bold heading font and clean sans body text.

Fonts

Heading: Bricolage Grotesque, sans-serif
Body: DM Sans, sans-serif

Colors

Token	Light	Dark
`--background-color`	`#fbf9f2`	`#1b1f26`
`--text-color`	`#1a2030`	`#e6e7e8`
`--link-color`	`#0f4fa3`	`#edc230`
`--visited-color`	`#8a7235`	`#b8943e`

Styles

/* Palette: Sverige */
@import url('https://fonts.bunny.net/css?family=bricolage-grotesque:600,700,800|dm-sans:400,400i,500&display=swap');

:root {
  /* Layout and typography */
  --width: 63ch;
  --font-main: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-secondary: 'DM Sans', system-ui, sans-serif;
  --font-scale: 1.0625rem;

  /* Light colors */
  --background-color: #fbf9f2;
  --heading-color: #1a2030;
  --text-color: #1a2030;
  --link-color: #0f4fa3;
  --visited-color: #8a7235;
  --code-background-color: color-mix(in srgb, var(--background-color), black 5%);
  --code-color: var(--text-color);
  --blockquote-color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark colors */
    --background-color: #1b1f26;
    --heading-color: #e6e7e8;
    --text-color: #e6e7e8;
    --link-color: #edc230;
    --visited-color: #b8943e;
    --code-background-color: color-mix(in srgb, var(--background-color), white 8%);
    --code-color: var(--text-color);
    --blockquote-color: var(--text-color);
  }
}

Contrast

A high-legibility palette with strong contrast, deep colors, and clean institutional-grade typography.

Fonts

Heading: Public Sans, sans-serif
Body: Public Sans, sans-serif

Colors

Token	Light	Dark
`--background-color`	`#fbfaf8`	`#0f1418`
`--heading-color`	`#111214`	`#f4f2ee`
`--text-color`	`#1a1b1e`	`#dfddd7`
`--link-color`	`#1138a8`	`#92c5ff`
`--visited-color`	`#4b2a7f`	`#e2c7ff`

Styles

/* Palette: Strong Contrast */
@import url('https://fonts.bunny.net/css?family=public-sans:400,500,600,700,800&display=swap');

:root {
  /* Layout and typography */
  --width: 66ch;
  --font-main: 'Public Sans', system-ui, sans-serif;
  --font-secondary: 'Public Sans', system-ui, sans-serif;
  --font-scale: 1.15rem;

  /* Light colors */
  --background-color: #fbfaf8;
  --heading-color: #111214;
  --text-color: #1a1b1e;
  --link-color: #1138a8;
  --visited-color: #4b2a7f;
  --code-background-color: color-mix(in srgb, var(--background-color), black 6%);
  --code-color: var(--text-color);
  --blockquote-color: var(--text-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark colors */
    --background-color: #0f1418;
    --heading-color: #f4f2ee;
    --text-color: #dfddd7;
    --link-color: #92c5ff;
    --visited-color: #e2c7ff;
    --code-background-color: color-mix(in srgb, var(--background-color), white 10%);
    --code-color: var(--text-color);
    --blockquote-color: var(--text-color);
  }
}

Want more? Check out the full Bear Blog library.