ParkerTenBroeck/ParkerTenBroeck.github.io
1
0
Fork 0
mirror of https://github.com/ParkerTenBroeck/ParkerTenBroeck.github.io.git synced 2026-06-06 21:14:06 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions

added theme button

Browse source
This commit is contained in:
Parker TenBroeck 2026-01-22 20:32:05 -05:00
parent 8a91886d68
commit 9c49d33cf7
4 changed files with 139 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

2
sass/header.scss
View file

@ -22,6 +22,8 @@ header {
a {
margin-right: 0.5rem;
}
display: flex;
flex-wrap: wrap;
}
padding-bottom: 1em;

59
sass/theme-button.scss Normal file
View file

@ -0,0 +1,59 @@
.no-theme-transition,
.no-theme-transition * {
transition: none !important;
}
.theme-toggle {
width: 2em;
height: 2em;
display: inline-grid;
place-items: center;
border-radius: 7px;
border: 1px solid var(--grey-light);
background: var(--bg-1);
color: var(--fg-0);
cursor: pointer;
padding: 0px;
transition: transform 120ms ease, background-color var(--theme-transition-time) ease,
border-color var(--theme-transition-time) ease;
}
.theme-toggle:hover {
color: var(--fg-1);
}
.theme-toggle:active {
transform: scale(0.96);
}
.theme-toggle .icon {
width: calc(1.6em - 2px);
height: calc(1.6em - 2px);
grid-area: 1 / 1;
transition: transform var(--theme-transition-time) ease, opacity var(--theme-transition-time) ease;
transform-origin: 50% 50%;
}
.theme-toggle .icon-sun {
opacity: 1;
transform: rotate(0deg) scale(1);
}
.theme-toggle .icon-moon {
opacity: 0;
transform: rotate(-25deg) scale(0.85);
transform: translateY(1em);
}
:root[data-theme="dark"] .theme-toggle .icon-sun {
opacity: 0;
transform: rotate(25deg) scale(0.85);
transform: translateY(1em)
}
:root[data-theme="dark"] .theme-toggle .icon-moon {
opacity: 1;
transform: rotate(0deg) scale(1);
}

38
sass/theme.scss
View file

@ -1,34 +1,33 @@
@use "theme-button.scss";
@media (prefers-color-scheme: dark) {
* {
color-scheme: dark!important;
color-scheme: dark !important;
}
}
:root[data-theme="dark"] {
* {
color-scheme: dark!important;
color-scheme: dark !important;
}
}
@media (prefers-color-scheme: light) {
* {
color-scheme: light!important;
color-scheme: light !important;
}
}
:root[data-theme="light"] {
* {
color-scheme: light!important;
color-scheme: light !important;
}
}
* {
transition: color linear 0.25s;
transition: background-color linear 0.25s;
}
.giallo{
background-color: var(--bg-1)!important;
overflow: auto;
border-radius: 5px;
.giallo {
background-color: var(--bg-1) !important;
overflow: auto;
border-radius: 5px;
}
.giallo-l {
@ -36,6 +35,7 @@
min-height: 1lh;
width: 100%;
}
.giallo-ln {
display: inline-block;
user-select: none;
@ -47,19 +47,23 @@
}
:root {
--theme-transition-time: 0.25s;
--bg-0: light-dark(#fff, #1d1d1d);
--bg-1: light-dark(#eee, #131313);
--grey-light: light-dark(#a4a4a4, #777);
--grey-dark: light-dark(#969696, #24292E);
--fg-0: light-dark(#111, #eee);
--fg-1: light-dark(#333, #ccc);
--fg-2: light-dark(#555, #999);
--primary: light-dark(#ffd979, #daa520);
--text-highlight: color-mix(in srgb-linear, var(--primary) 50%, transparent);
--text-highlight: color-mix(in srgb-linear, var(--primary) 50%, transparent);
}
* {
transition: color linear var(--theme-transition-time);
transition: background-color linear var(--theme-transition-time);
}