yude/yude.jp
0
0
Fork 0
mirror of https://github.com/yude-jp/yude.jp synced 2024-09-27 23:20:24 +09:00
Code Releases Activity

Delete dark-mode function

Browse Source
This commit is contained in:
yude 2021-02-07 10:28:55 +09:00
parent df9947ecf8
commit 73afee74b2
4 changed files with 0 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
pages/components/Layout.js
View File

@ -2,14 +2,12 @@ import Head from "next/head"
import Link from "next/link"
import "tailwindcss/tailwind.css";
import React, { useEffect, useState } from 'react'
import { ThemeProvider } from "./themeContext"
const Layout = (props) => {
const { title, children } = props
const siteTitle = "yude.jp"
return (
<div className="page">
<ThemeProvider>
<Head>
<title>{title ? `${title} - ${siteTitle}` : siteTitle}</title>
<link rel="icon" href="/static/images/favicon.ico" />
@ -36,14 +34,12 @@ const Layout = (props) => {
<p className="text-sm text-gray-700 font-bold mb-2">
This page is licensed under the MIT License.
</p>
</div>
</div>
</div>
</footer>
</main>
</body>
</ThemeProvider>
</div>
)
}

2
pages/components/Navbar.js
View File

@ -2,7 +2,6 @@ import "tailwindcss/tailwind.css";
import Popper from "popper.js";
import Link from 'next/link';
import LangSelector from "./LangSelector"
import Toggle from "./toggle"
import { useState } from 'react';
const Navbar = () => {
@ -24,7 +23,6 @@ const Navbar = () => {
</Link>
<div className="origin-top-right absolute right-0">
<LangSelector />
<Toggle />
</div>
</nav>
</>

53
pages/components/themeContext.js
View File

@ -1,53 +0,0 @@
import React from 'react'
const getInitialTheme = _ => {
if (typeof window !== "undefined" && window.localStorage) {
const storedPrefs = window.localStorage.getItem("color-theme")
if (typeof storedPrefs === "string") {
return storedPrefs
}
const userMedia = window.matchMedia("(prefers-color-scheme: dark)")
if (userMedia.matches) {
return "dark"
}
}
// If you want to use light theme as the default, return "light" instead
return "dark"
}
const ThemeContext = React.createContext()
export default T
export const ThemeProvider = ({ initialTheme, children }) => {
const [theme, setTheme] = React.useState(getInitialTheme)
const rawSetTheme = theme => {
const root = window.document.documentElement
const isDark = theme === "dark"
root.classList.remove(isDark ? "light" : "dark")
root.classList.add(theme)
localStorage.setItem("color-theme", theme)
}
if (initialTheme) {
rawSetTheme(initialTheme)
}
React.useEffect(
_ => {
rawSetTheme(theme)
},
[theme]
)
return (
<ThemeContext.Provider value={{ theme, setTheme }}>
{children}
</ThemeContext.Provider>
)
}

51
pages/components/toggle.js
View File

@ -1,51 +0,0 @@
import React from 'react'
import ThemeContext from './themeContext'
import "tailwindcss/tailwind.css";
const Toggle = () => {
const { theme, setTheme } = React.useContext(ThemeContext)
function isDark() {
return theme === "dark"
}
return (
<div className="float-right mr-3 my-2">
<label
for="toogleA"
className="flex items-center cursor-pointer"
>
<div className="relative">
<input id="toogleA" type="checkbox" className="hidden" checked={isDark()} onChange={e => setTheme(e.target.checked ? "dark" : "light")} />
<div
className="toggle__line w-10 h-4 bg-gray-400 rounded-full shadow-inner"
></div>
<div
className="toggle__dot absolute w-6 h-6 bg-white rounded-full shadow inset-y-0 left-0"
></div>
</div>
<div
className="ml-3 font-medium"
>
<span class="text-black dark:text-white">🌙</span>
</div>
</label>
<style jsx>
{`
.toggle__dot {
top: -.25rem;
left: -.25rem;
transition: all 0.3s ease-in-out;
}
input:checked ~ .toggle__dot {
transform: translateX(100%);
background-color: #0A0E14;
}
`}
</style>
</div>
)
}
export default Toggle