From b89d93fab5bfb816eb9797bd77f877d6c90246dd Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Mon, 14 Feb 2022 10:23:42 +0800 Subject: [PATCH] refactor: recommend using data-theme without html element selector (#6668) * refactor: recommend using data-theme without html element selector * simplify site CSS * refactor --- .../templates/classic/src/css/custom.css | 4 +- .../templates/facebook/src/css/custom.css | 2 +- .../src/theme/DocCard/styles.module.css | 2 +- .../src/theme/DocPage/styles.module.css | 6 +-- .../src/theme/DocSidebar/styles.module.css | 8 ++-- .../src/theme/ThemedImage/styles.module.css | 4 +- .../markdown-features-assets.mdx | 8 ++-- .../markdown-features-code-blocks.mdx | 2 +- website/docs/search.md | 4 +- website/docs/styling-layout.md | 4 +- .../BrowserWindow/styles.module.css | 4 +- .../src/components/ColorGenerator/index.tsx | 6 +-- website/src/css/custom.css | 42 ++++++++++--------- website/src/pages/index.tsx | 6 ++- .../ShowcaseCard/styles.module.css | 4 +- website/src/pages/styles.module.css | 6 +-- website/src/theme/Toggle.tsx | 2 +- website/src/utils/colorUtils.ts | 38 ++++++++++++----- 18 files changed, 88 insertions(+), 64 deletions(-) diff --git a/packages/create-docusaurus/templates/classic/src/css/custom.css b/packages/create-docusaurus/templates/classic/src/css/custom.css index 3247c4327c..311dc090d9 100644 --- a/packages/create-docusaurus/templates/classic/src/css/custom.css +++ b/packages/create-docusaurus/templates/classic/src/css/custom.css @@ -17,7 +17,7 @@ } /* For readability concerns, you should choose a lighter palette in dark mode. */ -html[data-theme='dark'] { +[data-theme='dark'] { --ifm-color-primary: #25c2a0; --ifm-color-primary-dark: #21af90; --ifm-color-primary-darker: #1fa588; @@ -34,6 +34,6 @@ html[data-theme='dark'] { padding: 0 var(--ifm-pre-padding); } -html[data-theme='dark'] .docusaurus-highlight-code-line { +[data-theme='dark'] .docusaurus-highlight-code-line { background-color: rgba(0, 0, 0, 0.3); } diff --git a/packages/create-docusaurus/templates/facebook/src/css/custom.css b/packages/create-docusaurus/templates/facebook/src/css/custom.css index c204c4bbea..29e5252369 100644 --- a/packages/create-docusaurus/templates/facebook/src/css/custom.css +++ b/packages/create-docusaurus/templates/facebook/src/css/custom.css @@ -26,7 +26,7 @@ } /* For readability concerns, you should choose a lighter palette in dark mode. */ -html[data-theme='dark'] { +[data-theme='dark'] { --ifm-color-primary: #25c2a0; --ifm-color-primary-dark: #21af90; --ifm-color-primary-darker: #1fa588; diff --git a/packages/docusaurus-theme-classic/src/theme/DocCard/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocCard/styles.module.css index 92145f2d68..bd098eb5fe 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocCard/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/DocCard/styles.module.css @@ -24,7 +24,7 @@ box-shadow: 0 4px 8px 0 rgb(0 0 0 / 20%); } -html[data-theme='dark'] .cardContainer.cardContainerLink:hover { +[data-theme='dark'] .cardContainer.cardContainerLink:hover { --ifm-card-background-color: #2d2d2d; /* original, non-hovered color is #242526 */ } diff --git a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css index 5d6f675ee8..120a537b10 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/DocPage/styles.module.css @@ -69,12 +69,12 @@ transform: rotate(0); } - html[dir='rtl'] .expandSidebarButtonIcon { + [dir='rtl'] .expandSidebarButtonIcon { transform: rotate(180deg); } - html[data-theme='dark'] .collapsedDocSidebar:hover, - html[data-theme='dark'] .collapsedDocSidebar:focus { + [data-theme='dark'] .collapsedDocSidebar:hover, + [data-theme='dark'] .collapsedDocSidebar:focus { background-color: var(--collapse-button-bg-color-dark); } diff --git a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css index f9a09be722..101dcd45d5 100644 --- a/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/DocSidebar/styles.module.css @@ -72,16 +72,16 @@ margin-top: 4px; } - html[dir='rtl'] .collapseSidebarButtonIcon { + [dir='rtl'] .collapseSidebarButtonIcon { transform: rotate(0); } - html[data-theme='dark'] .collapseSidebarButton { + [data-theme='dark'] .collapseSidebarButton { background-color: var(--collapse-button-bg-color-dark); } - html[data-theme='dark'] .collapseSidebarButton:hover, - html[data-theme='dark'] .collapseSidebarButton:focus { + [data-theme='dark'] .collapseSidebarButton:hover, + [data-theme='dark'] .collapseSidebarButton:focus { background-color: var(--ifm-color-emphasis-200); } } diff --git a/packages/docusaurus-theme-classic/src/theme/ThemedImage/styles.module.css b/packages/docusaurus-theme-classic/src/theme/ThemedImage/styles.module.css index 2f8648d5d9..876398ec39 100644 --- a/packages/docusaurus-theme-classic/src/theme/ThemedImage/styles.module.css +++ b/packages/docusaurus-theme-classic/src/theme/ThemedImage/styles.module.css @@ -9,10 +9,10 @@ display: none; } -html[data-theme='light'] .themedImage--light { +[data-theme='light'] .themedImage--light { display: initial; } -html[data-theme='dark'] .themedImage--dark { +[data-theme='dark'] .themedImage--dark { display: initial; } diff --git a/website/docs/guides/markdown-features/markdown-features-assets.mdx b/website/docs/guides/markdown-features/markdown-features-assets.mdx index 36c5e9b975..32194db329 100644 --- a/website/docs/guides/markdown-features/markdown-features-assets.mdx +++ b/website/docs/guides/markdown-features/markdown-features-assets.mdx @@ -120,11 +120,11 @@ import DocusaurusSvg from './docusaurus.svg'; ``` ```css -html[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] { +[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] { fill: greenyellow; } -html[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] { +[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] { fill: seagreen; } ``` @@ -173,8 +173,8 @@ GitHub uses its own [image theming approach](https://github.blog/changelog/2021- To toggle the visibility of an image using the path fragment (for GitHub, it's `#gh-dark-mode-only` and `#gh-light-mode-only`), add the following to your custom CSS (you can also use your own suffix if you don't want to be coupled to GitHub): ```css title="src/css/custom.css" -html[data-theme='light'] img[src$='#gh-dark-mode-only'], -html[data-theme='dark'] img[src$='#gh-light-mode-only'] { +[data-theme='light'] img[src$='#gh-dark-mode-only'], +[data-theme='dark'] img[src$='#gh-light-mode-only'] { display: none; } ``` diff --git a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx index 609f1a4d38..7934b6ebaa 100644 --- a/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx +++ b/website/docs/guides/markdown-features/markdown-features-code-blocks.mdx @@ -197,7 +197,7 @@ To accomplish this, Docusaurus adds the `docusaurus-highlight-code-line` class t } /* If you have a different syntax highlighting theme for dark mode. */ -html[data-theme='dark'] .docusaurus-highlight-code-line { +[data-theme='dark'] .docusaurus-highlight-code-line { /* Color which works with dark mode syntax highlighting theme */ background-color: rgb(100, 100, 100); } diff --git a/website/docs/search.md b/website/docs/search.md index f7632e8785..17d3bc45bd 100644 --- a/website/docs/search.md +++ b/website/docs/search.md @@ -191,7 +191,7 @@ By default, DocSearch comes with a fine-tuned theme that was designed for access Still, you can reuse the [Infima CSS variables](styling-layout.md#styling-your-site-with-infima) from Docusaurus to style DocSearch by editing the `/src/css/custom.css` file. ```css title="/src/css/custom.css" -html[data-theme='light'] .DocSearch { +[data-theme='light'] .DocSearch { /* --docsearch-primary-color: var(--ifm-color-primary); */ /* --docsearch-text-color: var(--ifm-font-color-base); */ --docsearch-muted-color: var(--ifm-color-secondary-darkest); @@ -209,7 +209,7 @@ html[data-theme='light'] .DocSearch { --docsearch-footer-background: var(--ifm-color-white); } -html[data-theme='dark'] .DocSearch { +[data-theme='dark'] .DocSearch { --docsearch-text-color: var(--ifm-font-color-base); --docsearch-muted-color: var(--ifm-color-secondary-darkest); --docsearch-container-background: rgba(47, 55, 69, 0.7); diff --git a/website/docs/styling-layout.md b/website/docs/styling-layout.md index 6b26045c79..9d1892e8f3 100644 --- a/website/docs/styling-layout.md +++ b/website/docs/styling-layout.md @@ -112,11 +112,11 @@ In light mode, the `` element has a `data-theme="light"` attribute; and in ```css /* Overriding root Infima variables */ -html[data-theme='dark'] { +[data-theme='dark'] { --ifm-color-primary: #4e89e8; } /* Styling one class specially in dark mode */ -html[data-theme='dark'] .purple-text { +[data-theme='dark'] .purple-text { color: plum; } ``` diff --git a/website/src/components/BrowserWindow/styles.module.css b/website/src/components/BrowserWindow/styles.module.css index ef32d1a197..2931c9c20f 100644 --- a/website/src/components/BrowserWindow/styles.module.css +++ b/website/src/components/BrowserWindow/styles.module.css @@ -35,7 +35,7 @@ width: 10%; } -html[data-theme='light'] { +[data-theme='light'] { --ifm-background-color: #fff; } @@ -50,7 +50,7 @@ html[data-theme='light'] { user-select: none; } -html[data-theme='dark'] .browserWindowAddressBar { +[data-theme='dark'] .browserWindowAddressBar { color: var(--ifm-color-gray-300); } diff --git a/website/src/components/ColorGenerator/index.tsx b/website/src/components/ColorGenerator/index.tsx index 2514b45f14..6143cbb128 100644 --- a/website/src/components/ColorGenerator/index.tsx +++ b/website/src/components/ColorGenerator/index.tsx @@ -66,9 +66,9 @@ function ColorGenerator(): JSX.Element { // State changes -> update DOM styles useEffect(() => { - updateDOMColors({baseColor, background, shades}); + updateDOMColors({baseColor, background, shades}, isDarkTheme); storage.set(JSON.stringify({baseColor, background, shades})); - }, [baseColor, background, shades, storage]); + }, [baseColor, background, shades, storage, isDarkTheme]); function updateColor(event: React.ChangeEvent) { // Only prepend # when there isn't one. @@ -287,7 +287,7 @@ function ColorGenerator(): JSX.Element {

- {`${isDarkTheme ? "html[data-theme='dark']" : ':root'} { + {`${isDarkTheme ? "[data-theme='dark']" : ':root'} { ${getAdjustedColors(shades, baseColor) .sort((a, b) => a.codeOrder - b.codeOrder) .map((value) => ` ${value.variableName}: ${value.hex.toLowerCase()};`) diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 67d7650839..b882c53fb2 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -12,7 +12,21 @@ */ --site-primary-hue-saturation: 167 68%; --site-primary-hue-saturation-light: 167 56%; /* do we really need this extra one? */ + --site-color-favorite-background: #f6fdfd; + --site-color-tooltip: #fff; + --site-color-tooltip-background: #353738; + --site-color-svg-icon-favorite: #e9669e; + --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%); + --site-color-feedback-background: #fff; +} +html[data-theme='dark'] { + --site-color-feedback-background: #f0f8ff; + --site-color-favorite-background: #1d1e1e; + --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 10%); +} + +[data-theme='light'] { --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 30%); --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 26%); --ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation) 23%); @@ -25,16 +39,9 @@ --ifm-color-primary-lightest: hsl( var(--site-primary-hue-saturation-light) 58% ); - - --ifm-color-feedback-background: #fff; - --site-color-favorite-background: #f6fdfd; - --site-color-tooltip: #fff; - --site-color-tooltip-background: #353738; - --site-color-svg-icon-favorite: #e9669e; - --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 25%); } -html[data-theme='dark'] { +[data-theme='dark'] { --ifm-color-primary: hsl(var(--site-primary-hue-saturation) 45%); --ifm-color-primary-dark: hsl(var(--site-primary-hue-saturation) 41%); --ifm-color-primary-darker: hsl(var(--site-primary-hue-saturation) 38%); @@ -47,9 +54,6 @@ html[data-theme='dark'] { --ifm-color-primary-lightest: hsl( var(--site-primary-hue-saturation-light) 73% ); - --site-color-feedback-background: #f0f8ff; - --site-color-favorite-background: #1d1e1e; - --site-color-checkbox-checked-bg: hsl(167deg 56% 73% / 10%); } .docusaurus-highlight-code-line { @@ -59,7 +63,7 @@ html[data-theme='dark'] { padding: 0 var(--ifm-pre-padding); } -html[data-theme='dark'] .docusaurus-highlight-code-line { +[data-theme='dark'] .docusaurus-highlight-code-line { background-color: rgb(66 66 66 / 30%); } @@ -76,7 +80,7 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { no-repeat; } -html[data-theme='dark'] .header-github-link::before { +[data-theme='dark'] .header-github-link::before { background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E") no-repeat; } @@ -97,15 +101,15 @@ html[data-theme='dark'] .header-github-link::before { background-color: var(--ifm-tabs-color-active); } -html[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] { +[data-theme='light'] .themedDocusaurus [fill='#FFFF50'] { fill: greenyellow; } -html[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] { +[data-theme='dark'] .themedDocusaurus [fill='#FFFF50'] { fill: seagreen; } -html[data-theme='light'] .DocSearch { +[data-theme='light'] .DocSearch { /* --docsearch-primary-color: var(--ifm-color-primary); */ /* --docsearch-text-color: var(--ifm-font-color-base); */ --docsearch-muted-color: var(--ifm-color-emphasis-700); @@ -123,7 +127,7 @@ html[data-theme='light'] .DocSearch { --docsearch-footer-background: var(--ifm-color-white); } -html[data-theme='dark'] .DocSearch { +[data-theme='dark'] .DocSearch { --docsearch-text-color: var(--ifm-font-color-base); --docsearch-muted-color: var(--ifm-color-secondary-darkest); --docsearch-container-background: rgb(47 55 69 / 70%); @@ -179,8 +183,8 @@ div[class^='announcementBar_'] { white-space: nowrap; } -html[data-theme='light'] img[src$='#gh-dark-mode-only'], -html[data-theme='dark'] img[src$='#gh-light-mode-only'] { +[data-theme='light'] img[src$='#gh-dark-mode-only'], +[data-theme='dark'] img[src$='#gh-light-mode-only'] { display: none; } diff --git a/website/src/pages/index.tsx b/website/src/pages/index.tsx index 624b57df7b..18c4f377a9 100644 --- a/website/src/pages/index.tsx +++ b/website/src/pages/index.tsx @@ -142,7 +142,7 @@ function Home(): JSX.Element { return (
-
+

-
+
); diff --git a/website/src/utils/colorUtils.ts b/website/src/utils/colorUtils.ts index ecb2aff34b..431b233960 100644 --- a/website/src/utils/colorUtils.ts +++ b/website/src/utils/colorUtils.ts @@ -95,14 +95,32 @@ export function getAdjustedColors(shades: Shades, baseColor: string) { })); } -export function updateDOMColors({ - shades, - baseColor, - background, -}: ColorState): void { - const root = document.documentElement; - getAdjustedColors(shades, baseColor).forEach((value) => { - root.style.setProperty(value.variableName, value.hex); - }); - root.style.setProperty('--ifm-background-color', background); +export function updateDOMColors( + {shades, baseColor, background}: ColorState, + isDarkTheme: boolean, +): void { + const styleSheet = Array.from(document.styleSheets).find((item) => + item.href?.match(/styles(?:\.[0-9a-f]+)?\.css/), + )!; + const rules = Array.from(styleSheet.cssRules) as CSSStyleRule[]; + // The rule that looks the most like definition for custom theme colors + const ruleToDelete = rules.findIndex( + (rule) => + rule.selectorText === + (isDarkTheme ? '[data-theme="dark"]' : '[data-theme="light"]') && + Array.from(rule.style).includes('--ifm-color-primary') && + rule.style.length < 10, + ); + if (ruleToDelete >= 0) { + styleSheet.deleteRule(ruleToDelete); + } + const overrideStyle = `${ + isDarkTheme ? '[data-theme="dark"]' : '[data-theme="light"]' + } { + ${getAdjustedColors(shades, baseColor) + .map((value) => ` ${value.variableName}: ${value.hex};`) + .join('\n')} + --ifm-background-color: ${background}; +}`; + styleSheet.insertRule(overrideStyle, styleSheet.cssRules.length - 1); }