Catalyst Theming

[jonmears]

What approach are people taking when theming their Catalyst site? Is there any documentation on extending or creating your own Vibes or independent theme?

[zbaig]

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