mirror of
https://github.com/facebook/docusaurus.git
synced 2025-08-06 10:20:09 +02:00
refactor(v2): split out dark mode toggle so it is easily swizzle-able (#2013)
This commit is contained in:
Endi
GitHub
parent
d2a095bec0
commit
4fab29fb21
4 changed files with 187 additions and 166 deletions
|
|
@ -6,14 +6,13 @@
|
|||
*/
|
||||
|
||||
import React, {useCallback, useState} from 'react';
|
||||
import Toggle from 'react-toggle';
|
||||
|
||||
import Link from '@docusaurus/Link';
|
||||
import Head from '@docusaurus/Head';
|
||||
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
|
||||
import useBaseUrl from '@docusaurus/useBaseUrl';
|
||||
|
||||
import SearchBar from '@theme/SearchBar';
|
||||
import Toggle from '@theme/Toggle';
|
||||
|
||||
import classnames from 'classnames';
|
||||
|
||||
|
|
@ -42,9 +41,6 @@ function NavLink({to, href, label, position, ...props}) {
|
|||
);
|
||||
}
|
||||
|
||||
const Moon = () => <span className={classnames(styles.toggle, styles.moon)} />;
|
||||
const Sun = () => <span className={classnames(styles.toggle, styles.sun)} />;
|
||||
|
||||
function Navbar() {
|
||||
const context = useDocusaurusContext();
|
||||
const [sidebarShown, setSidebarShown] = useState(false);
|
||||
|
|
@ -133,10 +129,6 @@ function Navbar() {
|
|||
aria-label="Dark mode toggle"
|
||||
checked={theme === 'dark'}
|
||||
onChange={onToggleChange}
|
||||
icons={{
|
||||
checked: <Moon />,
|
||||
unchecked: <Sun />,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
<SearchBar
|
||||
|
|
@ -165,10 +157,6 @@ function Navbar() {
|
|||
aria-label="Dark mode toggle in sidebar"
|
||||
checked={theme === 'dark'}
|
||||
onChange={onToggleChange}
|
||||
icons={{
|
||||
checked: <Moon />,
|
||||
unchecked: <Sun />,
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,161 +11,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.toggle {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 10px;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 10px;
|
||||
}
|
||||
.toggle::before {
|
||||
position: absolute;
|
||||
}
|
||||
.moon::before {
|
||||
content: '\1F31C';
|
||||
}
|
||||
.sun::before {
|
||||
content: '\1F31E';
|
||||
}
|
||||
|
||||
@media (max-width: 360px) {
|
||||
.hideLogoText {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* styles for React Toggle
|
||||
* copied over because we want to allow user to swizzle it and modify the css
|
||||
* https://github.com/aaronshaf/react-toggle/blob/master/style.css
|
||||
*/
|
||||
:global(.react-toggle) {
|
||||
touch-action: pan-x;
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
:global(.react-toggle-screenreader-only) {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
:global(.react-toggle--disabled) {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
-webkit-transition: opacity 0.25s;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
:global(.react-toggle-track) {
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border-radius: 30px;
|
||||
background-color: #4d4d4d;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
:global(.react-toggle-track-check) {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
left: 8px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
:global(.react-toggle--checked .react-toggle-track-check) {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
:global(.react-toggle-track-x) {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
right: 10px;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
:global(.react-toggle--checked .react-toggle-track-x) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:global(.react-toggle-thumb) {
|
||||
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #4d4d4d;
|
||||
border-radius: 50%;
|
||||
background-color: #fafafa;
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
:global(.react-toggle--checked .react-toggle-thumb) {
|
||||
left: 27px;
|
||||
border-color: #19ab27;
|
||||
}
|
||||
|
||||
:global(.react-toggle--focus .react-toggle-thumb) {
|
||||
-webkit-box-shadow: 0px 0px 3px 2px #0099e0;
|
||||
-moz-box-shadow: 0px 0px 3px 2px #0099e0;
|
||||
box-shadow: 0px 0px 2px 3px #0099e0;
|
||||
}
|
||||
|
||||
:global(.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb) {
|
||||
-webkit-box-shadow: 0px 0px 5px 5px #0099e0;
|
||||
-moz-box-shadow: 0px 0px 5px 5px #0099e0;
|
||||
box-shadow: 0px 0px 5px 5px #0099e0;
|
||||
}
|
||||
|
|
|
|||
27
packages/docusaurus-theme-classic/src/theme/Toggle/index.js
Normal file
27
packages/docusaurus-theme-classic/src/theme/Toggle/index.js
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import Toggle from 'react-toggle';
|
||||
|
||||
import classnames from 'classnames';
|
||||
import styles from './styles.module.css';
|
||||
|
||||
const Moon = () => <span className={classnames(styles.toggle, styles.moon)} />;
|
||||
const Sun = () => <span className={classnames(styles.toggle, styles.sun)} />;
|
||||
|
||||
export default function(props) {
|
||||
return (
|
||||
<Toggle
|
||||
icons={{
|
||||
checked: <Moon />,
|
||||
unchecked: <Sun />,
|
||||
}}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
@ -0,0 +1,159 @@
|
|||
/**
|
||||
* Copyright (c) 2017-present, Facebook, Inc.
|
||||
*
|
||||
* This source code is licensed under the MIT license found in the
|
||||
* LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
|
||||
.toggle {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 10px;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
width: 10px;
|
||||
}
|
||||
.toggle::before {
|
||||
position: absolute;
|
||||
}
|
||||
.moon::before {
|
||||
content: '\1F31C';
|
||||
}
|
||||
.sun::before {
|
||||
content: '\1F31E';
|
||||
}
|
||||
|
||||
/**
|
||||
* styles for React Toggle
|
||||
* copied over because we want to allow user to swizzle it and modify the css
|
||||
* https://github.com/aaronshaf/react-toggle/blob/master/style.css
|
||||
*/
|
||||
:global(.react-toggle) {
|
||||
touch-action: pan-x;
|
||||
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
padding: 0;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
:global(.react-toggle-screenreader-only) {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
:global(.react-toggle--disabled) {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
-webkit-transition: opacity 0.25s;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
:global(.react-toggle-track) {
|
||||
width: 50px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
border-radius: 30px;
|
||||
background-color: #4d4d4d;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
:global(.react-toggle-track-check) {
|
||||
position: absolute;
|
||||
width: 14px;
|
||||
height: 10px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
left: 8px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
:global(.react-toggle--checked .react-toggle-track-check) {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
:global(.react-toggle-track-x) {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
top: 0px;
|
||||
bottom: 0px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
line-height: 0;
|
||||
right: 10px;
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
}
|
||||
|
||||
:global(.react-toggle--checked .react-toggle-track-x) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
:global(.react-toggle-thumb) {
|
||||
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 1px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border: 1px solid #4d4d4d;
|
||||
border-radius: 50%;
|
||||
background-color: #fafafa;
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
transition: all 0.25s ease;
|
||||
}
|
||||
|
||||
:global(.react-toggle--checked .react-toggle-thumb) {
|
||||
left: 27px;
|
||||
border-color: #19ab27;
|
||||
}
|
||||
|
||||
:global(.react-toggle--focus .react-toggle-thumb) {
|
||||
-webkit-box-shadow: 0px 0px 3px 2px #0099e0;
|
||||
-moz-box-shadow: 0px 0px 3px 2px #0099e0;
|
||||
box-shadow: 0px 0px 2px 3px #0099e0;
|
||||
}
|
||||
|
||||
:global(.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb) {
|
||||
-webkit-box-shadow: 0px 0px 5px 5px #0099e0;
|
||||
-moz-box-shadow: 0px 0px 5px 5px #0099e0;
|
||||
box-shadow: 0px 0px 5px 5px #0099e0;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue