css-theming

CSS Theming

A platform for CSS theming.

Uses modern CSS and SCSS. Contrast of computed colors is at least AA compatible by default.

from https://niai.mrahhal.net

At a glance

• Themes and theme category management
• Auto detects user's system preference and activates the appropriate theme
• Colors and their swatches automatically computed for light/dark themes
• Auto computation of rgb variables for colors (provided as css variables for ease of use)
• Foregrounds, backgrounds, borders
• Support for icons/svgs
• Programmatic access

Installation & Setup

Check this document.

Course

Please consider buying the course at educative.io here: https://www.educative.io/courses/css-theming-for-professionals

It contains a deep dive into the problems involved with creating themes and their solutions, and is the backbone behind css-theming.

Development

DEVELOPMENT.md

Samples

The samples folder contain several samples that show case some of the use cases. They're written in Vue so that we can focus on the theming aspects.

To run any sample app, run the following inside its folder:

npm i
npm start

In any sample app, hit "T" on the keyboard to flip between the 2 main themes and see instant changes.

Projects using css-theming

• https://niai.mrahhal.net
• https://lapisapp.com
• https://github.com/maezzedine/Outlook
• https://github.com/mrahhal/mr-scroll

Thanks

• @rubix-labs: I worked on most of this as part of my job here.
• @sayache: Graphic, UX and UI designer.

Changelog

2.0.0 - 2021-11-23

Fixed

• Pick up text-color theme prop if it exists before trying to set default (#27 by @mrahhal)

Added

• Set css color-scheme based on current theme brightness (#20 by @mrahhal)
• Allow configuring color text lightness scaling and update default scaling in dark themes (#25 by @mrahhal)
• Add use-colors theme config (#32 by @mrahhal)

Changed

• Flip swatches in dark themes to make them go lighter with elevation (#23 by @mrahhal)
• Change default category's applied at to be the root element (html) (#24 by @mrahhal)
• Remove $fg-target-[light|dark] and auto compute them if not overriden in theme (#30 by @mrahhal)
• Rename functions/mixins to a more consistent naming (#31 by @mrahhal)
• Remove and update some default colors (#33 by @mrahhal)
• Change default bg-input vars (#34 by @mrahhal)
• Update default text-color (#36 by @mrahhal)

Removed

• Remove deprecated --text-color-raw (#21 by @mrahhal)

Full diff