Browse Source

Make theme toggle smooth

Add compatibility for a smoother transition of themes.
tags/0.3.0
TheoryOfNekomata 3 years ago
parent
commit
50ea1b6366
5 changed files with 165 additions and 313 deletions
  1. +145
    -0
      packages/react-common-docs/public/theme.css
  2. +1
    -134
      packages/react-common-docs/public/theme/dark.css
  3. +0
    -141
      packages/react-common-docs/public/theme/light.css
  4. +17
    -37
      packages/react-common-docs/src/components/ThemeToggle/ThemeToggle.tsx
  5. +2
    -1
      packages/react-common-docs/src/pages/_document.tsx

+ 145
- 0
packages/react-common-docs/public/theme.css View File

@@ -0,0 +1,145 @@
@font-face {
font-family: 'Encode Sans';
font-stretch: semi-expanded;
font-weight: 400;
src:
local('Encode Sans Semi Expanded'),
local('Encode Sans');
}

@font-face {
font-family: 'Encode Sans';
font-stretch: semi-expanded;
font-weight: 700;
src:
local('Encode Sans Semi Expanded Bold'),
local('Encode Sans Semi Expanded'),
local('Encode Sans');
}

@font-face {
font-family: 'Encode Sans';
font-stretch: condensed;
font-weight: 100;
src:
local('Encode Sans Condensed Thin'),
local('Encode Sans Condensed'),
local('Encode Sans');
}

@font-face {
font-family: 'Encode Sans';
font-stretch: condensed;
font-weight: 200;
src:
local('Encode Sans Condensed ExtraLight'),
local('Encode Sans Condensed Extra Light'),
local('Encode Sans Condensed'),
local('Encode Sans');
}

@font-face {
font-family: 'Encode Sans';
font-stretch: condensed;
font-weight: 300;
src:
local('Encode Sans Condensed Light'),
local('Encode Sans Condensed'),
local('Encode Sans');
}

:root {
--font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
--font-stretch-base: semi-expanded;
--font-weight-base: 400;
--line-height-base: 2;
--font-family-headings:'Encode Sans Condensed', 'Encode Sans', system-ui;
--font-stretch-headings: condensed;
--font-weight-headings: 100;
--line-height-headings: 1.5;
--font-family-monospace: 'mononoki';
--font-size-root: 16px;
--opacity-light: 0.25;
--opacity-lighter: 0.5;
--opacity-lightest: 0.75;
}

:root {
--color-bg: var(--color-negative, white);
--color-fg: var(--color-positive, black);
}

@media (prefers-color-scheme: dark) {
:root {
--color-bg: var(--color-negative, black);
--color-fg: var(--color-positive, white);
}
}

:root {

background-color: var(--color-bg);
color: var(--color-fg);
font-size: var(--font-size-root);
font-family: var(--font-family-base), sans-serif;
font-stretch: var(--font-stretch-base, normal);
font-weight: var(--font-weight-base, 400);
line-height: var(--line-height-base, 2);
transition-property: color, background-color;
transition-timing-function: ease;
transition-duration: 350ms;
}

h1 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

h2 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

h3 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

h4 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

h5 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

h6 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

code {
font-family: var(--font-family-monospace), monospace;
}

pre {
font-family: var(--font-family-monospace), monospace;
}

a {
color: var(--color-accent);
}

+ 1
- 134
packages/react-common-docs/public/theme/dark.css View File

@@ -1,73 +1,9 @@
@font-face {
font-family: 'Encode Sans';
font-stretch: semi-expanded;
font-weight: 400;
src:
local('Encode Sans Semi Expanded'),
local('Encode Sans');
}

@font-face {
font-family: 'Encode Sans';
font-stretch: semi-expanded;
font-weight: 700;
src:
local('Encode Sans Semi Expanded Bold'),
local('Encode Sans Semi Expanded'),
local('Encode Sans');
}

@font-face {
font-family: 'Encode Sans';
font-stretch: condensed;
font-weight: 100;
src:
local('Encode Sans Condensed Thin'),
local('Encode Sans Condensed'),
local('Encode Sans');
}

@font-face {
font-family: 'Encode Sans';
font-stretch: condensed;
font-weight: 200;
src:
local('Encode Sans Condensed ExtraLight'),
local('Encode Sans Condensed Extra Light'),
local('Encode Sans Condensed'),
local('Encode Sans');
}

@font-face {
font-family: 'Encode Sans';
font-stretch: condensed;
font-weight: 300;
src:
local('Encode Sans Condensed Light'),
local('Encode Sans Condensed'),
local('Encode Sans');
}

:root {
--color-shade: #000;
--color-active: #f90;
--font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
--font-stretch-base: semi-expanded;
--font-weight-base: 400;
--line-height-base: 2;
--font-family-headings:'Encode Sans Condensed', 'Encode Sans', system-ui;
--font-stretch-headings: condensed;
--font-weight-headings: 100;
--line-height-headings: 1.5;
--font-family-monospace: 'mononoki';
--font-size-root: 16px;
--color-negative: #222;
--color-positive: #eee;
--color-accent: #C78AB3;
--opacity-light: 0.25;
--opacity-lighter: 0.5;
--opacity-lightest: 0.75;

--color-active: #f90;
--color-code-number: #74f95e;
--color-code-keyword: #ff4389;
--color-code-type: #5097D2;
@@ -81,72 +17,3 @@
--color-code-url: #0099CC;
--color-code-global: #C28050;
}

:root {
--color-bg: var(--color-negative, white);
--color-fg: var(--color-positive, black);
background-color: var(--color-bg);
color: var(--color-fg);
font-size: var(--font-size-root);
font-family: var(--font-family-base), sans-serif;
font-stretch: var(--font-stretch-base, normal);
font-weight: var(--font-weight-base, 400);
line-height: var(--line-height-base, 2);
transition-property: color, background-color;
transition-timing-function: ease;
transition-duration: 350ms;
}

h1 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

h2 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

h3 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

h4 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

h5 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

h6 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

a {
color: var(--color-accent);
}

code {
font-family: var(--font-family-monospace), monospace;
}

pre {
font-family: var(--font-family-monospace), monospace;
}

+ 0
- 141
packages/react-common-docs/public/theme/light.css View File

@@ -1,73 +1,9 @@
@font-face {
font-family: 'Encode Sans';
font-stretch: semi-expanded;
font-weight: 400;
src:
local('Encode Sans Semi Expanded'),
local('Encode Sans');
}

@font-face {
font-family: 'Encode Sans';
font-stretch: semi-expanded;
font-weight: 700;
src:
local('Encode Sans Semi Expanded Bold'),
local('Encode Sans Semi Expanded'),
local('Encode Sans');
}

@font-face {
font-family: 'Encode Sans';
font-stretch: condensed;
font-weight: 100;
src:
local('Encode Sans Condensed Thin'),
local('Encode Sans Condensed'),
local('Encode Sans');
}

@font-face {
font-family: 'Encode Sans';
font-stretch: condensed;
font-weight: 200;
src:
local('Encode Sans Condensed ExtraLight'),
local('Encode Sans Condensed Extra Light'),
local('Encode Sans Condensed'),
local('Encode Sans');
}

@font-face {
font-family: 'Encode Sans';
font-stretch: condensed;
font-weight: 300;
src:
local('Encode Sans Condensed Light'),
local('Encode Sans Condensed'),
local('Encode Sans');
}

:root {
--color-shade: #fff;
--color-negative: #f8f8f8;
--color-positive: #333;
--color-accent: #ba6a9c;
--color-active: #f90;
--font-family-base: 'Encode Sans Semi Expanded', 'Encode Sans', system-ui;
--font-stretch-base: semi-expanded;
--font-weight-base: 400;
--line-height-base: 2;
--font-family-headings:'Encode Sans Condensed', 'Encode Sans', system-ui;
--font-stretch-headings: condensed;
--font-weight-headings: 100;
--line-height-headings: 1.5;
--font-family-monospace: 'mononoki';
--font-size-root: 16px;
--opacity-light: 0.5;
--opacity-lighter: 0.75;
--opacity-lightest: 0.875;

--color-code-number: #72b507;
--color-code-keyword: #ee5189;
--color-code-type: #427fb1;
@@ -81,80 +17,3 @@
--color-code-url: #0099CC;
--color-code-global: #C28050;
}

/*@media (prefers-color-scheme: dark) {*/
/* :root {*/
/* --color-negative: #222;*/
/* --color-positive: #eee;*/
/* --color-accent: #C78AB3;*/
/* --opacity-light: 0.25;*/
/* --opacity-lighter: 0.5;*/
/* --opacity-lightest: 0.75;*/
/* }*/
/*}*/

:root {
--color-bg: var(--color-negative, white);
--color-fg: var(--color-positive, black);
background-color: var(--color-bg);
color: var(--color-fg);
font-size: var(--font-size-root);
font-family: var(--font-family-base), sans-serif;
font-stretch: var(--font-stretch-base, normal);
font-weight: var(--font-weight-base, 400);
line-height: var(--line-height-base, 2);
}

h1 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

h2 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

h3 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

h4 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

h5 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

h6 {
font-family: var(--font-family-headings), sans-serif;
font-stretch: var(--font-stretch-headings, normal);
font-weight: var(--font-weight-headings, 400);
line-height: var(--line-height-headings, 1.5);
}

a {
color: var(--color-accent);
}

code {
font-family: var(--font-family-monospace), monospace;
}

pre {
font-family: var(--font-family-monospace), monospace;
}

+ 17
- 37
packages/react-common-docs/src/components/ThemeToggle/ThemeToggle.tsx View File

@@ -35,61 +35,41 @@ const applyStyles = (theme) => {
})
}

const handleInitializeTheme = (initialTheme: string) => () => {
applyStyles(getTheme() || initialTheme)
}

const ThemeToggle = ({
initialTheme,
}) => {
const [theme, setTheme] = React.useState(initialTheme!)
const [theme, setTheme] = React.useState(null)

const handleSetTheme = (t: string) => () => {
setTheme(t)
const handleSetTheme = (e) => {
setTheme(e.target.checked ? 'Light' : 'Dark')
}

React.useEffect(() => {
window.localStorage.setItem('tesseract-theme', theme as string)
}, [theme])
React.useEffect(() => {
applyStyles(theme)
if (theme as string) {
window.localStorage.setItem('tesseract-theme', theme)
return
}
setTheme(getTheme())
}, [theme])

React.useEffect(() => {
const handler = handleInitializeTheme(initialTheme)
window.addEventListener('load', handler)
return () => {
window.removeEventListener('load', handler)
if (theme as string) {
applyStyles(theme)
}
}, [initialTheme])
}, [theme])

return (
<ToggleWrapper>
<ToggleInput
type="checkbox"
defaultChecked={theme === 'Dark'}
onChange={handleSetTheme(theme === 'Dark' ? 'Light' : 'Dark')}
checked={theme === 'Light'}
onChange={handleSetTheme}
/>
<span>
{
theme === 'Dark'
&& (
<Icon
label="Set Light Mode"
name="moon"
/>
)
}
{
theme === 'Light'
&& (
<Icon
label="Set Dark Mode"
name="sun"
/>
)
}
<Icon
label="Toggle Theme"
name={theme === 'Dark' ? 'moon' : 'sun'}
/>
</span>
</ToggleWrapper>
)


+ 2
- 1
packages/react-common-docs/src/pages/_document.tsx View File

@@ -24,7 +24,8 @@ export default class MyDocument extends Document {
<>
{initialProps.styles}
<link rel="stylesheet" href={`${publicUrl}/global.css`} />
<link rel="stylesheet" title="Dark" href={`${publicUrl}/theme/dark.css`} />
<link rel="stylesheet" href={`${publicUrl}/theme.css`} />
<link rel="alternate stylesheet" title="Dark" href={`${publicUrl}/theme/dark.css`} />
<link rel="alternate stylesheet" title="Light" href={`${publicUrl}/theme/light.css`} />
{sheet.getStyleElement()}
</>


Loading…
Cancel
Save