Switching themes using Less + CSS Modules in React - css

In my project, I use CSS Modules with Less, which means I get the best of both worlds.
My src folder looks something like this:
components/
[all components]
theme/
themes/
lightTheme.less
darkTheme.less
palette.less
palette.less:
#import './themes/lightTheme.less';
Then, in every component that wants to use colors from the theme, I do:
component.module.less:
#import '../../theme/palette.less';
.element {
background-color: #primary;
}
This structure lets me edit palette.less to import the theme I want to use. The thing is that I want to let the users choose their preferred theme on their own. Themes should be switchable on runtime, which means I somehow need to have both themes compiled.
I imagine the perfect solution to be something like this:
app.less
body {
#theme: #light-theme;
&.dark-theme {
#theme: #dark-theme;
}
}
And then somehow import this #theme variable in every component and read properties from it (i.e. #theme[primary]).
Unfortunately, Less variables scoping don't work like this.
I am open-minded to any solution that uses Less modules.
Thank you!

I know that you've probably looking for a solution that uses Less / CSS modules, but it's very likely that your situation can be solved solely with the use of css variables (as Morpheus commented on your question).
How it would work?
You'd have to ensure all your styling does not use hardcoded values, i.e. instead of:
.awesome-div {
background-color: #fefefe;
}
You would have:
:root {
--awesome-color: #fefefe;
}
.awesome-div {
background-color: var(--awesome-color);
}
Changing between light and dark
There are two ways of changing themes in this approach:
Use vanilla Js code within React to update the :root CSS element, check this codepen for more information;
Just load a component containing all new :root variables in its component.css file;
In React (in vanilla CSS too) you can easily have multiple components/elements declaring their own :root at their .css files.
Furthermore, any new :root will overwrite conflicting values from previous :root. For example if at file app.css we have :root { --color: red; } and, when loading another component, component A for instance, where in component_a.css we have the same variable overwritten, e.g. :root { --color: blue; } the one rendered in our browsers will be the one from component A.
Following this logic, you can have a dummy component that does and renders exactly nothing, but instead in this component.js file you import the .css of a theme, e.g.:
import './light.css'; // suppose this is the light-theme dummy component
When switching themes in your app you'd just have to remove the dummy component from scene and call the other one.
I'm not too experienced with codepen to the point of providing you an example containing imports/modules over there, but I hope the above explanation can give you an idea of what I mean. Still, here's a brief pseudo-code of what I'm intending to demonstrate:
loadTheme() {
if (this.state.theme === 'dark') return <LightTheme />;
if (this.state.theme === 'user-3232') return <UserTheme />;
return <DarkTheme />;
}
render() {
return (
<App>
{this.loadTheme()}
<OtherContent>
</App>
);
}

Check out Styled components, it can do that.
https://www.npmjs.com/package/styled-components
https://styled-components.com/docs/advanced#theming
I did it myself as a Easter Egg in an app of mine, so I know for sure it works. Unfortunately it is closed so I can't show you the code publicly.

Related

SCSS Styling with Next.js

I am relatively new to Next.js and the react ecosystem, but have been using it for a lot of my website development lately and so far have been loving it. One thing that is definitely causing some increased development time is how the styling works using SCSS, or at least my understanding of it.
I have built a number of SCSS partial files that contain different pieces of a style guide that I have used for a while - think similar to tailwind where I have predefined a large number of classes to do different things, some as simple as .flex { display: flex; } to more complex styles.
I have imported many of these partials into the globals.scss file so they would be applied everywhere, and some of the other partials are only imported into the specific files that I need them.
The issue I am running into with Next is that if I want to style a global selector, I have to add additional classes to the element. For example, if I had something like this
import styles from './component.module.scss'
export default function Component() {
return (
<div className={styles.classOne}>
<div className="container additionalClass anotherClass"></div>
</div>
);
what would be ideal is to be able to target those classes in the related scss file like so:
.classOne {
background:#000;
.additionalClass {
padding:10px;
}
}
however targeting that .additionalClass does not work, so I would have to switch the js file to be something like
import styles from './component.module.scss'
export default function Component() {
return (
<div className={styles.classOne}>
<div className={`container additionalClass anotherClass ${styles.mySpecificStyleSelector}`}></div>
</div>
);
and then target .mySpecificStyleSelector in the scss. Is this something that is by design with Next or am I missing something that could help with this scenario? I appreciate any input!

How can I use colours stored in JSON in my CSS?

I need to get some colour values out of a DB and use them in my CSS so that each customer has a colour branded version of my React.js application, but I'm not sure how.
I have other elements of branding such as logos, slogans and terminology which I'm pulling out of the DB, storing as a JSON file, and referencing around the site, which works fine, but the problem is the colours which I need to use in my stylesheet as I need to use the pseudo classes that CSS offer.
I've found this postcss-import-json package which claims to do this, but I can't seem to get it to work as intended.
So far I've...
Imported the package...
npm install --save-dev postcss-import-json
Created a JSON file called 'masterConfig.json'
Imported the above file into my main stylesheet using the name i've called my colour (primary)...
:root { #import-json "../Assets/MasterConfig/masterConfig.json" (primary); }
Added the above colour name to my list of colours...
:root {primary: primary}
I've also tried this with the -- prefix by changing to #import-json... (primary as primary prefix --)
...and added it in my code where it is to be used...
style={{background: "var(--primary)"}}
^^^ with and without the prefix
Am I doing something wrong?
I've noticed in the example it uses the $ symbol, so can this only be used with SCSS?
Any help with this, or any other way to achieve this would be great, thanks!
So, I was quite surprised that I didn't already know how to do this, it seems so trivial and doesn't need any additional package.
To change a CSS varibale from JavaScript code, simply target the root element as you normally would, and set the property!
CSS
Create a variable (I'm using a fallback colour)
:root {--primary: #123456;}
JavaScript
I'm using React, and set this is my App.js componentDidMount function so it's global to my app. I've hard-coded the colour, but this can be pulled from the DB.
componentDidMount() {
const root = document.documentElement;
root.style.setProperty('--primary', '#CCCC00');
}
BooYaa!
There appears to be two was to access the variable you've defined, I've done it in two separate ways and you can implement whichever makes your code neater!
Referencing the variable inline:
CSS
:root {
--testcolor: red;
}
HTML
<div style="background:var(--testcolor)">
Many words
</div>
Example of the working product in JS Fiddle: https://jsfiddle.net/ta37nzer/
Accessing the variable through a class:
CSS
:root {
--testcolor: red;
}
.exampleClass {
background: var(--testcolor);
}
HTML
<div class="exampleClass">
Many words
</div>
Example of the working product in JS Fiddle: https://jsfiddle.net/ta37nzer/1/

Using global variables for Less in Angular

I set up my project as Less in Angular to use the benefits of variables and such in my CSS. But the problem is that I have to define those variables in each component which doesn't make it as efficient. Is there a way to set the variables globaly?
So I want to get rid of this:
In my component less:
#pink-color: #FC9DB5; // I want to get this from a single
// file which I import on each component
header {
background-color: #pink-color;
height: 100px;
}
This is what #import is for; it lets you import files of variables.

CSS Modules - referencing classes from other modules

I have understood the concept of CSS modules so much that I am convinced that I do not want to do anything else that that for the future.
Currently I am trying to refactor an existing app to use CSS modules, the app has used classic sass with BEM methodology since.
Before I describe my problem I want to make clear that I undestand that I am addressing an issue that is not really within the domain of CSS modules. One should apply styles solely for usage inside a single module. At the most one should compose CSS classes with other CSS classes of other modules. But basically: You build an (HTML-)module and you use CSS modules to style that module and that's that.
Here's the problem:
In the process of refactoring there is one single issue that derives from having had a SASS-based style system. I can't find a valid method to work with a CSS class within a CSS modules environment when this class should work in combination of another class from another module.
Example in SASS:
[page.scss]
.wrapper {
margin: 0;
}
[headline.scss]
.headline {
color: green;
}
.wrapper {
.headline {
color: orange;
}
}
As you can see: One module (page) defines a CSS class "wrapper", another module defines a CSS class "headline". And, additionally, the class "headline" should behave a bit differently when placed inside the class "wrapper".
Again, I know that this is not really the domain of CSS modules. But I really would like to know if this is somehow doable with CSS modules? The "composes"-feature of CSS modules does not really fit here...
This is a common issue when migrating to CSS Modules. In short, a css module cannot override a style from another css module, and this is by design. Styles are supposed to live with the components that render them, and nowhere else.
What you can do to refactor this is to create a component style variant and explicitly set the variant through a prop when rendered within your wrapper.
For example, suppose your headline component currently looks something like this:
CSS
.headline {
color: green;
}
JSX
import styles from "Headline.css";
const Headline = () => {
return (
<div className={styles.headline} />
);
}
Rather than trying to override the .headline class name from somewhere else, you can create a variant class name that you toggle through a prop:
CSS
.headline-green {
color: green;
}
.headline-orange {
color: orange;
}
JSX
import styles from "Headline.css";
const Headline = ({orange}) => {
return (
<div className={orange ? styles.headlineOrange : styles.headlineGreen} />
);
}
And when you render it from your wrapper, set it to the orange variant:
<Headline orange />
Tip: you can use composes to eliminate duplicate common styles between your variants.

using css modules, how can I import classes from a file

I am using css modules for my project, and I have a file positioning.css which has some useful classes that I want to import. e.g. .right, .left
What is the best approach for this using CSS Modules?
At the moment I can see 2 options, but they are not all that great:
composition in the component's style
.right {
composes: right from '../styles/positioning.css';
}
or
multiple css module imports in the component
import positioning from '../styles/positioning.css'
import styles from './myComponent.css';
Object.assign(styles, positioning)
class Menu extends Component {
render() {
return (
<div styleName='menu'>
<div styleName='left'>this is left</div>
<div styleName='right'>this is right</div>
</div>
);
}
};
export default CSSModules(Menu, styles);
I have manage to get this working:
// css file
#value class-to-compose from "file-where-class-is-defined.css";
.someclass {
composes: class-to-compose;
// other styles
}
One approach is to collect all app level css variables and calculations at the top level into app.css
#import "./theme/layout.css";
#import "./theme/colors.css";
...
Then reference app.css using
#import "../../app.css";
This way you can manage #import scope inside one file at the root level.
I'll go with the first proposition. (the result is quiet the same)
both proposition have quiet the same result
If someday you have to edit your Menu css, you'll just have to edit your Menu css and not your component.
You let CSSModules take decisions. (more futur proof?)
You could import the css files that you use frequently into a broader CSS file that you import on specific pages, this is taking the second approach but making it cleaner, especially if you have a lot of common core css files that you import on pretty much all pages.
I would advise you to go with [Sass] [1]. Sass allows for the usage of partials (i.e. distributed / scoped css sheets).
You write scoped (to the components you want) css and import all your partials into your main.css then.
Couple of other advantages:
you can do theming by having one partial that defines your them via variables, which you import first and then all your partials can use these variables.
having the css on a scoped level (at least to me) felt more "reactish" where components are supposed to be stand alone, but it also wasn't inline styling, which I find ugly and weird (I don't like to clutter down my .js files with styles)
[1] http://sass-lang.com/
I find this one line very helpful with importing:
#import 'file.css';
You could set these as globals and update their names to be a tad more semantic, like BootStraps pull-right.
If you declare them as
:global(.right) {
/* ... */
}
You can then just use them in your app by preferably importing globals early on in the entry point.
You should take a look at the option by vue.js component (scoped/overall)
You can choose a precompile css language like SASS, which can use #extend ...etc to reuse the common property, like below:
%common {
width: 100%;
height: inherit;
}
.my-class {
#extend %common;
}

Resources