I made a Sage 10 theme for a network of websites. Every website has its own color palette and font stack. That is all working fine
However for compatibility with a certain plugin I unfortunately need one specific small css file colors.scss to be different for every website.
What would be a good way to do this? Ideally I would like to invoke the different builds from the command line.
This may or may not help, but i thought sharing it. Bud config for outputting multiple css files (from scss for ACF Blocks)
I solved this kind of problem years ago for Sage 9. This might help get you moving in the right direction at least?
Hi, thanks! This looks interesting. I’ll check it out.
I was also planning to look into this experimental feature of bud: Running multiple instances | bud.js.
By the way, in case anyone is interested: I have a working solution for selectable color schemes (and font stacks), inspired by a Sage user. CSS variables are defined differently based on the chosen theme (which can be chosen in a ACF option page). Those css variables are then used in both the tailwind palettes and in the theme.json palette. See below for a sketch. I you need transparency to work as well check out this video
_colors.scss:
/* default theme */
:root {
/* https://tailcolor.com/palettes/60b502 */
--color-theme-1: #60b502;
--color-theme-1-50: #eff8e6;
--color-theme-1-100: #dff0cc;
--color-theme-1-200: #bfe19a;
--color-theme-1-300: #a0d367;
--color-theme-1-400: #80c435;
/* https://tailcolor.com/palettes/cb4d27 */
--color-theme-2: #cb4d27;
...
--color-text-link: var(--color-theme-2);
--color-text-menu-default-hover: var(--color-theme-2);
--color-bg-menu-colored: var(--color-theme-1);
/* Theme A */
.theme-a {
/* https://tailcolor.com/palettes/00889f */
--color-theme-1: #00889f;
--color-theme-1-50: #e6f3f5;
...
/* https://tailcolor.com/palettes/f58d00 */
--color-theme-2: #f58d00;
...
tailwind.config.cjs
…
theme: {
extend: {
textColor: {
inverted: 'var(--color-text-inverted)',
link: 'var(--color-text-link)',
...
t1: {
base: 'var(--color-theme-1)',
'50': 'var(--color-theme-1-50)',
...
},
t2: {
base: 'var(--color-theme-2)',
...
},
},
backgroundColor: {
menu: {
default: 'var(--color-bg-menu-default)',
colored: 'var(--color-bg-menu-colored)',
},
...
t1: {
base: 'var(--color-theme-1)',
...
},
borderColor {
...
}
theme.json
"settings": {
"color": {
"palette":[
...
{
"slug": "link",
"color": "var(--color-text-link)",
"name": "link"
},
{
"slug": "color-1",
"color": "var(--color-theme-1)",
"name": "theme color 1"
},
{
"slug": "color-1-50",
"color": "var(--color-theme-1-300)",
"name": "theme color 1 (300)"
},
...
{
"slug": "color-2",
"color": "var(--color-theme-2)",
"name": "theme color 2"
},
I looked into this and I think your solution has the advantage of using the native WP Customizer (instead of an ACF Option page) and loading only the style sheets that are needed for the theme.
It could then be nicely combined with the setup I sketched above so the theme colors are available in Tailwindcss and mirrored in the Block editor color palettes.
I also think splitting up my _colors.scss and loading the separate files conditionally with your method is gonna solve my particular problem. Thanks!
If you end up with a Sage 10 example that makes good use of Bud please share it!
This is what I tried, and it is working perfectly except in development mode. Then the theming styles are not picked up. Any idea where I go wrong?
bud.config
app
.entry({
app: ['@scripts/app', '@styles/app'],
editor: ['@scripts/editor', '@styles/editor'],
theme1: ['@styles/theme1'],
theme2: ['@styles/theme1'],
...
})
setup.php
add_action('wp_enqueue_scripts', function () {
bundle('app')->enqueue();
$current_theme = get_field('choosetheme_r', 'options');
switch ($current_theme) {
case 'theme1':
bundle('theme1')->enqueueCss();
break;
case 'theme2':
bundle('theme2')->enqueueCss();
break;
...
theme1.scss
@import 'theming/colors-theme1';
@import 'theming/fonts-theme1';