Skip to content

Create small theme toggle #45

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.

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

Closed
wants to merge 4 commits into from
Closed
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion public/css/tailwind.css
Original file line number Diff line number Diff line change
@@ -21,7 +21,7 @@
--breakpoint-md: 900px;
--breakpoint-sm: 640px;
--breakpoint-xs: 320px;
--spacing: 8px;
--spacing: 8px;
}

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
2 changes: 1 addition & 1 deletion public/img/dark-icon.svg
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 public/img/light-icon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes.
13 changes: 13 additions & 0 deletions src/_includes/elements/themeSwitch-sm.njk
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<button id="theme-toggle-sm"
class="w-6 h-3 py-1.5 ml-1 rounded-full bg-sii-light-accent dark:bg-sii-dark-hero-background flex items-center transition duration-300 focus:outline-none shadow cursor-pointer">
<div id="theme-toggle-switch-sm" class="flex justify-center items-center w-3 h-3 relative rounded-full transition duration-500 transform -translate-x-1 p-1 text-sii-light-background dark:bg-sii-primary">
<div id="theme-toggle-light-icon-sm" class="w-2 h-2 hidden">
{% svgsprite %}
{% svg "light-icon", "w-2 h-2" %}
</div>
<div id="theme-toggle-dark-icon-sm" class="w-2 h-2 hidden text-sii-dark-integration-panel-text dark:text-sii-light-background">
{% svgsprite %}
{% svg "dark-icon", "w-2 h-2" %}
</div>
</div>
</button>
2 changes: 1 addition & 1 deletion src/_includes/partials/_hero.njk
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<div class="flex justify-center md:justify-start">
<div class="flex flex-col gap-0.75 bg-sii-light-hero-background dark:bg-sii-dark-hero-background p-0.75 rounded-lg grow-1 flex-wrap xs:max-w-31.25 sm:max-w-72.25">
<div class="flex flex-col gap-0.75 bg-sii-light-hero-background dark:bg-sii-dark-hero-background p-0.75 rounded-lg grow-1 flex-wrap">
<div class="grid grid-cols-2 gap-0.75">
<div class="bg-sii-light-widget-background dark:bg-sii-dark-widget-background rounded-lg p-1 flex flex-col gap-1.5 md:max-w-35 grow-1">
<div>
32 changes: 32 additions & 0 deletions src/index.njk
Original file line number Diff line number Diff line change
@@ -72,6 +72,8 @@ image: /img/site.png
const themeToggle = document.getElementById('theme-toggle-switch')
const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
const themeToggleDarkIconSm = document.getElementById('theme-toggle-dark-icon-sm');
const themeToggleLightIconSm = document.getElementById('theme-toggle-light-icon-sm');
const initialTheme = document.documentElement.dataset.theme;

if (initialTheme === 'dark') {
@@ -101,6 +103,36 @@ image: /img/site.png
themeToggle.classList.remove('bg-sii-dark-hero-background','translate-x-full')
}
});

const themeToggleSm = document.getElementById('theme-toggle-switch-sm')

if (initialTheme === 'dark') {
themeToggleDarkIconSm.classList.remove('hidden');
themeToggleSm.classList.remove('bg-sii-primary','-translate-x-1')
themeToggleSm.classList.add('bg-sii-dark-hero-background','translate-x-full')
} else {
themeToggleLightIconSm.classList.remove('hidden');
themeToggleSm.classList.add('bg-sii-primary','-translate-x-1')
themeToggleSm.classList.remove('bg-sii-dark-hero-background','translate-x-full')
}

const themeToggleBtnSm = document.getElementById('theme-toggle-sm');
themeToggleBtnSm.addEventListener('click', function() {
const theme = document.documentElement.dataset.theme;

themeToggleDarkIconSm.classList.toggle('hidden');
themeToggleLightIconSm.classList.toggle('hidden');

if (theme === 'light') {
document.documentElement.dataset.theme = 'dark';
themeToggleSm.classList.remove('bg-sii-primary','-translate-x-1')
themeToggleSm.classList.add('bg-sii-dark-hero-background','translate-x-full')
} else {
document.documentElement.dataset.theme = 'light';
themeToggleSm.classList.add('bg-sii-primary','-translate-x-1')
themeToggleSm.classList.remove('bg-sii-dark-hero-background','translate-x-full')
}
});
</script>
</body>
</html>