Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

feat(theme): create more generic ThemedComponent util from ThemedImage #8890

Merged
merged 1 commit into from
Apr 13, 2023

Conversation

slorber
Copy link
Collaborator

@slorber slorber commented Apr 13, 2023

Motivation

See #8001 (reply in thread)

We want to make it easier to build themed components, when using CSS is not a great fit.

For example when rendering React SVGs (.svg extensions are converted to React components through SVGR).

We should be able to do this:

import React from 'react';
import {ThemedComponent} from '@docusaurus/theme-common';

import LogoLight from "./assets/logo_light.svg";
import LogoDark from "./assets/logo_dark.svg";

function MyThemedLogo(): JSX.Element {
  return (
    <ThemedComponent className="my-logo">
      {({theme, className}) => {
        const LogoComponent = theme === "dark" ? LogoDark : LogoLight;
        return <LogoComponent className={className}/>
      })}
    </ThemedComponent>
  );
}

Note it's a new feature in theme-common but undocumented for now.

Test Plan

preview should not have any visual change from prod

Test links

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Apr 13, 2023
@slorber slorber added the pr: new feature This PR adds a new API or behavior. label Apr 13, 2023
@netlify
Copy link

netlify bot commented Apr 13, 2023

[V2]

Name Link
🔨 Latest commit f105f71
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/64380d1f5d84f70008edb9d4
😎 Deploy Preview https://deploy-preview-8890--docusaurus-2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@github-actions
Copy link

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟠 72 🟢 97 🟢 92 🟢 100 🟢 90 Report
/docs/installation 🟠 79 🟢 100 🟢 92 🟢 100 🟢 90 Report

@slorber
Copy link
Collaborator Author

slorber commented Apr 13, 2023

LGTM, prod/preview look the same on first load / switch in 2 themes

@slorber slorber merged commit f76fc1b into main Apr 13, 2023
@slorber slorber deleted the slorber/themed-component branch April 13, 2023 14:29
@github-actions
Copy link

Size Change: +257 B (0%)

Total Size: 1.01 MB

Filename Size Change
website/build/assets/js/main.********.js 752 kB +213 B (0%)
website/build/index.html 41.2 kB +32 B (0%)
ℹ️ View Unchanged
Filename Size Change
website/.docusaurus/globalData.json 101 kB 0 B
website/build/assets/css/styles.********.css 113 kB +12 B (0%)

compressed-size-action

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
CLA Signed Signed Facebook CLA pr: new feature This PR adds a new API or behavior.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants