72 lines
1.4 KiB
JavaScript
72 lines
1.4 KiB
JavaScript
|
let plugin = require("tailwindcss/plugin");
|
||
|
|
|
||
|
|
let colors = {
|
||
|
|
black: "#333333",
|
||
|
|
blue: "#334982",
|
||
|
|
grey: "#f3f3f3",
|
||
|
|
orange: "#fdb913",
|
||
|
|
pink: "#e40087",
|
||
|
|
purple: "#782b8f",
|
||
|
|
red: "#dd372f",
|
||
|
|
teal: "#00857d",
|
||
|
|
white: "#fff",
|
||
|
|
};
|
||
|
|
|
||
|
|
let themes = {
|
||
|
|
blue: {
|
||
|
|
quaternary: colors.red,
|
||
|
|
quinary: colors.red,
|
||
|
|
primary: colors.blue,
|
||
|
|
secondary: colors.red,
|
||
|
|
tertiary: colors.white,
|
||
|
|
},
|
||
|
|
|
||
|
|
purple: {
|
||
|
|
quaternary: colors.white,
|
||
|
|
quinary: colors.purple,
|
||
|
|
primary: colors.purple,
|
||
|
|
secondary: colors.orange,
|
||
|
|
tertiary: colors.purple,
|
||
|
|
},
|
||
|
|
|
||
|
|
teal: {
|
||
|
|
quaternary: colors.pink,
|
||
|
|
quinary: colors.pink,
|
||
|
|
primary: colors.teal,
|
||
|
|
secondary: colors.pink,
|
||
|
|
tertiary: colors.white,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
|
||
|
|
let multiThemePlugin = plugin(function ({ addBase }) {
|
||
|
|
addBase(generateForRoot());
|
||
|
|
|
||
|
|
Object.keys(themes).forEach((themeName) => {
|
||
|
|
addBase(generateForTheme(themeName));
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
function generateForRoot() {
|
||
|
|
let defaultThemeName = Object.keys(themes)[0];
|
||
|
|
|
||
|
|
return Object.entries(themes[defaultThemeName]).map(([colourName, value]) => {
|
||
|
|
return {
|
||
|
|
":root": {
|
||
|
|
[`--color-${colourName}`]: value,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
function generateForTheme(themeName) {
|
||
|
|
return Object.entries(themes[themeName]).map(([colourName, value]) => {
|
||
|
|
return {
|
||
|
|
[`[data-theme=${themeName}]`]: {
|
||
|
|
[`--color-${colourName}`]: value,
|
||
|
|
},
|
||
|
|
};
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
module.exports = multiThemePlugin;
|