Major changes: Add System Theme Mode, Color Preferences, Accessibility and more!

[mobeigi]

Intro

Thanks for the great component @JoseRFelix ! I've been using it on all my projects and I really like the design and animations of this toggle. In particular, the fact its a single icon with no background clutter.

I have been making various edits to the component for my own needs and decided to contribute the changes back to the community. I am happy to take in feedback and make further changes to address any concerns.

Overview

This PR is huge and lots of changes have been made in one go.

• Bump package version to 2.0.0 (due to lots of breaking changes that are not backwards compatible)
• Update all dependencies to latest (notably React 18, Node 20, react-spring 9.7.4) (partially addresses Deprecated packages #45)
• Add support for System Theme Mode (fixes Support System or Automatic theme design #47 ).
• Improve color customisation capabilities. (fixes There is an issue with the circle mask it appears on dark mode #40)
• Add color blending into spring animations.
• Improve styling in general (remove excess margin).
• Change default style to be more visually appealing.
• Revamp examples page to showcase examples with light and dark background.
• Remove janky overshoot in animation when going from moon to sun.
• Make component accessible by using button (fixes Not accessible by default #23 , Should be accessible via keyboard #32 ).
• Add ability to programmatically trigger clicks via ref
• Refactor code structure to use best practice (more files etc).
• Add stronger typing support and types.
• Add extra unit test for each theme mode
• Github CI/CD workflow updates to use latest node & action versions
• Update demo.gif
• Update README

Demo (Examples)

chrome_t7rjBv21yd.mp4

Changes

System ThemeMode

There is a new third state in the 'toggle' for the System (or Auto) mode!

The design chosen was a half sun and half moon. This design was choses as it looks good and is easily understood. It can also animate well with the other existing sun and moon designs.

Color customisation

One common issue with the component was it was hard to customise the colors easily beyond the now removed sunColor and moonColor.

We now have the following optional colors props:

  halfSunLeftFill: string;
  halfSunLeftStroke: string;
  halfSunLeftBeamStroke: string;
  halfMoonRightFill: string;
  halfMoonRightStroke: string;
  halfMoonRightBeamStroke: string;
  sunFill: string;
  sunStroke: string;
  sunBeamStroke: string;
  moonFill: string;
  moonStroke: string;

This allows you to style each different theme mode however you like.
You can provide partial overrides or specify each color option.
If this prop is not provided, the default styling will be used.

API changes

There are breaking changes in the API that are not-backwards compatible.

export interface Props extends SVGProps {
  onChange: (themeMode: ThemeMode) => void;
  isSystemThemeModeEnabled?: boolean;
  themeMode: ThemeMode;
  style?: React.CSSProperties;
  size?: number | string;
  colors?: Partial<ColorOptions>;
  animationProperties?: AnimationProperties;
}

Changes include:

• onChange now provides a ThemeMode and not a boolean
• isSystemThemeModeEnabled is new prop that can control if the system theme mode is being used or not (defaults to true)
• themeMode is now the prop to bind (replaces checked)
• colors provides more configuration

isSystemThemeModeEnabled

This prop is new prop that can control if the system theme mode is being used or not (defaults to true).
If this is set to false, it results in the classic 2-state dark/light mode toggle with same animations as before (except with the janky overshoot removed).

Theme switch direction

The theme switch direction is:
System -> Dark -> Light

I found this cycle path to look the best animation wise.

The choice was made NOT to allow this to be configurable because the animations depend on the ordering. Maybe this can be changed in future PR if there is a need for it.

Single Color Mode

If using single color scheme (i.e. black), the system design and light mode design are identical and not distinguishable.
My recommendation is to not support this (and encourage using fills and/or strokes to try and distinguish the system theme mode). This is solved if you instead use 2 colors (black/white).

Issues

High prio

• N/A

Low prio

• If using single color scheme (i.e. black), the system design and light mode design are identical and not distinguishable.
• Using yarn start in examples does not watch for changes in main package. Requires restart to detect changes.

Manual tests

Test on all browsers

• Chrome: ✅
• Firefox: ✅
• Edge: ✅
• IE11: ℹ️
• Safari: ℹ️
• Android: ℹ️
• iPhone: ℹ️

Pre-merge TODOs

• Get review and feedback
• Manually test on all supported browsers
• Netlify builds seem to be failing?

[mobeigi]

@JoseRFelix Hey mate, any chance of this getting merged? I know its a lot of changes. Thanks!

[mobeigi]

I've been using this on my personal website (mobeigi.com) for some time now and it works very well.

I'm not sure if the original author of this repo (@JoseRFelix) has any plans on merging this PR or maintaining it. I may otherwise fork it with these changes so I can pull in the library myself from a centralised package manager (because to date I've been using it as a local packed file which is not ideal).

[thomasters-nbl]

@JoseRFelix Can we please get this merged?