How to: your own colours, font and pill buttons in Storefront (child theme)

[navjottomer]

Storefront's settings give you three palettes and a light/dark choice. To match another site exactly (your own colours, font and button shape), use a small child theme. It is one CSS file on top of Storefront, and Storefront updates do not overwrite it.

The example below sets:

• primary colour #D10000 (red), secondary colour #FCBF11 (yellow)
• a near-black dark mode background, #0B0B0D
• the Inter font
• pill-shaped buttons

It is tested on Storefront 2.2.0, in light and dark mode.

1. Make the folder

Create oc-content/themes/storefront-custom/ with three files. You can also download the ready folder (storefront-custom.zip, at the end of this post) and change the colours.

index.php

<?php
/*
Theme Name: Storefront Custom
Version: 1.0.0
Parent Theme: storefront
*/

functions.php

<?php
function storefront_custom_styles()
{
    osc_enqueue_style('storefront-custom', osc_current_web_theme_styles_url('custom.css'));
}
osc_add_hook('header', 'storefront_custom_styles', 6);

css/custom.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap");

/* Brand colours, light and dark. Primary: #D10000. Secondary: #FCBF11. */
:root {
    --font-heading: "Inter", system-ui, sans-serif;
    --font-body: "Inter", system-ui, sans-serif;

    --color-accent: #D10000;
    --color-accent-100: #FFE5E5;
    --color-accent-200: #FFB8B8;
    --color-accent-300: #FF7A7A;
    --color-accent-400: #F03A3A;
    --color-accent-500: #D10000;
    --color-accent-600: #B30000;
    --color-accent-700: #940000;
    --color-accent-800: #750000;
    --color-accent-900: #520000;
    --color-accent-fill: #D10000;
    --color-accent-fill-hover: #A80000;
    --color-accent-fill-active: #8A0000;

    --color-accent-2: #FCBF11;
    --color-accent-2-100: #FFF6D6;
    --color-accent-2-200: #FFE9A3;
    --color-accent-2-300: #FEDB66;
    --color-accent-2-400: #FDCD3A;
    --color-accent-2-500: #FCBF11;
    --color-accent-2-600: #E0A600;
    --color-accent-2-700: #B38400;
    --color-accent-2-800: #866300;
    --color-accent-2-900: #5C4400;
    --color-accent-2-fill: #FCBF11;
    --color-accent-2-fill-hover: #E0A600;
    --color-accent-2-ink: #866300;
}

/* Dark mode: chosen in the theme settings, or by the visitor's system when set to Auto. */
:root[data-theme="dark"] {
    --color-bg: #0B0B0D;
    --color-surface: #16161A;
    --color-text: #F2F2F3;
    --color-fixed-ink: #0B0B0D;
    --color-accent-ink: #FF7A7A;
    --color-accent-2-ink: #FEDB66;
    --color-neutral-100: #17171B;
    --color-neutral-200: #1F1F24;
    --color-neutral-300: #2A2A30;
    --color-neutral-400: #3D3D45;
    --color-neutral-500: #6E6E78;
    --color-neutral-600: #9A9AA3;
    --color-neutral-700: #BDBDC4;
    --color-neutral-800: #DADADF;
    --color-neutral-900: #F2F2F3;
}
@media (prefers-color-scheme: dark) {
    :root[data-theme="auto"] {
        --color-bg: #0B0B0D;
        --color-surface: #16161A;
        --color-text: #F2F2F3;
        --color-fixed-ink: #0B0B0D;
        --color-accent-ink: #FF7A7A;
        --color-accent-2-ink: #FEDB66;
        --color-neutral-100: #17171B;
        --color-neutral-200: #1F1F24;
        --color-neutral-300: #2A2A30;
        --color-neutral-400: #3D3D45;
        --color-neutral-500: #6E6E78;
        --color-neutral-600: #9A9AA3;
        --color-neutral-700: #BDBDC4;
        --color-neutral-800: #DADADF;
        --color-neutral-900: #F2F2F3;
    }
}

/* Pill buttons */
.btn, .sf-btn { border-radius: 999px; }

/* A yellow fill needs dark text. */
.btn-accent, .sf-btn--accent,
.btn-accent:hover, .sf-btn--accent:hover { color: #0B0B0D; }

/* Storefront paints delete buttons with the secondary colour; keep them red. */
.sf-btn--danger, .sf-state--danger, .sf .oe-page .oe-btn-danger { background: #B30000; color: #FFFFFF; }
.sf-btn--danger:hover, .sf .oe-page .oe-btn-danger:hover { background: #8A0000; color: #FFFFFF; }

2. Turn it on

1. Appearance: activate Storefront Custom.
2. Storefront's theme settings: set Colour scheme to Dark, Light or Auto. Auto follows the visitor's system.

Using your own colours

• Primary is the --color-accent-* set. Secondary is the --color-accent-2-* set. Put your colour at 500 and on -fill. Make 100 to 400 lighter steps and 600 to 900 darker steps. Any "tints and shades" tool makes these for you.
• --color-accent-ink and --color-accent-2-ink are for text in those colours, such as links. Pick a step that is easy to read on your background: a dark step on light mode, a light step on dark mode.
• Your dark mode background is --color-bg. Cards use --color-surface. The --color-neutral-* steps colour borders, chips and muted text. Keep them in the same tone as your background, or you get a tinted edge.
• If your secondary colour is light (yellow, lime), keep the dark-text rule for .sf-btn--accent.
• Storefront uses the secondary colour for delete and warning states. If your secondary colour is not a warning colour, keep the last rule, so delete buttons stay red.

Font without Google

To serve the font yourself, put the .woff2 files in storefront-custom/fonts/. Then replace the @import line with an @font-face rule that points at ../fonts/your-file.woff2.

More

• Child themes in general: https://mindstellar.com/docs/developers/child-themes/
• Keep your changes in the child theme. Never edit Storefront's own files, because an update replaces them.

We may add colour, font and button-shape settings to Storefront itself later. Until then, this is the safe way to brand it.
storefront-custom.zip