Bear palettes

Bear 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. These palettes use Bear's default property names. If you're using Bearming, it has its own palette system.

Just copy the palette you like and paste it over the theme’s :root styles in the Bear dashboard. Done.

Antique

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

/* Palette: Antique */
:root {
    --width: 720px;
    --font-main: Georgia, serif;
    --font-secondary: Georgia, serif;
    --font-scale: 1.0625em;
    --background-color: #faf8f3;
    --heading-color: #2f2a24;
    --text-color: #3a342e;
    --link-color: #7a4f2a;
    --visited-color: #8b5a9f;
    --code-background-color: color-mix(in srgb, #3a342e 6%, #faf8f3);
    --code-color: #2f2a24;
    --blockquote-color: #2f2a24;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #1e1b18;
        --heading-color: #e7e2dc;
        --text-color: #d6d0c8;
        --link-color: #c89b6d;
        --visited-color: #b88fca;
        --code-background-color: #000;
        --code-color: #e7e2dc;
        --blockquote-color: #ccc;
    }
}

Modern

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

/* Palette: Modern */
:root {
    --width: 65ch;
    --font-main: system-ui, sans-serif;
    --font-secondary: system-ui, sans-serif;
    --font-scale: 1.0625em;
    --background-color: #f6f7f8;
    --heading-color: #2f3234;
    --text-color: #2f3234;
    --link-color: #3a6fc2;
    --visited-color: #8b5a9f;
    --code-background-color: color-mix(in srgb, #2f3234 6%, #f6f7f8);
    --code-color: #2f3234;
    --blockquote-color: #2f3234;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #1b1f24;
        --heading-color: #e1e2e3;
        --text-color: #e1e2e3;
        --link-color: #7ca8df;
        --visited-color: #b88fca;
        --code-background-color: #000;
        --code-color: #e1e2e3;
        --blockquote-color: #ccc;
    }
}

Playful

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

/* Palette: Playful */
:root {
    --width: 720px;
    --font-main: 'Comic Sans MS', 'Chalkboard SE', 'Comic Neue', cursive;
    --font-secondary: 'Trebuchet MS', 'Lucida Grande', 'Century Gothic', sans-serif;
    --font-scale: 1.0625em;
    --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;
    }
}

Terminal

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

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

    --width: 720px;
    --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: 1.05em;

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

Twilight

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

/* Palette: Twilight */
:root {
    --width: 720px;
    --font-main: system-ui, sans-serif;
    --font-secondary: system-ui, sans-serif;
    --font-scale: 1.0625em;

    --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: #a68dd4;
        --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.

/* Palette: Woods */
:root {
    --width: 720px;
    --font-main: system-ui, sans-serif;
    --font-secondary: system-ui, sans-serif;
    --font-scale: 1.0625em;

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

/* Palette: Dusk */
:root {
    --width: 720px;
    --font-main: system-ui, sans-serif;
    --font-secondary: system-ui, sans-serif;
    --font-scale: 1.0625em;
    --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;
    }
}

↑ Back to menu

Robert Birming