ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Using color-scheme and light-dark() to implement dark mode (#154)

Browse source 
* Lint fixes.

* Implement light-dark().

* Lint css with biome, remove stylelint.

* Biome lint fixes.

* Dark mode adjustments.

* Style bug fixes.

* Colour adjustments.

* Move header and footer styles to base.

* Site header adjustments.

* Removing jQuery and umbrella libs. They where great but not needed anymore.

* Add colorScheme to optionally lock light/dark.

* Update README.

* Biome adjustments.
This commit is contained in:
Fredrik Jonsson 2026-05-28 08:18:04 +02:00 • committed by GitHub
commit 16c47eea9d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 276 additions and 2130 deletions
Download patch file Download diff file Expand all files Collapse all files

19
assets/css/components/_button.css
View file

@ -1,5 +1,3 @@
/* stylelint-disable no-duplicate-selectors */
/* Button */
.button,
@ -11,7 +9,7 @@
text-decoration: none;
text-align: center;
width: fit-content;
padding: .2rem 1rem;
padding: 0.2rem 1rem;
/* Improve usability and consistency of cursor style between image-type `input` and others. */
cursor: pointer;
@ -36,7 +34,7 @@
.button--small {
font-size: var(--fs-xs);
padding: .2rem .75rem;
padding: 0.2rem 0.75rem;
}
.button--alt {
@ -65,7 +63,7 @@
&:active {
color: var(--color-button-text);
background: var(--color-success);
}
}
}
.button--decline {
@ -98,18 +96,19 @@ other variations. */
[type='button'],
[type='submit'] {
&:disabled {
background-color: var(--color-grey-200);
border: 1px solid var(--color-button-disabled);
color: var(--color-disabled);
background-color: var(--color-disabled-alt);
border: 1px solid var(--color-disabled);
background-image: none;
text-shadow: none;
cursor: default;
color: var(--color-button-disabled);
&:hover,
&:focus,
&:active {
/* Override any link underlines and color changes. */
color: var(--color-button-disabled);
color: var(--color-disabled);
background-color: var(--color-disabled-alt);
text-decoration: none;
}
}
@ -127,7 +126,7 @@ textarea {
@media (min-width: 666px) {
input:only-of-type {
&:has(+ [type='submit']) {
margin-inline-end: .5rem;
margin-inline-end: 0.5rem;
}
}
}