-
Notifications
You must be signed in to change notification settings - Fork 359
Catalyst Theming
#1985
What approach are people taking when theming their Catalyst site? Is there any documentation on extending or creating your own Vibes or independent theme?
All reactions
Replies: 1 comment
Our approach was to override the tailwind config and load custom theme for a multi site theme setup.
Sample tailwind config. We drove our config via env SITE.
const themeConfig = require('./tailwind-theme.config');
const selectedThemeConfig = themeConfig[process.env.SITE] || themeConfig.default; // Fallback to a default config
const config = {
content: ['./src/**/*.{ts,tsx}', './app/**/*.{ts,tsx}', './components/**/*.{ts,tsx}'],
theme: selectedThemeConfig,
plugins: [require('tailwindcss-radix')(), require('tailwindcss-animate')],
};
module.exports = config;
Now for tailwind-theme.config
we did something like the following
const shared = {
black: 'var(--black)',
white: {
DEFAULT: 'var(--white)',
powder: 'var(--white-powder)',
smoke: 'var(--white-smoke)',
},
red: 'var(--red)',
}
const themeConfig = {
SITE_A: {
colors: {
primary: 'var(--brand-red)',
secondary: 'var(--brand-orange)',
'btn-primary': 'var(--brand-blue)',
'btn-secondary': 'var(--white)',
...shared,
},
},
SITE_B: {
colors: {
primary: 'var(--brand-yellow)',
secondary: 'var(--brand-green)',
...shared,
},
},
default: {
colors: {
primary: 'var(--brand-primary)',
secondary: 'var(--brand-secondary)',
...shared,
},
},
};
module.exports = themeConfig;
Good luck
All reactions
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment