added compact mode switcher

This commit is contained in:
Rick van Lieshout 2022-09-13 17:53:30 +02:00
parent 859c1d81b7
commit 3c010efb59
24 changed files with 1297 additions and 74 deletions

View File

@ -38,7 +38,9 @@
"selector": "parameter" "selector": "parameter"
}], }],
"react/static-property-placement": ["off"], "react/static-property-placement": ["off"],
"react/prop-types": ["off"] "react/prop-types": ["off"],
"no-shadow": "off",
"@typescript-eslint/no-shadow": ["error"]
}, },
"settings": { "settings": {
"import/resolver": { "import/resolver": {

View File

@ -4,10 +4,6 @@ This is the repository for my personal blog/website [rickvanlieshout.com](https:
## Todo ## Todo
- Add a better dark mode toggle
- show in posts view
- print view - print view
- hide mode toggler - hide mode toggler

120
package-lock.json generated
View File

@ -9,6 +9,9 @@
"version": "0.5.0", "version": "0.5.0",
"license": "MIT", "license": "MIT",
"dependencies": { "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", "classnames": "^2.3.1",
"disqus-react": "^1.1.3", "disqus-react": "^1.1.3",
"gatsby": "^4.20.0", "gatsby": "^4.20.0",
@ -38,7 +41,8 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-cookie-consent": "^8.0.1", "react-cookie-consent": "^8.0.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-helmet": "^6.1.0" "react-helmet": "^6.1.0",
"react-toggle": "^4.1.3"
}, },
"devDependencies": { "devDependencies": {
"@jest/globals": "^27.5.1", "@jest/globals": "^27.5.1",
@ -55,6 +59,7 @@
"@types/react-dom": "^18.0.6", "@types/react-dom": "^18.0.6",
"@types/react-helmet": "^6.1.5", "@types/react-helmet": "^6.1.5",
"@types/react-test-renderer": "^18.0.0", "@types/react-test-renderer": "^18.0.0",
"@types/react-toggle": "^4.0.3",
"@types/sass": "^1.43.1", "@types/sass": "^1.43.1",
"@typescript-eslint/eslint-plugin": "^5.36.1", "@typescript-eslint/eslint-plugin": "^5.36.1",
"@typescript-eslint/parser": "^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", "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
"integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==" "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": { "node_modules/@gatsbyjs/parcel-namer-relative-to-cwd": {
"version": "1.7.0", "version": "1.7.0",
"resolved": "https://registry.npmjs.org/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-1.7.0.tgz", "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": "*" "@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": { "node_modules/@types/responselike": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz", "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
@ -28561,6 +28620,19 @@
"react": "^18.2.0" "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": { "node_modules/read": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", "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": { "@gatsbyjs/parcel-namer-relative-to-cwd": {
"version": "1.7.0", "version": "1.7.0",
"resolved": "https://registry.npmjs.org/@gatsbyjs/parcel-namer-relative-to-cwd/-/parcel-namer-relative-to-cwd-1.7.0.tgz", "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": "*"
} }
}, },
"@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": { "@types/responselike": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz", "resolved": "https://registry.npmjs.org/@types/responselike/-/responselike-1.0.0.tgz",
@ -55015,6 +55125,14 @@
"scheduler": "^0.23.0" "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": { "read": {
"version": "1.0.7", "version": "1.0.7",
"resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz", "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",

View File

@ -44,6 +44,9 @@
] ]
}, },
"dependencies": { "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", "classnames": "^2.3.1",
"disqus-react": "^1.1.3", "disqus-react": "^1.1.3",
"gatsby": "^4.20.0", "gatsby": "^4.20.0",
@ -73,7 +76,8 @@
"react": "^18.2.0", "react": "^18.2.0",
"react-cookie-consent": "^8.0.1", "react-cookie-consent": "^8.0.1",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-helmet": "^6.1.0" "react-helmet": "^6.1.0",
"react-toggle": "^4.1.3"
}, },
"devDependencies": { "devDependencies": {
"@jest/globals": "^27.5.1", "@jest/globals": "^27.5.1",
@ -90,6 +94,7 @@
"@types/react-dom": "^18.0.6", "@types/react-dom": "^18.0.6",
"@types/react-helmet": "^6.1.5", "@types/react-helmet": "^6.1.5",
"@types/react-test-renderer": "^18.0.0", "@types/react-test-renderer": "^18.0.0",
"@types/react-toggle": "^4.0.3",
"@types/sass": "^1.43.1", "@types/sass": "^1.43.1",
"@typescript-eslint/eslint-plugin": "^5.36.1", "@typescript-eslint/eslint-plugin": "^5.36.1",
"@typescript-eslint/parser": "^5.36.1", "@typescript-eslint/parser": "^5.36.1",

View File

@ -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;

View File

@ -27,6 +27,94 @@ Array [
> >
↩ All articles ↩ All articles
</a> </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> </span>
</div>, </div>,
<div> <div>

View File

@ -28,6 +28,94 @@ exports[`Post renders correctly 1`] = `
> >
↩ All articles ↩ All articles
</a> </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> </span>
</div> </div>
<div> <div>

View File

@ -1,6 +1,7 @@
import { Image } from "@/components/Image"; import { Image } from "@/components/Image";
import { Link } from "gatsby"; import { Link } from "gatsby";
import React, { FunctionComponent } from "react"; import React, { FunctionComponent } from "react";
import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
import * as styles from "./PostHeader.module.scss"; import * as styles from "./PostHeader.module.scss";
type Props = { author: { name: string; photo: string } }; type Props = { author: { name: string; photo: string } };
@ -21,6 +22,7 @@ export const PostHeader: FunctionComponent<Props> = ({ author }) => {
<Link to="/" style={{ lineHeight: "50px", marginRight: "10px" }}> <Link to="/" style={{ lineHeight: "50px", marginRight: "10px" }}>
All articles All articles
</Link> </Link>
<ThemeSwitcher showLabel={false} />
</span> </span>
</div> </div>
); );

View File

@ -2,8 +2,6 @@
@import "../../../assets/scss/mixins"; @import "../../../assets/scss/mixins";
.menu { .menu {
@include margin-bottom(1);
.list { .list {
list-style: none; list-style: none;
@include margin-equal(0); @include margin-equal(0);

View File

@ -1,13 +1,12 @@
import { useSiteMetadata } from "@/hooks";
import React from "react"; import React from "react";
import { ThemeSwitcher } from "../ThemeSwitcher/ThemeSwitcher";
import { Author } from "./Author"; import { Author } from "./Author";
import { Contacts } from "./Contacts"; import { Contacts } from "./Contacts";
import { Copyright } from "./Copyright"; import { Copyright } from "./Copyright";
import { Menu } from "./Menu"; import { Menu } from "./Menu";
import * as styles from "./Sidebar.module.scss"; import * as styles from "./Sidebar.module.scss";
import { useSiteMetadata } from "@/hooks";
import ThemeSwitcher from "../DarkmodeSwitch/ThemeSwitcher";
type Props = { type Props = {
isIndex?: boolean; isIndex?: boolean;
@ -24,7 +23,7 @@ const Sidebar = ({ isIndex }: Props) => {
<Contacts contacts={author.contacts} /> <Contacts contacts={author.contacts} />
<Copyright copyright={copyright} /> <Copyright copyright={copyright} />
<Menu menu={legalMenu} /> <Menu menu={legalMenu} />
<ThemeSwitcher /> <ThemeSwitcher showLabel />
</div> </div>
</div> </div>
); );

View File

@ -141,12 +141,96 @@ exports[`Sidebar renders correctly 1`] = `
<nav> <nav>
<ul /> <ul />
</nav> </nav>
<a Switch color mode:
href="#" <br />
<div
className="react-toggle"
onClick={[Function]} onClick={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
> >
Switch to light mode <div
</a> 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> </div>
`; `;

View 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}
/>
</>
);
};

View File

@ -0,0 +1,4 @@
export enum Themes {
dark = "dark",
light = "light",
}

View 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>
);
};

View 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>
);
};

View 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;
}

View File

@ -142,12 +142,96 @@ exports[`CategoriesTemplate renders correctly 1`] = `
<nav> <nav>
<ul /> <ul />
</nav> </nav>
<a Switch color mode:
href="#" <br />
<div
className="react-toggle"
onClick={[Function]} onClick={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
> >
Switch to light mode <div
</a> 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> </div>
<div> <div>

View File

@ -142,12 +142,96 @@ exports[`CategoryTemplate renders correctly 1`] = `
<nav> <nav>
<ul /> <ul />
</nav> </nav>
<a Switch color mode:
href="#" <br />
<div
className="react-toggle"
onClick={[Function]} onClick={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
> >
Switch to light mode <div
</a> 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> </div>
<div> <div>

View File

@ -142,12 +142,96 @@ exports[`IndexTemplate renders correctly 1`] = `
<nav> <nav>
<ul /> <ul />
</nav> </nav>
<a Switch color mode:
href="#" <br />
<div
className="react-toggle"
onClick={[Function]} onClick={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
> >
Switch to light mode <div
</a> 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> </div>
<div> <div>

View File

@ -142,12 +142,96 @@ exports[`NotFoundTemplate renders correctly 1`] = `
<nav> <nav>
<ul /> <ul />
</nav> </nav>
<a Switch color mode:
href="#" <br />
<div
className="react-toggle"
onClick={[Function]} onClick={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
> >
Switch to light mode <div
</a> 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> </div>
<div> <div>

View File

@ -142,12 +142,96 @@ exports[`PageTemplate renders correctly 1`] = `
<nav> <nav>
<ul /> <ul />
</nav> </nav>
<a Switch color mode:
href="#" <br />
<div
className="react-toggle"
onClick={[Function]} onClick={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
> >
Switch to light mode <div
</a> 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> </div>
<div> <div>

View File

@ -29,6 +29,94 @@ exports[`PostTemplate renders correctly 1`] = `
> >
↩ All articles ↩ All articles
</a> </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> </span>
</div> </div>
<div> <div>

View File

@ -142,12 +142,96 @@ exports[`TagTemplate renders correctly 1`] = `
<nav> <nav>
<ul /> <ul />
</nav> </nav>
<a Switch color mode:
href="#" <br />
<div
className="react-toggle"
onClick={[Function]} onClick={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
> >
Switch to light mode <div
</a> 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> </div>
<div> <div>

View File

@ -142,12 +142,96 @@ exports[`TagsTemplate renders correctly 1`] = `
<nav> <nav>
<ul /> <ul />
</nav> </nav>
<a Switch color mode:
href="#" <br />
<div
className="react-toggle"
onClick={[Function]} onClick={[Function]}
onTouchEnd={[Function]}
onTouchMove={[Function]}
onTouchStart={[Function]}
> >
Switch to light mode <div
</a> 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> </div>
<div> <div>