Skip to content

Commit

Permalink
refactor(v2): split out dark mode toggle so it is easily swizzle-able (
Browse files Browse the repository at this point in the history
  • Loading branch information
endiliey authored Nov 22, 2019
1 parent d2a095b commit 4fab29f
Show file tree
Hide file tree
Showing 4 changed files with 187 additions and 166 deletions.
14 changes: 1 addition & 13 deletions packages/docusaurus-theme-classic/src/theme/Navbar/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -133,10 +129,6 @@ function Navbar() {
aria-label="Dark mode toggle"
checked={theme === 'dark'}
onChange={onToggleChange}
icons={{
checked: <Moon />,
unchecked: <Sun />,
}}
/>
)}
<SearchBar
Expand Down Expand Up @@ -165,10 +157,6 @@ function Navbar() {
aria-label="Dark mode toggle in sidebar"
checked={theme === 'dark'}
onChange={onToggleChange}
icons={{
checked: <Moon />,
unchecked: <Sun />,
}}
/>
)}
</div>
Expand Down
153 changes: 0 additions & 153 deletions packages/docusaurus-theme-classic/src/theme/Navbar/styles.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 27 additions & 0 deletions packages/docusaurus-theme-classic/src/theme/Toggle/index.js
Original file line number Diff line number Diff line change
@@ -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}
/>
);
}
159 changes: 159 additions & 0 deletions packages/docusaurus-theme-classic/src/theme/Toggle/styles.module.css
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 4fab29f

Please sign in to comment.