3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-02 16:29:47 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor: recommend using data-theme without html element selector (#6668)

Browse source 
* refactor: recommend using data-theme without html element selector

* simplify site CSS

* refactor
This commit is contained in:
Joshua Chen 2022-02-14 10:23:42 +08:00 • committed by GitHub
parent 4b7bea950f
commit b89d93fab5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 88 additions and 64 deletions
Download patch file Download diff file Expand all files Collapse all files

8
website/docs/guides/markdown-features/markdown-features-assets.mdx
View file

@ -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;
}
```

2
website/docs/guides/markdown-features/markdown-features-code-blocks.mdx
View file

@ -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);
}