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

41
assets/css/components/_messages.css
View file

@ -1,33 +1,42 @@
/* Messages */
.message {
padding: .5rem;
--color-message: var(--color-grey-600);
--color-message-text: light-dark(
oklch(from var(--color-message) l c h),
oklch(from var(--color-message) 100% 0.03 h)
);
--color-message-bg: light-dark(
oklch(from var(--color-message) 100% 0.03 h),
oklch(from var(--color-message) calc(l + 0.07) c h)
);
--color-message-border: light-dark(
oklch(from var(--color-message) calc(l + 0.2) c h),
oklch(from var(--color-message) calc(l - 0.07) c h)
);
padding: 0.5rem;
color: var(--color-message-text);
background-color: var(--color-message-bg);
outline-color: var(--color-message-border);
outline-width: 2px;
outline-style: solid;
width: 95%;
&.success {
background-color: var(--color-success-bg);
color: var(--color-success);
outline-color: var(--color-success);
&.info {
--color-message: var(--color-info);
}
&.info {
background-color: var(--color-info-bg);
color: var(--color-info);
outline-color: var(--color-info);
&.success {
--color-message: var(--color-success);
}
&.warning {
background-color: var(--color-warning-bg);
color: var(--color-warning);
outline-color: var(--color-warning);
--color-message: var(--color-warning);
}
&.error {
background-color: var(--color-error-bg);
color: var(--color-error);
outline-color: var(--color-error);
--color-message: var(--color-error);
}
}
@ -37,6 +46,6 @@
@keyframes --outline-highlight {
50% {
outline-width: .3rem;
outline-width: 0.3rem;
}
}