Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add system theme option #586

Merged
merged 14 commits into from
Jul 24, 2024
Merged

feat: add system theme option #586

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
7704794
feat: add system theme option
akulsr0 Jun 18, 2024
ea91f79
chore: add translations for system word
akulsr0 Jun 18, 2024
8eb2365
chore: handle playground theming
akulsr0 Jun 18, 2024
fe4771c
refactor: remove seperate key for system theme
akulsr0 Jun 21, 2024
8a3892a
refactor: remove unintended semicolon
akulsr0 Jun 21, 2024
5554efe
chore: add `aria-hidden=true` to svg icon
akulsr0 Jun 21, 2024
f41924d
chore: add `aria-hidden=true` to svg icon
akulsr0 Jun 21, 2024
f2cabb3
fix: footer language option getting out of screen
akulsr0 Jun 24, 2024
cc86347
Merge branch 'main' into akul/add-system-theme-option
akulsr0 Jun 27, 2024
bf8f2ac
refactor: formatting fix
akulsr0 Jul 10, 2024
61752f8
refactor: pr review changes
akulsr0 Jul 13, 2024
f2823df
chore: theme switcher padding fix
akulsr0 Jul 15, 2024
8adcb8d
refactor: pr review changes
akulsr0 Jul 18, 2024
4c769b4
fix: lang select cutting
akulsr0 Jul 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Merge branch 'main' into akul/add-system-theme-option
  • Loading branch information
@akulsr0
akulsr0 authored Jun 27, 2024
commit cc86347ed0eee4db189ce3dfe4e95acd7865f00c
118 changes: 71 additions & 47 deletions src/assets/js/themes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,65 +2,89 @@
(function () {
var enableToggle = function (btn) {
btn.setAttribute("aria-pressed", "true");
}
};
var disableToggle = function (btns) {
btns.forEach(btn => btn.setAttribute("aria-pressed", "false"));
}
btns.forEach((btn) => btn.setAttribute("aria-pressed", "false"));
};
var setTheme = function (theme) {
if (theme === "system") {
theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? "dark" : "light";
document.documentElement.setAttribute('data-theme', theme);
theme = window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light";
document.documentElement.setAttribute("data-theme", theme);
window.localStorage.setItem("theme", "system");
} else {
document.documentElement.setAttribute('data-theme', theme);
document.documentElement.setAttribute("data-theme", theme);
window.localStorage.setItem("theme", theme);
}
}
};

var theme = window.localStorage.getItem("theme");

document.addEventListener('DOMContentLoaded', function () {
var switcher = document.getElementById('js-theme-switcher');
switcher.removeAttribute('hidden');
var light_theme_toggle = document.getElementById('light-theme-toggle'),
dark_theme_toggle = document.getElementById('dark-theme-toggle'),
system_theme_toggle = document.getElementById('system-theme-toggle');

if (!theme || theme === "system") {
enableToggle(system_theme_toggle);
disableToggle([light_theme_toggle, dark_theme_toggle]);
} else if (theme === "light") {
enableToggle(light_theme_toggle);
disableToggle([system_theme_toggle, dark_theme_toggle]);
} else if (theme === "dark") {
enableToggle(dark_theme_toggle);
disableToggle([system_theme_toggle, light_theme_toggle]);
}
document.addEventListener(
"DOMContentLoaded",
function () {
var switcher = document.getElementById("js-theme-switcher");
switcher.removeAttribute("hidden");
var light_theme_toggle =
document.getElementById("light-theme-toggle"),
dark_theme_toggle =
document.getElementById("dark-theme-toggle"),
system_theme_toggle = document.getElementById(
"system-theme-toggle"
);

light_theme_toggle.addEventListener("click", function () {
enableToggle(light_theme_toggle);
theme = this.getAttribute('data-theme');
setTheme(theme);
disableToggle([system_theme_toggle, dark_theme_toggle]);
}, false);
dark_theme_toggle.addEventListener("click", function () {
enableToggle(dark_theme_toggle);
theme = this.getAttribute('data-theme');
setTheme(theme);
disableToggle([system_theme_toggle, light_theme_toggle]);
}, false);
system_theme_toggle.addEventListener("click", function () {
enableToggle(system_theme_toggle);
disableToggle([light_theme_toggle, dark_theme_toggle]);
setTheme("system");
}, false);
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
var currentTheme = window.localStorage.getItem("theme");
if (currentTheme === "system" || !currentTheme) {
if (!theme || theme === "system") {
enableToggle(system_theme_toggle);
disableToggle([light_theme_toggle, dark_theme_toggle]);
setTheme("system");
} else if (theme === "light") {
enableToggle(light_theme_toggle);
disableToggle([system_theme_toggle, dark_theme_toggle]);
} else if (theme === "dark") {
enableToggle(dark_theme_toggle);
disableToggle([system_theme_toggle, light_theme_toggle]);
}
});
}, false);

light_theme_toggle.addEventListener(
"click",
function () {
enableToggle(light_theme_toggle);
theme = this.getAttribute("data-theme");
setTheme(theme);
disableToggle([system_theme_toggle, dark_theme_toggle]);
},
false
);
dark_theme_toggle.addEventListener(
"click",
function () {
enableToggle(dark_theme_toggle);
theme = this.getAttribute("data-theme");
setTheme(theme);
disableToggle([system_theme_toggle, light_theme_toggle]);
},
false
);
system_theme_toggle.addEventListener(
"click",
function () {
enableToggle(system_theme_toggle);
disableToggle([light_theme_toggle, dark_theme_toggle]);
setTheme("system");
},
false
);
window
.matchMedia("(prefers-color-scheme: dark)")
.addEventListener("change", (event) => {
var currentTheme = window.localStorage.getItem("theme");
if (currentTheme === "system" || !currentTheme) {
enableToggle(system_theme_toggle);
disableToggle([light_theme_toggle, dark_theme_toggle]);
setTheme("system");
}
});
},
false
);
})();
94 changes: 47 additions & 47 deletions src/assets/scss/components/theme-switcher.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,23 @@
.theme-switcher {
display: inline-flex;
align-items: center;
gap: 0.5rem;
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
position: relative;
}

.theme-switcher-label.theme-switcher-label {
font-size: inherit;
color: inherit;
font: inherit;
font-family: var(--text-font);
margin: 0;
font-size: inherit;
color: inherit;
font: inherit;
font-family: var(--text-font);
margin: 0;
}

.theme-switcher__buttons {
display: flex;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
background-color: var(--body-background-color);
display: flex;
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
background-color: var(--body-background-color);
}

.theme-switcher__button {
Expand All @@ -26,52 +26,52 @@
display: inline-flex;
align-items: center;
margin: 0;
gap: .25rem;
gap: 0.25rem;
color: inherit;

&:first-of-type {
border-right: 0.5px solid var(--border-color);
border-inline-end: 0.5px solid var(--border-color);
}
&:first-of-type {
border-right: 0.5px solid var(--border-color);
border-inline-end: 0.5px solid var(--border-color);
}

&:last-of-type {
border-left: 0.5px solid var(--border-color);
border-inline-start: 0.5px solid var(--border-color);
}
&:last-of-type {
border-left: 0.5px solid var(--border-color);
border-inline-start: 0.5px solid var(--border-color);
}

.theme-switcher__icon {
color: var(--icon-color);
}
.theme-switcher__icon {
color: var(--icon-color);
}

&:hover {
.theme-switcher__icon {
color: var(--link-color);
}
}
&:hover {
.theme-switcher__icon {
color: var(--link-color);
}
}
}

.theme-switcher__button[aria-pressed="true"] {
color: var(--link-color);
color: var(--link-color);

.theme-switcher__icon {
color: var(--link-color);
}
.theme-switcher__icon {
color: var(--link-color);
}

&:hover {
.theme-switcher__icon {
color: var(--link-color);
}
}
&:hover {
.theme-switcher__icon {
color: var(--link-color);
}
}
}

.theme-switcher__button[aria-pressed="false"] {
.theme-switcher__icon {
color: var(--icon-color);
}
.theme-switcher__icon {
color: var(--icon-color);
}

&:hover {
.theme-switcher__icon {
color: var(--link-color);
}
}
&:hover {
.theme-switcher__icon {
color: var(--link-color);
}
}
}
92 changes: 46 additions & 46 deletions src/assets/scss/footer.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,61 +1,61 @@
.site-footer {
text-align: center;
background-color: var(--footer-background-color);
border-top: 1px solid var(--divider-color);
border-block-start: 1px solid var(--divider-color);
text-align: center;
background-color: var(--footer-background-color);
border-top: 1px solid var(--divider-color);
border-block-start: 1px solid var(--divider-color);
}

.footer-cta {
.logo {
margin-bottom: 2.5rem;
margin-block-end: 2.5rem;
}
.logo {
margin-bottom: 2.5rem;
margin-block-end: 2.5rem;
}

.section-supporting-text {
margin-bottom: 2.5rem;
margin-block-end: 2.5rem;
}
.section-supporting-text {
margin-bottom: 2.5rem;
margin-block-end: 2.5rem;
}

.eslint-actions {
justify-content: center;
}
.eslint-actions {
justify-content: center;
}
}

.footer-legal-links {
ul {
li {
display: inline-block;
margin-right: 0.5rem;
margin-inline-end: 0.5rem;
ul {
li {
display: inline-block;
margin-right: 0.5rem;
margin-inline-end: 0.5rem;

&:not(:last-of-type)::after {
content: "|";
margin-left: 0.5rem;
margin-inline-start: 0.5rem;
}
}
}
&:not(:last-of-type)::after {
content: "|";
margin-left: 0.5rem;
margin-inline-start: 0.5rem;
}
}
}
}

.footer-legal-section {
font-size: var(--step--1);
padding: 2rem 1rem;
font-size: var(--step--1);
padding: 2rem 1rem;
}

.copyright {
max-width: 1100px;
margin: 0 auto;
max-width: 1100px;
margin: 0 auto;
}

.footer-middle {
padding-top: 2rem;
padding-bottom: 2rem;
padding-block-start: 2rem;
padding-block-end: 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
padding-top: 2rem;
padding-bottom: 2rem;
padding-block-start: 2rem;
padding-block-end: 2rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;

@media all and (min-width: 800px) {
flex-direction: row;
Expand All @@ -64,12 +64,12 @@
}

.playground-footer {
padding: 1rem;
padding-bottom: 2rem;
font-size: 0.875rem;
padding: 1rem;
padding-bottom: 2rem;
font-size: 0.875rem;

.social-icons,
.copyright {
margin-bottom: 1rem;
}
.social-icons,
.copyright {
margin-bottom: 1rem;
}
}
Loading
Loading
You are viewing a condensed version of this merge commit. You can view the full changes here.