Skip to content

refactor(theme-classic): replace color mode toggle with button; remove switchConfig#6771

Merged
slorber merged 7 commits intomainfrom
jc/button-color-mode
Mar 2, 2022
Merged

refactor(theme-classic): replace color mode toggle with button; remove switchConfig#6771
slorber merged 7 commits intomainfrom
jc/button-color-mode

Conversation

@Josh-Cena
Copy link
Copy Markdown
Collaborator

@Josh-Cena Josh-Cena commented Feb 26, 2022

Breaking change

  • Toggle component is renamed to ColorModeToggle. Please update your swizzled components.
  • colorMode.switchConfig is deprecated. If you want to customize the icons for light and dark mode, swizzle IconLightMode, IconDarkMode, or ColorModeToggle instead.

Motivation

Part of #6717

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Before

image

image

After

image

image

@Josh-Cena Josh-Cena added pr: breaking change Existing sites may not build successfully in the new version. Description contains more details. pr: polish This PR adds a very minor behavior improvement that users will enjoy. labels Feb 26, 2022
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Feb 26, 2022
@netlify
Copy link
Copy Markdown

netlify bot commented Feb 26, 2022

✔️ [V2]

🔨 Explore the source changes: 2722084

🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/6219e3933270f90008336b70

😎 Browse the preview: https://deploy-preview-6771--docusaurus-2.netlify.app

@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 26, 2022

⚡️ Lighthouse report for the changes in this PR:

Category Score
🔴 Performance 39
🟢 Accessibility 100
🟢 Best practices 92
🟢 SEO 100
🟢 PWA 90

Lighthouse ran on https://deploy-preview-6771--docusaurus-2.netlify.app/

const [checked, setChecked] = useState(defaultChecked);
const [focused, setFocused] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
function Toggle({
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Review with hide white space

@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 26, 2022

Size Change: +268 B (0%)

Total Size: 789 kB

Filename Size Change
website/build/assets/css/styles.********.css 105 kB -766 B (-1%)
website/build/assets/js/main.********.js 596 kB +355 B (0%)
website/build/index.html 38.3 kB +679 B (+2%)
ℹ️ View Unchanged
Filename Size
website/.docusaurus/globalData.json 49.7 kB

compressed-size-action

@netlify

This comment was marked as duplicate.

@slorber
Copy link
Copy Markdown
Collaborator

slorber commented Mar 1, 2022

That looks nice

Was wondering what's your opinion on having some kind of SVG interpolation morphing one svg to another?

https://web.dev/building-a-theme-switch-component/

Also like this one: https://www.joshwcomeau.com/

@Josh-Cena
Copy link
Copy Markdown
Collaborator Author

Josh-Cena commented Mar 2, 2022

Seems cool. Would be a useful extension. Not sure how much that would hinder the user from swapping out icons though.

Copy link
Copy Markdown
Collaborator

@slorber slorber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

As this is a breaking change, I'm going to also rename this one to ColorModeToggle


import type {SwizzleConfig} from '@docusaurus/types';

/* eslint sort-keys: "error" */
Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

CLA Signed Signed Facebook CLA pr: breaking change Existing sites may not build successfully in the new version. Description contains more details. pr: polish This PR adds a very minor behavior improvement that users will enjoy.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants