We created a theme.css :root file with a number of commonly used variables to use across the various other .css files for our app.
But some of our older code has a similar setup, but in a theme.ts file with some variables. I want to import the variables from our theme.css into our theme.ts so that everything can be manipulated from that single css file.
I've checked out a few links, like this article on medium, and this answer here on stackoverflow, but no dice.
I wanted to see if I could get it working so I did the quick and dirty way of const s = require('./theme.css'), but I wasn't able to correctly assign the variables.
Here's theme.css
:root {
--primaryColor: #427ee1;
--secondaryColor: #f2f2f2;
--chatBackground: #fff;
--typingAnimationDots: #427ee1;
--typingAnimationFill: #f2f2f2;
--userResponseColor: #427ee1;
--fontType: 'Open Sans';
--hoverFillColor: #306aca;
--hoverFontColor: #f2f2f2;
}
And theme.ts with examples of each of my unsuccessful attempts at calling a variable name
const s = require('./theme.css')
const botMessageBackgroud = s.secondaryColor // returns black like its undefined
const botMessageBorder = s['--primaryColor'] // also returns black
const botMessageColor = s[':root']['--primaryColor'] // cannot read --primaryColor of undefined
So I'm thinking that my method of calling the variables is wrong, or maybe I do need to import an outside dependency? Thanks, and let me know if you need any other information.
edit** Here's something else I've tried that hasn't worked out. I was pretty excited because I thought it worked. But it didn't.
const s = require('./theme.css')
console.log('s >>> ', s)
const callVar = (varName: string) => {
return getComputedStyle(document.documentElement).getPropertyValue(varName)
}
const botMessageBorder = callVar('--primaryColor')
const botMessageColor = callVar('--primaryColor')
edit** Forgot some critical information here. theme.css gets its values from our api through a mobx state tree:
export const BotCSS = types.model({
chatBackground: types.optional(types.string, '#fff'),
fontType: types.optional(types.string, 'Open Sans'),
hoverFillColor: types.optional(types.string, '#306aca'),
hoverFontColor: types.optional(types.string, '#f2f2f2'),
primaryColor: types.optional(types.string, '#427ee1'),
secondaryColor: types.optional(types.string, '#fff'),
typingAnimationDots: types.optional(types.string, '#427ee1'),
typingAnimationFill: types.optional(types.string, '#f2f2f2'),
userBoxColor: types.optional(types.string, '427ee1'),
userResponseColor: types.optional(types.string, '#fff'),
widgetShape: types.optional(types.string, '50%')
})
export type IBotCSS = typeof BotCSS.Type
So I can probably just import those mobx values in to the TS sheet, right? Or make a view on the model.
edit** still working on this. However I haven't imported an MST into a plain js/ts file before. Only have experience with importing it into components. I've been looking at some various resources but if anyone can point me in the right direction I'd really appreciate it
