Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
April 25, 2021 03:32 pm GMT

Theming with React, Less and CSS variables

The styles written in less are compiled to generate a CSS file, so Less variables get converted to their values in the output. To switch a theme dynamically in the browser we'll need to change the color values on the fly, this is where CSS variables come in.

CSS variables can be declared and used in less files, we can change the variable value or swap variable definition in the browser and it's as easy as changing an element's class name.

Let's set up a basic react page to understand theming. The task can be broken down in to

  • Theme Context and Wrapper
  • Header
  • Card with some text/images
  • Theme toggle button
  • light and dark theme variables
  • CSS for the above components

Create a theme context and a wrapper component to make them available to the app.

const LIGHT_THEME = 'light-theme';const DARK_THEME = 'dark-theme';const ThemeContext = React.createContext();// wrapper to make theme and changeTheme available // down the treefunction ThemeWrapper({ children }) {  const [theme, setTheme] = React.useState(LIGHT_THEME);  const applyTheme = (newTheme) => {    // TODO: apply new theme on app    setTheme(newTheme);  }  return (    <ThemeContext.Provider value={{ theme, applyTheme }}>      {children}    </ThemeContext.Provider>  )}

The card component

function Card() {  const { theme } = React.useContext(ThemeContext);  return (    <div className="card"> Applied theme: {theme} </div>  );}

Theme toggle button

function ToggleTheme() {  const { theme, applyTheme } = React.useContext(ThemeContext);  const altTheme = theme === LIGHT_THEME ? DARK_THEME : LIGHT_THEME;  const toggle = () => {    applyTheme(altTheme);  }  return (    <div className="toggle-theme">       <button onClick={toggle}>Go {altTheme}</button>     </div>  )}

The parent App wraps children with ThemeWrapper

function App() {  return (    <div id="app" className="light-theme">      <div className="header"> Theme Sandbox </div>      <ThemeWrapper>        <div>         <ToggleTheme />         <Card />        </div>      </ThemeWrapper>    </div>  );}// mount to htmlconst rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);

HTML just needs a root element

<div id="root"></div>

Now let's define some essential colors for our two themes. I mixed a few palettes from colorhunt to get these.

We'll define two colors each for font, background, and border - a primary and a secondary. The themes will be defined as classes and to apply a theme we just need to apply the corresponding class.

.light-theme {  --primary: #02475e;   --secondary: #194350;  --primaryBackground: #f9f3f3;  --secondaryBackground: #d8e3e7;  --primaryBorder: #000;  --secondaryBorder: #333;}.dark-theme {  --primary: #f9f3f3;  --secondary:#dddddd;  --primaryBackground: #151515;  --secondaryBackground: #301b3f;  --primaryBorder: #3c415c;  --secondaryBorder: #b4a5a5;}

Write styles for the rest of the items using the above variables

#app {  color: var(--primary);  background-color: var(--primaryBackground);  width: 100%;  height: 100%;  position:absolute;}.header {  text-align: center;  font-size: 1.5em;  margin: 10px 0px 20px 0px;}.toggle-theme {  position: absolute;  right: 10px;  top: 5px;}.card {  color: var(--secondary);  background-color: var(--secondaryBackground);  border: 1px solid var(--secondaryBorder);  width: 300px;  height: 300px;  margin: auto;  padding: 5px;}

In the app component, I have specified "light-theme" as the class, so the variables defined by our light theme would be available to the components below. Changing the theme would just mean switching the class assigned to the App component. Let's add that action to ThemeWrapper

const applyTheme = (newTheme) => {   document.getElementById('app').className = newTheme;  setTheme(newTheme);}

The output,

Now that it's working, time to prettify the page a bit. Change the button to a switch, add some icons, font and tweak the styles to get:

Theme Context is not required to do theming if the requirement is only to change the CSS variables. But a context is useful to have the theme selection available everywhere, there might be external components where you have to pass in the theme or for taking actions based on a theme(styled-components).

That's all folks :)


Original Link: https://dev.to/ksankar/theming-with-react-less-and-css-variables-2pbg

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To