mirror of
https://github.com/mastermindzh/rickvanlieshout.com
synced 2024-10-22 16:49:19 +02:00
added compact mode switcher
This commit is contained in:
parent
859c1d81b7
commit
3c010efb59
@ -38,7 +38,9 @@
|
||||
"selector": "parameter"
|
||||
}],
|
||||
"react/static-property-placement": ["off"],
|
||||
"react/prop-types": ["off"]
|
||||
"react/prop-types": ["off"],
|
||||
"no-shadow": "off",
|
||||
"@typescript-eslint/no-shadow": ["error"]
|
||||
},
|
||||
"settings": {
|
||||
"import/resolver": {
|
||||
|
||||
@ -4,10 +4,6 @@ This is the repository for my personal blog/website [rickvanlieshout.com](https:
|
||||
|
||||
## Todo
|
||||
|
||||
- Add a better dark mode toggle
|
||||
|
||||
- show in posts view
|
||||
|
||||
- print view
|
||||
|
||||
- hide mode toggler
|
||||
|
||||
120
package-lock.json
generated
120
package-lock.json
generated
@ -9,6 +9,9 @@
|
||||
"version": "0.5.0",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.2.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.2.0",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"classnames": "^2.3.1",
|
||||
"disqus-react": "^1.1.3",
|
||||
"gatsby": "^4.20.0",
|
||||
@ -38,7 +41,8 @@
|
||||
"react": "^18.2.0",
|
||||
"react-cookie-consent": "^8.0.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-helmet": "^6.1.0"
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-toggle": "^4.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@jest/globals": "^27.5.1",
|
||||
@ -55,6 +59,7 @@
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"@types/react-helmet": "^6.1.5",
|
||||
"@types/react-test-renderer": "^18.0.0",
|
||||
"@types/react-toggle": "^4.0.3",
|
||||
"@types/sass": "^1.43.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.36.1",
|
||||
"@typescript-eslint/parser": "^5.36.1",
|
||||
@ -2226,6 +2231,51 @@
|
||||
"resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
|
||||
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg=="
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
|
||||
"integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg==",
|
||||
"hasInstallScript": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/fontawesome-svg-core": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
|
||||
"integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz",
|
||||
"integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==",
|
||||
"hasInstallScript": true,
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-common-types": "6.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/@fortawesome/react-fontawesome": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
|
||||
"integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
|
||||
"dependencies": {
|
||||
"prop-types": "^15.8.1"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
|
||||
"react": ">=16.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@gatsbyjs/parcel-namer-relative-to-cwd": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-1.7.0.tgz",
|
||||
@ -6340,6 +6390,15 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/react-toggle": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-toggle/-/react-toggle-4.0.3.tgz",
|
||||
"integrity": "sha512-57QdMWeeQdRjM2/p+udgYerxUbSkmeUIW18kwUttcci6GHkgxoqCsDZfRtsCsAHcvvM5VBQdtDUEgLWo2e87mA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/responselike": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
|
||||
@ -28561,6 +28620,19 @@
|
||||
"react": "^18.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-toggle": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.3.tgz",
|
||||
"integrity": "sha512-WoPrvbwfQSvoagbrDnXPrlsxwzuhQIrs+V0I162j/s+4XPgY/YDAUmHSeWiroznfI73wj+MBydvW95zX8ABbSg==",
|
||||
"dependencies": {
|
||||
"classnames": "^2.2.5"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prop-types": ">= 15.3.0 < 19",
|
||||
"react": ">= 15.3.0 < 19",
|
||||
"react-dom": ">= 15.3.0 < 19"
|
||||
}
|
||||
},
|
||||
"node_modules/read": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
|
||||
@ -35548,6 +35620,35 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"@fortawesome/fontawesome-common-types": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.2.0.tgz",
|
||||
"integrity": "sha512-rBevIsj2nclStJ7AxTdfsa3ovHb1H+qApwrxcTVo+NNdeJiB9V75hsKfrkG5AwNcRUNxrPPiScGYCNmLMoh8pg=="
|
||||
},
|
||||
"@fortawesome/fontawesome-svg-core": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.2.0.tgz",
|
||||
"integrity": "sha512-Cf2mAAeMWFMzpLC7Y9H1I4o3wEU+XovVJhTiNG8ZNgSQj53yl7OCJaS80K4YjrABWZzbAHVaoHE1dVJ27AAYXw==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.2.0"
|
||||
}
|
||||
},
|
||||
"@fortawesome/free-solid-svg-icons": {
|
||||
"version": "6.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.2.0.tgz",
|
||||
"integrity": "sha512-UjCILHIQ4I8cN46EiQn0CZL/h8AwCGgR//1c4R96Q5viSRwuKVo0NdQEc4bm+69ZwC0dUvjbDqAHF1RR5FA3XA==",
|
||||
"requires": {
|
||||
"@fortawesome/fontawesome-common-types": "6.2.0"
|
||||
}
|
||||
},
|
||||
"@fortawesome/react-fontawesome": {
|
||||
"version": "0.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
|
||||
"integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
|
||||
"requires": {
|
||||
"prop-types": "^15.8.1"
|
||||
}
|
||||
},
|
||||
"@gatsbyjs/parcel-namer-relative-to-cwd": {
|
||||
"version": "1.7.0",
|
||||
"resolved": "https://registry.npmjs.org/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-1.7.0.tgz",
|
||||
@ -38674,6 +38775,15 @@
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/react-toggle": {
|
||||
"version": "4.0.3",
|
||||
"resolved": "https://registry.npmjs.org/@types/react-toggle/-/react-toggle-4.0.3.tgz",
|
||||
"integrity": "sha512-57QdMWeeQdRjM2/p+udgYerxUbSkmeUIW18kwUttcci6GHkgxoqCsDZfRtsCsAHcvvM5VBQdtDUEgLWo2e87mA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/react": "*"
|
||||
}
|
||||
},
|
||||
"@types/responselike": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
|
||||
@ -55015,6 +55125,14 @@
|
||||
"scheduler": "^0.23.0"
|
||||
}
|
||||
},
|
||||
"react-toggle": {
|
||||
"version": "4.1.3",
|
||||
"resolved": "https://registry.npmjs.org/react-toggle/-/react-toggle-4.1.3.tgz",
|
||||
"integrity": "sha512-WoPrvbwfQSvoagbrDnXPrlsxwzuhQIrs+V0I162j/s+4XPgY/YDAUmHSeWiroznfI73wj+MBydvW95zX8ABbSg==",
|
||||
"requires": {
|
||||
"classnames": "^2.2.5"
|
||||
}
|
||||
},
|
||||
"read": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
|
||||
|
||||
@ -44,6 +44,9 @@
|
||||
]
|
||||
},
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.2.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.2.0",
|
||||
"@fortawesome/react-fontawesome": "^0.2.0",
|
||||
"classnames": "^2.3.1",
|
||||
"disqus-react": "^1.1.3",
|
||||
"gatsby": "^4.20.0",
|
||||
@ -73,7 +76,8 @@
|
||||
"react": "^18.2.0",
|
||||
"react-cookie-consent": "^8.0.1",
|
||||
"react-dom": "^18.2.0",
|
||||
"react-helmet": "^6.1.0"
|
||||
"react-helmet": "^6.1.0",
|
||||
"react-toggle": "^4.1.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@jest/globals": "^27.5.1",
|
||||
@ -90,6 +94,7 @@
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"@types/react-helmet": "^6.1.5",
|
||||
"@types/react-test-renderer": "^18.0.0",
|
||||
"@types/react-toggle": "^4.0.3",
|
||||
"@types/sass": "^1.43.1",
|
||||
"@typescript-eslint/eslint-plugin": "^5.36.1",
|
||||
"@typescript-eslint/parser": "^5.36.1",
|
||||
|
||||
@ -1,29 +0,0 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
|
||||
enum themes {
|
||||
dark = "dark",
|
||||
light = "light",
|
||||
}
|
||||
|
||||
function ThemeSwitcher() {
|
||||
const initTheme = document.documentElement.dataset.theme;
|
||||
const [theme, setTheme] = useState(initTheme);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("theme", theme ?? themes.light);
|
||||
document.documentElement.dataset.theme = theme;
|
||||
}, [theme]);
|
||||
|
||||
const getOppositeTheme = () => {
|
||||
return theme === themes.light ? themes.dark : themes.light;
|
||||
};
|
||||
|
||||
function toggleTheme() {
|
||||
const newTheme = theme === themes.dark ? themes.light : themes.dark;
|
||||
setTheme(newTheme);
|
||||
}
|
||||
|
||||
return <a href="#" onClick={toggleTheme}>{`Switch to ${getOppositeTheme()} mode`}</a>;
|
||||
}
|
||||
|
||||
export default ThemeSwitcher;
|
||||
@ -27,6 +27,94 @@ Array [
|
||||
>
|
||||
↩ All articles
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</div>,
|
||||
<div>
|
||||
|
||||
@ -28,6 +28,94 @@ exports[`Post renders correctly 1`] = `
|
||||
>
|
||||
↩ All articles
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -1,6 +1,7 @@
|
||||
import { Image } from "@/components/Image";
|
||||
import { Link } from "gatsby";
|
||||
import React, { FunctionComponent } from "react";
|
||||
import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
|
||||
import * as styles from "./PostHeader.module.scss";
|
||||
|
||||
type Props = { author: { name: string; photo: string } };
|
||||
@ -21,6 +22,7 @@ export const PostHeader: FunctionComponent<Props> = ({ author }) => {
|
||||
<Link to="/" style={{ lineHeight: "50px", marginRight: "10px" }}>
|
||||
↩ All articles
|
||||
</Link>
|
||||
<ThemeSwitcher showLabel={false} />
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -2,8 +2,6 @@
|
||||
@import "../../../assets/scss/mixins";
|
||||
|
||||
.menu {
|
||||
@include margin-bottom(1);
|
||||
|
||||
.list {
|
||||
list-style: none;
|
||||
@include margin-equal(0);
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import { useSiteMetadata } from "@/hooks";
|
||||
import React from "react";
|
||||
import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
|
||||
|
||||
import { Author } from "./Author";
|
||||
import { Contacts } from "./Contacts";
|
||||
import { Copyright } from "./Copyright";
|
||||
import { Menu } from "./Menu";
|
||||
|
||||
import * as styles from "./Sidebar.module.scss";
|
||||
import { useSiteMetadata } from "@/hooks";
|
||||
import ThemeSwitcher from "../DarkmodeSwitch/ThemeSwitcher";
|
||||
|
||||
type Props = {
|
||||
isIndex?: boolean;
|
||||
@ -24,7 +23,7 @@ const Sidebar = ({ isIndex }: Props) => {
|
||||
<Contacts contacts={author.contacts} />
|
||||
<Copyright copyright={copyright} />
|
||||
<Menu menu={legalMenu} />
|
||||
<ThemeSwitcher />
|
||||
<ThemeSwitcher showLabel />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -141,12 +141,96 @@ exports[`Sidebar renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
39
src/components/ThemeSwitcher/ThemeSwitcher.tsx
Normal file
39
src/components/ThemeSwitcher/ThemeSwitcher.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
/* eslint-disable no-undef */
|
||||
import React, { FunctionComponent, useEffect, useState } from "react";
|
||||
import Toggle from "react-toggle";
|
||||
import { Moon } from "./components/Moon";
|
||||
import { Sun } from "./components/Sun";
|
||||
import "./theme.scss";
|
||||
import { Themes } from "./Themes";
|
||||
|
||||
type Props = { showLabel: boolean };
|
||||
|
||||
export const ThemeSwitcher: FunctionComponent<Props> = ({ showLabel }) => {
|
||||
const initTheme = document.documentElement.dataset.theme;
|
||||
const [theme, setTheme] = useState(initTheme);
|
||||
|
||||
useEffect(() => {
|
||||
localStorage.setItem("theme", theme ?? Themes.light);
|
||||
document.documentElement.dataset.theme = theme;
|
||||
}, [theme]);
|
||||
|
||||
function toggleTheme() {
|
||||
const newTheme = theme === Themes.dark ? Themes.light : Themes.dark;
|
||||
setTheme(newTheme);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{showLabel && "Switch color mode:"}
|
||||
{showLabel && <br />}
|
||||
<Toggle
|
||||
checked={theme === Themes.dark}
|
||||
icons={{
|
||||
checked: <Moon />,
|
||||
unchecked: <Sun />,
|
||||
}}
|
||||
onChange={toggleTheme}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
4
src/components/ThemeSwitcher/Themes.ts
Normal file
4
src/components/ThemeSwitcher/Themes.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export enum Themes {
|
||||
dark = "dark",
|
||||
light = "light",
|
||||
}
|
||||
18
src/components/ThemeSwitcher/components/Moon.tsx
Normal file
18
src/components/ThemeSwitcher/components/Moon.tsx
Normal file
@ -0,0 +1,18 @@
|
||||
import { faMoon } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import React from "react";
|
||||
|
||||
export const Moon = () => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
fontSize: "1.1em",
|
||||
position: "absolute",
|
||||
top: "-4px",
|
||||
color: "#f1c40f",
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faMoon} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
19
src/components/ThemeSwitcher/components/Sun.tsx
Normal file
19
src/components/ThemeSwitcher/components/Sun.tsx
Normal file
@ -0,0 +1,19 @@
|
||||
import { faSun } from "@fortawesome/free-solid-svg-icons";
|
||||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
||||
import React from "react";
|
||||
|
||||
export const Sun = () => {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
color: "#f39c12",
|
||||
position: "absolute",
|
||||
fontSize: "1em",
|
||||
top: "-3px",
|
||||
left: "-3px",
|
||||
}}
|
||||
>
|
||||
<FontAwesomeIcon icon={faSun} />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
116
src/components/ThemeSwitcher/theme.scss
Normal file
116
src/components/ThemeSwitcher/theme.scss
Normal file
@ -0,0 +1,116 @@
|
||||
.react-toggle {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
|
||||
display: inline-block;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
touch-action: pan-x;
|
||||
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.react-toggle-screenreader-only {
|
||||
border: 0;
|
||||
clip: rect(0 0 0 0);
|
||||
height: 1px;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
.react-toggle--disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5;
|
||||
-webkit-transition: opacity 0.25s;
|
||||
transition: opacity 0.25s;
|
||||
}
|
||||
|
||||
.react-toggle-track {
|
||||
background-color: #4D4D4D;
|
||||
border-radius: 30px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.react-toggle-track-check {
|
||||
bottom: 0px;
|
||||
height: 10px;
|
||||
left: 8px;
|
||||
line-height: 0;
|
||||
margin-bottom: auto;
|
||||
margin-top: auto;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
width: 14px;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.react-toggle-track-x {
|
||||
bottom: 0px;
|
||||
height: 10px;
|
||||
line-height: 0;
|
||||
margin-bottom: auto;
|
||||
margin-top: auto;
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 0px;
|
||||
-webkit-transition: opacity 0.25s ease;
|
||||
-moz-transition: opacity 0.25s ease;
|
||||
transition: opacity 0.25s ease;
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-track-x {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.react-toggle-thumb {
|
||||
background-color: #FAFAFA;
|
||||
border: 1px solid #4D4D4D;
|
||||
border-radius: 50%;
|
||||
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
height: 22px;
|
||||
left: 1px;
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
|
||||
-webkit-transition: all 0.25s ease;
|
||||
-moz-transition: all 0.25s ease;
|
||||
transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
|
||||
transition: all 0.25s ease;
|
||||
width: 22px;
|
||||
}
|
||||
|
||||
.react-toggle--checked .react-toggle-thumb {
|
||||
left: 27px;
|
||||
}
|
||||
@ -142,12 +142,96 @@ exports[`CategoriesTemplate renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -142,12 +142,96 @@ exports[`CategoryTemplate renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -142,12 +142,96 @@ exports[`IndexTemplate renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -142,12 +142,96 @@ exports[`NotFoundTemplate renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -142,12 +142,96 @@ exports[`PageTemplate renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -29,6 +29,94 @@ exports[`PostTemplate renders correctly 1`] = `
|
||||
>
|
||||
↩ All articles
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -142,12 +142,96 @@ exports[`TagTemplate renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
@ -142,12 +142,96 @@ exports[`TagsTemplate renders correctly 1`] = `
|
||||
<nav>
|
||||
<ul />
|
||||
</nav>
|
||||
<a
|
||||
href="#"
|
||||
Switch color mode:
|
||||
<br />
|
||||
<div
|
||||
className="react-toggle"
|
||||
onClick={[Function]}
|
||||
onTouchEnd={[Function]}
|
||||
onTouchMove={[Function]}
|
||||
onTouchStart={[Function]}
|
||||
>
|
||||
Switch to light mode
|
||||
</a>
|
||||
<div
|
||||
className="react-toggle-track"
|
||||
>
|
||||
<div
|
||||
className="react-toggle-track-check"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f1c40f",
|
||||
"fontSize": "1.1em",
|
||||
"position": "absolute",
|
||||
"top": "-4px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-moon "
|
||||
data-icon="moon"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 384 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M223.5 32C100 32 0 132.3 0 256S100 480 223.5 480c60.6 0 115.5-24.2 155.8-63.4c5-4.9 6.3-12.5 3.1-18.7s-10.1-9.7-17-8.5c-9.8 1.7-19.8 2.6-30.1 2.6c-96.9 0-175.5-78.8-175.5-176c0-65.8 36-123.1 89.3-153.3c6.1-3.5 9.2-10.5 7.7-17.3s-7.3-11.9-14.3-12.5c-6.3-.5-12.6-.8-19-.8z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-track-x"
|
||||
>
|
||||
<div
|
||||
style={
|
||||
Object {
|
||||
"color": "#f39c12",
|
||||
"fontSize": "1em",
|
||||
"left": "-3px",
|
||||
"position": "absolute",
|
||||
"top": "-3px",
|
||||
}
|
||||
}
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
className="svg-inline--fa fa-sun "
|
||||
data-icon="sun"
|
||||
data-prefix="fas"
|
||||
focusable="false"
|
||||
role="img"
|
||||
style={Object {}}
|
||||
viewBox="0 0 512 512"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M361.5 1.2c5 2.1 8.6 6.6 9.6 11.9L391 121l107.9 19.8c5.3 1 9.8 4.6 11.9 9.6s1.5 10.7-1.6 15.2L446.9 256l62.3 90.3c3.1 4.5 3.7 10.2 1.6 15.2s-6.6 8.6-11.9 9.6L391 391 371.1 498.9c-1 5.3-4.6 9.8-9.6 11.9s-10.7 1.5-15.2-1.6L256 446.9l-90.3 62.3c-4.5 3.1-10.2 3.7-15.2 1.6s-8.6-6.6-9.6-11.9L121 391 13.1 371.1c-5.3-1-9.8-4.6-11.9-9.6s-1.5-10.7 1.6-15.2L65.1 256 2.8 165.7c-3.1-4.5-3.7-10.2-1.6-15.2s6.6-8.6 11.9-9.6L121 121 140.9 13.1c1-5.3 4.6-9.8 9.6-11.9s10.7-1.5 15.2 1.6L256 65.1 346.3 2.8c4.5-3.1 10.2-3.7 15.2-1.6zM352 256c0 53-43 96-96 96s-96-43-96-96s43-96 96-96s96 43 96 96zm32 0c0-70.7-57.3-128-128-128s-128 57.3-128 128s57.3 128 128 128s128-57.3 128-128z"
|
||||
fill="currentColor"
|
||||
style={Object {}}
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
className="react-toggle-thumb"
|
||||
/>
|
||||
<input
|
||||
checked={false}
|
||||
className="react-toggle-screenreader-only"
|
||||
onBlur={[Function]}
|
||||
onChange={[Function]}
|
||||
onFocus={[Function]}
|
||||
type="checkbox"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user