From 64155db81ed8dbb96c08211a8746964707626e3a Mon Sep 17 00:00:00 2001 From: secretariatV Date: Tue, 2 Jul 2024 18:55:35 +0900 Subject: [PATCH] create: doc dark mode --- components/DocsLayout.tsx | 2 +- components/Nav/Navbar.tsx | 2 + components/Nav/Toggle.tsx | 136 ++++++ components/Nav/index.tsx | 2 +- pages/_app.tsx | 16 + .../NavBar/__snapshots__/Navbar.spec.tsx.snap | 137 +++++- .../NavBar/__snapshots__/index.spec.tsx.snap | 421 +++++++++++------ .../__snapshots__/DocsLayout.spec.tsx.snap | 438 ++++++++++++------ 8 files changed, 839 insertions(+), 315 deletions(-) create mode 100644 components/Nav/Toggle.tsx diff --git a/components/DocsLayout.tsx b/components/DocsLayout.tsx index 271bc659..ac331118 100644 --- a/components/DocsLayout.tsx +++ b/components/DocsLayout.tsx @@ -61,7 +61,7 @@ export default function DocsLayout({ }, [router.asPath]); return ( - + {feedLink && } diff --git a/components/Nav/Navbar.tsx b/components/Nav/Navbar.tsx index d16bd6df..06ba571d 100644 --- a/components/Nav/Navbar.tsx +++ b/components/Nav/Navbar.tsx @@ -12,6 +12,7 @@ import MobileNavbar from './MobileNavbar'; import NavLinks from './NavLinks'; import SearchWithAlgolia from './SearchWithAlgolia'; import Social from './Social'; +import { ToggleButton } from './Toggle'; export interface NavbarProps { onSideToggle?: () => void; @@ -57,6 +58,7 @@ export default function Navbar({ `)} `} > + diff --git a/components/Nav/Toggle.tsx b/components/Nav/Toggle.tsx new file mode 100644 index 00000000..cb882f2e --- /dev/null +++ b/components/Nav/Toggle.tsx @@ -0,0 +1,136 @@ +import styled, { keyframes } from 'styled-components'; + +const Span = styled.span` + width: 5px; + height: 3px; + border-radius: 3px; + position: relative; + background-color: #fff; + left: 37px; + top: 12px; + transition: all 150ms ease-in; + + &::before, + &::after { + content: ''; + position: absolute; + width: 15px; + height: 3px; + border-radius: 3px; + background-color: #fff; + transition: all 150ms ease-in; + } + + &::before { + top: -5px; + left: -5px; + } + + &::after { + top: 5px; + left: -2px; + } +`; + +const Switch = keyframes` +0% { + left: 2px; +} +60% { + left: 2px; + width: 30px; +} +100% { + left: 36px; + width: 18px; +} +`; + +const Input = styled.input` + display: none; + + &:checked + label { + background-color: #6b7abb; + border-color: #5d6baa; + + & > span { + left: 15px; + width: 3px; + + &::before { + width: 3px; + height: 3px; + top: -5px; + } + + &::after { + width: 3px; + height: 3px; + left: -8px; + top: 7px; + } + } + + &::before { + background-color: #fff; + border-color: #e8e8e8; + animation: ${Switch} 350ms forwards; + } + + &::after { + transition-delay: 350ms; + opacity: 1; + } + } +`; + +const Reverset = keyframes` +0% { + left: 32px; + width: 18px; +} +60% { + left: 2px; + width: 30px; +} +100% { + left: 2px; +} +`; + +const Label = styled.label` + width: 60px; + height: 30px; + background-color: #96dcee; + border-radius: 100px; + border: 2px solid #72cce3; + display: flex; + position: relative; + transition: all 350ms ease-in; + cursor: pointer; + + &::before { + animation: ${Reverset} 350ms forwards; + transition: all 350ms ease-in; + content: ''; + width: 18px; + height: 18px; + border: 2px solid #f5eb71; + top: 4px; + left: 0px; + position: absolute; + border-radius: 82px; + background-color: #fffaa8; + } +`; + +export const ToggleButton = () => { + return ( + + + + + ); +}; diff --git a/components/Nav/index.tsx b/components/Nav/index.tsx index d5ceb020..8776c14a 100644 --- a/components/Nav/index.tsx +++ b/components/Nav/index.tsx @@ -28,7 +28,7 @@ const Nav = (props: NavProps) => { /> {showSideNav !== false && ( - + {useDocsSidebarMenu !== false ? : } )} diff --git a/pages/_app.tsx b/pages/_app.tsx index b14dc5a3..1e179393 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -51,6 +51,22 @@ const ResetStyles = createGlobalStyle` -webkit-font-smoothing: subpixel-antialiased; } + body:has(input#toggle:checked) { + color: rgb(245, 245, 245); + } + + body:has(input#toggle:checked) h1 { + color: rgb(245, 245, 245); + } + + body:has(input#toggle:checked) #panel { + background-color: #222; + } + + body:has(input#toggle:checked) #navbar { + background-color: #444; + } + body.sticky { overflow: hidden; } diff --git a/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap b/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap index 329e8506..b3865113 100644 --- a/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap +++ b/test/components/NavBar/__snapshots__/Navbar.spec.tsx.snap @@ -124,13 +124,13 @@ exports[`Navbar renders correctly 1`] = ` height: 2rem; } -.c17 { +.c20 { display: flex; align-items: center; flex: 1 1 auto; } -.c18 { +.c21 { display: flex; margin-right: 1.1111111111111112rem; line-height: 3.3333333333333335rem; @@ -138,29 +138,125 @@ exports[`Navbar renders correctly 1`] = ` cursor: pointer; } -.c18:last-child { +.c21:last-child { margin-right: 0; } -.c18:hover, -.c18:focus { +.c21:hover, +.c21:focus { opacity: 0.8; } -.c18:active { +.c21:active { transform: scale(0.95); opacity: 0.6; } -.c18 svg path { +.c21 svg path { fill: currentColor; } -.c19.c19 { +.c22.c22 { width: NaNrem; height: 1rem; } +.c19 { + width: 5px; + height: 3px; + border-radius: 3px; + position: relative; + background-color: #fff; + left: 37px; + top: 12px; + transition: all 150ms ease-in; +} + +.c19::before, +.c19::after { + content: ''; + position: absolute; + width: 15px; + height: 3px; + border-radius: 3px; + background-color: #fff; + transition: all 150ms ease-in; +} + +.c19::before { + top: -5px; + left: -5px; +} + +.c19::after { + top: 5px; + left: -2px; +} + +.c17 { + display: none; +} + +.c17:checked+label { + background-color: #6b7abb; + border-color: #5d6baa; +} + +.c17:checked+label>span { + left: 15px; + width: 3px; +} + +.c17:checked+label>span::before { + width: 3px; + height: 3px; + top: -5px; +} + +.c17:checked+label>span::after { + width: 3px; + height: 3px; + left: -8px; + top: 7px; +} + +.c17:checked+label::before { + background-color: #fff; + border-color: #e8e8e8; + animation: eVutBq 350ms forwards; +} + +.c17:checked+label::after { + transition-delay: 350ms; + opacity: 1; +} + +.c18 { + width: 60px; + height: 30px; + background-color: #96dcee; + border-radius: 100px; + border: 2px solid #72cce3; + display: flex; + position: relative; + transition: all 350ms ease-in; + cursor: pointer; +} + +.c18::before { + animation: jnkQbK 350ms forwards; + transition: all 350ms ease-in; + content: ''; + width: 18px; + height: 18px; + border: 2px solid #f5eb71; + top: 4px; + left: 0px; + position: absolute; + border-radius: 82px; + background-color: #fffaa8; +} + .c0 { align-items: center; background-color: rgba(12, 13, 15, 0.7); @@ -396,11 +492,26 @@ exports[`Navbar renders correctly 1`] = ` ] } > + + + +
diff --git a/test/components/NavBar/__snapshots__/index.spec.tsx.snap b/test/components/NavBar/__snapshots__/index.spec.tsx.snap index 1532a3ca..38a0c78e 100644 --- a/test/components/NavBar/__snapshots__/index.spec.tsx.snap +++ b/test/components/NavBar/__snapshots__/index.spec.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Nav renders correctly 1`] = ` -.c24 { +.c27 { display: inline-block; color: inherit; cursor: pointer; @@ -132,13 +132,13 @@ exports[`Nav renders correctly 1`] = ` height: 2rem; } -.c17 { +.c20 { display: flex; align-items: center; flex: 1 1 auto; } -.c18 { +.c21 { display: flex; margin-right: 1.1111111111111112rem; line-height: 3.3333333333333335rem; @@ -146,29 +146,125 @@ exports[`Nav renders correctly 1`] = ` cursor: pointer; } -.c18:last-child { +.c21:last-child { margin-right: 0; } -.c18:hover, -.c18:focus { +.c21:hover, +.c21:focus { opacity: 0.8; } -.c18:active { +.c21:active { transform: scale(0.95); opacity: 0.6; } -.c18 svg path { +.c21 svg path { fill: currentColor; } -.c19.c19 { +.c22.c22 { width: NaNrem; height: 1rem; } +.c19 { + width: 5px; + height: 3px; + border-radius: 3px; + position: relative; + background-color: #fff; + left: 37px; + top: 12px; + transition: all 150ms ease-in; +} + +.c19::before, +.c19::after { + content: ''; + position: absolute; + width: 15px; + height: 3px; + border-radius: 3px; + background-color: #fff; + transition: all 150ms ease-in; +} + +.c19::before { + top: -5px; + left: -5px; +} + +.c19::after { + top: 5px; + left: -2px; +} + +.c17 { + display: none; +} + +.c17:checked+label { + background-color: #6b7abb; + border-color: #5d6baa; +} + +.c17:checked+label>span { + left: 15px; + width: 3px; +} + +.c17:checked+label>span::before { + width: 3px; + height: 3px; + top: -5px; +} + +.c17:checked+label>span::after { + width: 3px; + height: 3px; + left: -8px; + top: 7px; +} + +.c17:checked+label::before { + background-color: #fff; + border-color: #e8e8e8; + animation: eVutBq 350ms forwards; +} + +.c17:checked+label::after { + transition-delay: 350ms; + opacity: 1; +} + +.c18 { + width: 60px; + height: 30px; + background-color: #96dcee; + border-radius: 100px; + border: 2px solid #72cce3; + display: flex; + position: relative; + transition: all 350ms ease-in; + cursor: pointer; +} + +.c18::before { + animation: jnkQbK 350ms forwards; + transition: all 350ms ease-in; + content: ''; + width: 18px; + height: 18px; + border: 2px solid #f5eb71; + top: 4px; + left: 0px; + position: absolute; + border-radius: 82px; + background-color: #fffaa8; +} + .c0 { align-items: center; background-color: rgba(12, 13, 15, 0.7); @@ -216,7 +312,7 @@ exports[`Nav renders correctly 1`] = ` margin-right: 1.9444444444444444rem; } -.c20 { +.c23 { position: fixed; transform: translateZ(0); display: block; @@ -234,23 +330,23 @@ exports[`Nav renders correctly 1`] = ` transition: transform 150ms ease-out; } -.c21 { +.c24 { display: block; box-sizing: border-box; height: 100%; padding-top: 3.3333333333333335rem; } -.c22 { +.c25 { margin-bottom: 1.1111111111111112rem; } -.c23 { +.c26 { display: block; margin: 0.5555555555555556rem 2.2222222222222223rem; } -.c25 { +.c28 { display: block; margin: 0.5555555555555556rem 2.2222222222222223rem 0.5555555555555556rem 3.0555555555555554rem; font-size: 0.9rem; @@ -258,11 +354,11 @@ exports[`Nav renders correctly 1`] = ` } @media (min-width: 62.5em) { - .c24 { + .c27 { border-radius: 0.16666666666666666rem; } - .c24:hover { + .c27:hover { background: rgba(20, 20, 20, 0.1); } } @@ -697,6 +793,34 @@ exports[`Nav renders correctly 1`] = ` ] } > + + + + + + + + + +
- - + +