Skip to content

Commit

Permalink
Merge pull request #90 from Haocen/pr-three-way
Browse files Browse the repository at this point in the history
Implement three-way appearance
  • Loading branch information
tomayac authored Sep 23, 2024
2 parents 578ca63 + 49256c0 commit cca8eda
Show file tree
Hide file tree
Showing 12 changed files with 211 additions and 54 deletions.
14 changes: 12 additions & 2 deletions demo/common.css
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,7 @@

body {
margin: 0;
transition:
color var(--duration) var(--timing),
transition: color var(--duration) var(--timing),
background-color var(--duration) var(--timing);
font-family: sans-serif;
font-size: 12pt;
Expand Down Expand Up @@ -101,6 +100,12 @@ aside:nth-of-type(5) {
top: 16rem;
}

aside:nth-of-type(6) {
width: 20rem;
top: 0;
left: 0 !important;
}

#content select,
#content button,
#content input[type='text'],
Expand Down Expand Up @@ -146,3 +151,8 @@ dark-mode-toggle {
--dark-mode-toggle-active-mode-background-color: var(--accent-color);
--dark-mode-toggle-remember-filter: invert(100%);
}

#dark-mode-toggle-6 {
--dark-mode-toggle-active-mode-background-color: var(--accent-color);
--dark-mode-toggle-remember-filter: invert(100%);
}
4 changes: 2 additions & 2 deletions demo/dark-mode-toggle-playground.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,14 @@
colorScheme.content = e.detail.colorScheme;
icon.href = e.detail.colorScheme === 'dark' ? 'moon.png' : 'sun.png';
console.log(
`${e.target.id} changed the color scheme to ${e.detail.colorScheme}`,
`${e.target.id} changed the color scheme to ${e.detail.colorScheme}`,
);
});

doc.addEventListener('permanentcolorscheme', (e) => {
const permanent = e.detail.permanent;
console.log(
`${permanent ? 'R' : 'Not r'}emembering the last selected mode.`,
`${permanent ? 'R' : 'Not r'}emembering the last selected mode.`,
);
});
})(document);
2 changes: 1 addition & 1 deletion demo/dist.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello Dark Mode</title>
Expand Down
12 changes: 11 additions & 1 deletion demo/index.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello Dark Mode</title>
Expand Down Expand Up @@ -152,5 +152,15 @@ <h1>Hi there!</h1>
appearance="toggle"
></dark-mode-toggle>
</aside>
<aside>
<dark-mode-toggle
id="dark-mode-toggle-6"
legend="3-way Theme Switcher"
light="Light"
system="System"
dark="Dark"
appearance="three-way"
></dark-mode-toggle>
</aside>
</body>
</html>
4 changes: 1 addition & 3 deletions demo/slider.css
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@ dark-mode-toggle.slider::part(toggleLabel)::before {
height: calc(var(--dark-mode-toggle-icon-size, 1rem) * 1.5);
width: calc(var(--dark-mode-toggle-icon-size, 1rem) * 1.5);
border-radius: 100%;
box-shadow:
0 0.15em 0.3em rgb(0 0 0 / 15%),
0 0.2em 0.5em rgb(0 0 0 / 30%);
box-shadow: 0 0.15em 0.3em rgb(0 0 0 / 15%), 0 0.2em 0.5em rgb(0 0 0 / 30%);
background-color: #fff;
color: #333;
transition: 0.4s;
Expand Down
7 changes: 6 additions & 1 deletion demo/unstyled.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
Expand Down Expand Up @@ -38,6 +38,11 @@ <h1>Unstyled out-of-the-box experience</h1>
permanent
remember="Remember"
></dark-mode-toggle>
<code
>&lt;dark-mode-toggle
appearance="three-way"&gt;&lt;/dark-mode-toggle&gt;</code
>
<dark-mode-toggle appearance="three-way"></dark-mode-toggle>
</aside>
<script>
window.addEventListener('colorschemechange', (e) => {
Expand Down
2 changes: 1 addition & 1 deletion demo/with-flashing.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<link
Expand Down
2 changes: 1 addition & 1 deletion demo/without-flashing.html
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!doctype html>
<!DOCTYPE html>
<html>
<head>
<noscript id="dark-mode-toggle-stylesheets">
Expand Down
Binary file added demo/yin-yang.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "dark-mode-toggle",
"version": "0.15.0",
"version": "0.16.0",
"description": "Web Component that toggles dark mode 🌒",
"main": "./dist/dark-mode-toggle.min.mjs",
"module": "./dist/dark-mode-toggle.min.mjs",
Expand Down
184 changes: 151 additions & 33 deletions src/dark-mode-toggle.mjs

Large diffs are not rendered by default.

32 changes: 24 additions & 8 deletions src/template-contents.tpl
Original file line number Diff line number Diff line change
Expand Up @@ -66,15 +66,19 @@
margin-inline-end: 0.5rem;
}
[part="lightLabel"]::before {
[part="lightLabel"]::before, [part="lightThreeWayLabel"]::before {
background-image: var(--${NAME}-light-icon, url("${DEFAULT_URL}sun.png"));
}
[part="darkLabel"]::before {
[part="darkLabel"]::before, [part="darkThreeWayLabel"]::before {
filter: var(--${NAME}-icon-filter, none);
background-image: var(--${NAME}-dark-icon, url("${DEFAULT_URL}moon.png"));
}
[part="systemThreeWayLabel"]::before {
background-image: var(--${NAME}-system-icon, url("${DEFAULT_URL}yin-yang.png"));
}
[part="toggleLabel"]::before {
background-image: var(--${NAME}-checkbox-icon, none);
}
Expand All @@ -85,13 +89,15 @@
[part="lightLabel"],
[part="darkLabel"],
[part="toggleLabel"] {
[part="toggleLabel"],
[part$="ThreeWayLabel"] {
font: var(--${NAME}-label-font, inherit);
}
[part="lightLabel"]:empty,
[part="darkLabel"]:empty,
[part="toggleLabel"]:empty {
[part="toggleLabel"]:empty,
[part$="ThreeWayLabel"]:empty {
font-size: 0;
padding: 0;
}
Expand All @@ -105,20 +111,22 @@
}
input:checked + [part="darkLabel"],
input:checked + [part="lightLabel"] {
input:checked + [part="lightLabel"],
input:checked + [part$="ThreeWayLabel"] {
background-color: var(--${NAME}-active-mode-background-color, transparent);
}
input:checked + [part="darkLabel"]::before,
input:checked + [part="lightLabel"]::before {
input:checked + [part="lightLabel"]::before,
input:checked + [part$="ThreeWayLabel"]::before {
background-color: var(--${NAME}-active-mode-background-color, transparent);
}
input:checked + [part="toggleLabel"]::before {
input:checked + [part="toggleLabel"]::before, input[part="toggleCheckbox"]:checked ~ [part="threeWayRadioWrapper"] [part$="ThreeWayLabel"]::before {
filter: var(--${NAME}-icon-filter, none);
}
input:checked + [part="toggleLabel"] + aside [part="permanentLabel"]::before {
input:checked + [part="toggleLabel"] ~ aside [part="permanentLabel"]::before {
filter: var(--${NAME}-remember-filter, invert(100%));
}
Expand Down Expand Up @@ -164,6 +172,14 @@
<label part="darkLabel" for="d"></label>
<input part="toggleCheckbox" id="t" type="checkbox">
<label part="toggleLabel" for="t"></label>
<span part="threeWayRadioWrapper">
<input part="lightThreeWayRadio" id="3l" name="three-way-mode" type="radio">
<label part="lightThreeWayLabel" for="3l"></label>
<input part="systemThreeWayRadio" id="3s" name="three-way-mode" type="radio">
<label part="systemThreeWayLabel" for="3s"></label>
<input part="darkThreeWayRadio" id="3d" name="three-way-mode" type="radio">
<label part="darkThreeWayLabel" for="3d"></label>
</span>
<aside part="aside">
<input part="permanentCheckbox" id="p" type="checkbox">
<label part="permanentLabel" for="p"></label>
Expand Down

0 comments on commit cca8eda

Please sign in to comment.