[6.x] Themes can now be .css files in resources/themes

[jackmcdade]

PROOF OF CONCEPT — INTERNAL DISCUSSION NEEDED

You can now set your theme config setting as a string, and if that matches a corresponding .css file resources/themes/ it'll load it instead of the config.

'theme' => 'geocities' // would load resources/themes/geocities.css

And inside that css file you could have something like this (please don't use this actual config – it's butt soup)

:root {
    --theme-color-primary: lime;
    --theme-color-gray-50: black;
    --theme-color-gray-100: black;
    --theme-color-gray-200: black;
    --theme-color-gray-300: black;
    --theme-color-gray-400: black;
    --theme-color-gray-500: black;
    --theme-color-gray-600: lime;
    --theme-color-gray-700: lime;
    --theme-color-gray-800: lime;
    --theme-color-gray-850: lime;
    --theme-color-gray-900: lime;
    --theme-color-gray-925: lime;
    --theme-color-gray-950: lime;
    --theme-color-success: lime;
    --theme-color-danger: black;
    --theme-color-body-bg: black;
    --theme-color-body-border: transparent;
    --theme-color-dark-body-bg: black;
    --theme-color-dark-body-border: black;
    --theme-color-content-bg: lime;
    --theme-color-content-border: black;
    --theme-color-dark-content-bg: black;
    --theme-color-dark-content-border: black;
    --theme-color-global-header-bg: black;
    --theme-color-dark-global-header-bg: black;
    --theme-color-progress-bar: lime;
    --theme-color-ui-accent-bg: lime;
    --theme-color-ui-accent-text: lime;
    --theme-color-dark-ui-accent-bg: lime;
    --theme-color-dark-ui-accent-text: lime;
    --theme-color-switch-bg: lime;
    --theme-color-dark-switch-bg: lime;
}

* {
    border-radius: 0 !important;
    font: 14px/1.5 monospace !important;
}

---

Note

Adds support for resources/themes/*.css theme files and conditionally injects them in head.blade.php, falling back to generated CSS variables.

• Theming:
  • src/CP/Color.php:
    • Allow theme() to accept a string and resolve resources/themes/{name}.css (updated return type array|string).
    • Add isUsingThemeFile() and themeCss() for detection and retrieval of theme CSS.
    • Import Statamic\Facades\File for file checks/reads.
• View Rendering:
  • resources/views/partials/head.blade.php:
    • Conditionally inject theme CSS: if using a theme file, output its contents; otherwise, output :root with cssVariables().

^{Written by Cursor Bugbot for commit dde95f0. This will update automatically on new commits. Configure here.}

[jasonvarga]

I think the only real objection I have is that the location resources/themes implies front-end themes to me.

[jackmcdade]

I think the only real objection I have is that the location resources/themes implies front-end themes to me.

That's a good point. We don't really have another place where it makes sense though. I guess it could just be ./themes?

[edalzell]

/resources/css/ has cp.css though?

[jackmcdade]

/resources/css/ has cp.css though?

Yup true. I'm assuming this would replace that.

[jasonvarga]

/resources/css/ has cp.css though?

Yup true. I'm assuming this would replace that.

That would be the source for a css file. The theme would be a compiled file.

Maybe the solution will become more obvious once we have more of the theme builder ui/workflow.

[JayGeorge]

The CSS override workflow makes perfect sense to me. It's neat.

RE naming, I do agree with Jason's point. What about something like resources/cp-themes?

[duncanmcclean]

Would the CSS file replace the need for the theme array?

[jackmcdade]

I guess cp-themes would work 👍

And yeah this would/could replace the theme array, though you could still use that to set a default, or use the Color:: helpers. 🤔