Skip to content
New issue

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

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

Already on GitHub? Sign in 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

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: 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