Defining and Applying UI Themes Using the Mimcss CSS-in-JS Library

UI theming dynamically alters a website's visual style, exemplified by features like dark mode. Users switch themes via UI controls or leverage OS-level color preferences. For developers, efficient theming tools should simplify theme definition and runtime application. This article explores Mimcss, a CSS-in-JS library, and its unique approach to theming using class inheritance.

Full disclosure: I'm the Mimcss author. While this might seem self-promotional, I believe Mimcss's theming method is innovative and warrants attention.

Theming Strategies

Web UI styling links HTML elements to CSS entities (classes, IDs). Modifying visual representation involves:

1. Altering HTML element CSS selectors (class names, IDs).
2. Modifying CSS styles for an element while retaining the selector.

Theme definition typically involves fewer style entities than HTML elements referencing them, especially with complex widgets. Therefore, changing theme styles is generally more efficient than modifying numerous HTML element class attributes.

CSS Theming

Traditional CSS uses alternate stylesheets:

<link href="default.css" rel="stylesheet" title="Default Style" type="text/css">
<link href="fancy.css" rel="alternate stylesheet" title="Fancy" type="text/css">
<link href="basic.css" rel="alternate stylesheet" title="Basic" type="text/css">

Only one stylesheet is active; browsers offer UI for theme selection. Identical rule names (class names) across stylesheets are crucial:

/* default.css */
.element { color: #fff; }

/* basic.css */
.element { color: #333; }

Switching stylesheets requires no HTML changes; the browser recalculates styles based on the cascading order. However, browser support for alternate stylesheets is limited.

CSS-in-JS Theming

Many CSS-in-JS libraries handle theming differently. React-integrated libraries (e.g., Styled Components) often use ThemeProvider and Context API or withTheme higher-order components, triggering re-rendering on theme changes. Framework-agnostic libraries employ proprietary methods, if theming is even supported. Many prioritize CSS scoping, creating unique class names; theme changes necessitate HTML modifications.

Mimcss: A Different Approach

Mimcss combines the strengths of alternate stylesheets and CSS-in-JS. It mirrors the alternate stylesheet approach with multiple style variations and identically named CSS entities. It also offers object-oriented programming and TypeScript type safety, along with the dynamic capabilities of CSS-in-JS.

Mimcss Fundamentals

Mimcss uses TypeScript classes to represent stylesheets. Rules are defined as class properties:

import * as css from "mimcss";

class MyStyles extends css.StyleDefinition {
  significant = this.$class({ color: "orange", fontStyle: "italic" });
  critical = this.$id({ color: "red", fontWeight: 700 });
}

Mimcss syntax closely resembles CSS, albeit more verbose. It supports various CSS rules (classes, IDs, tags, keyframes, etc.). After defining a style definition class, activate it:

let styles = css.activate(MyStyles);

This generates CSS rules in the DOM. Reference styles in HTML:

render() {
  return (
    <div>
      <p classname="{styles.significant.name}">Significant</p>
      <p id="{styles.critical.name}">Critical</p>
    </div>
  );
}

Deactivate styles when no longer needed:

css.deactivate(styles);

Mimcss generates unique class and ID names (e.g., MyStyles_significant in development, n2 in production).

Style Definition Inheritance

Inheritance simplifies theming:

class Base extends css.StyleDefinition { pad = this.$class({ padding: 4 }); }
class Derived extends Base { pad = this.$class({ padding: 8 }); }
let derived = css.activate(Derived);

derived.pad.name yields Base_pad, but the style is { padding: 8px }. The name is inherited, but the style is overridden. Multiple derived classes reuse the same name but apply different styles.

Mimcss Theming

Mimcss theming uses a theme declaration class defining CSS rules, and multiple implementation classes inheriting and overriding these rules. This mirrors the alternate stylesheet approach.

Example: A theme defines border shape:

class BorderTheme extends css.ThemeDefinition { borderShape = this.$class(); }

class SquareBorderTheme extends BorderTheme {
  borderShape = this.$class({ border: ["thin", "solid", "green"], borderInlineStartWidth: "thick" });
}

class RoundBorderTheme extends BorderTheme {
  borderShape = this.$class({ border: ["medium", "solid", "blue"], borderRadius: 8 });
}

Activate a theme:

let theme: BorderTheme = css.activate(SquareBorderTheme);

Only one theme from a given declaration class can be active at a time.

Referencing Mimcss Themes

Themes often define reusable elements (colors, sizes, fonts). CSS custom properties are ideal:

class ColorTheme extends css.ThemeDefinition {
  bgColor = this.$var("color");
  frColor = this.$var("color");
}

class LightTheme extends ColorTheme {
  bgColor = this.$var("color", "white");
  frColor = this.$var("color", "black");
}

class DarkTheme extends ColorTheme {
  bgColor = this.$var("color", "black");
  frColor = this.$var("color", "white");
}

Reference theme properties in style definitions:

class MyStyles extends css.StyleDefinition {
  theme = this.$use(ColorTheme);
  container = this.$class({ color: this.theme.frColor, backgroundColor: this.theme.bgColor });
}

This generates CSS using custom properties (var(--bgColor)). Components are decoupled from specific theme implementations, allowing for external theme provision. Mimcss also allows overriding the internal name generation for custom properties to match existing systems like Material Design.

Multiple Themes on One Page

Only one theme implementation per declaration class can be active simultaneously. However, to display multiple themes side-by-side, utilize CSS rule-based custom property redefinition:

class MyStyles extends css.StyleDefinition {
  theme = this.$use(ColorTheme);
  block = this.$class({ backgroundColor: this.theme.bgColor, color: this.theme.frColor });
  top = this.$class({ "  ": this.block, "--": [LightTheme] });
  bottom = this.$class({ "  ": this.block, "--": [DarkTheme] });
}

The operator combines class names, and -- redefines custom properties based on the specified theme.

Conclusion

Mimcss's inheritance-based theming offers a unique approach, combining alternate stylesheet functionality with the flexibility of CSS-in-JS and the type safety of TypeScript. It simplifies theme management and allows for efficient runtime application without modifying HTML. Explore the Mimcss documentation and playground for further details. Feedback is welcome!

The above is the detailed content of Defining and Applying UI Themes Using the Mimcss CSS-in-JS Library. For more information, please follow other related articles on the PHP Chinese website!