|
|
|
|
:root {
|
|
|
|
|
--primary-color: hsl(0, 0%, 100%);
|
|
|
|
|
--primary-color-50: hsla(0, 0%, 100%, 50%);
|
|
|
|
|
--secondary-color: hsl(0, 0%, 0%);
|
|
|
|
|
--secondary-color-heading: hsl(0, 0%, 17%);
|
|
|
|
|
--secondary-color-shaded: hsl(0, 0%, 9%);
|
|
|
|
|
--anchor-color: hsl(210, 100%, 60%);
|
|
|
|
|
--color-http: hsl(0, 0%, 17%);
|
|
|
|
|
--color-https: hsl(195, 53%, 21%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#toggle-theme-switch:checked ~ #theming-root {
|
|
|
|
|
--primary-color: hsl(0, 0%, 0%);
|
|
|
|
|
--primary-color-50: hsla(0, 0%, 0%, 50%);
|
|
|
|
|
--secondary-color: hsl(0, 0%, 100%);
|
|
|
|
|
--secondary-color-heading: hsl(0, 0%, 83%);
|
|
|
|
|
--secondary-color-shaded: hsl(0, 0%, 91%);
|
|
|
|
|
--anchor-color: hsl(210, 100%, 40%);
|
|
|
|
|
--color-http: hsl(0, 0%, 83%);
|
|
|
|
|
--color-https: hsl(195, 53%, 79%);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.feather-icon {
|
|
|
|
|
filter: invert();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#toggle-theme-switch:checked ~ #theming-root .feather-icon {
|
|
|
|
|
filter: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:not(#toggle-theme-switch:checked ~ #theming-root *).light-theme-only {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
#toggle-theme-switch:checked ~ #theming-root .dark-theme-only {
|
|
|
|
|
display: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:root { text-underline-offset: 0.2em; }
|
