reonokiy/blog
1
0
Fork 0
mirror of https://github.com/reonokiy/blog.nokiy.net.git synced 2025-06-17 12:01:33 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update theme guide

Browse source
This commit is contained in:
radishzzz 2025-03-26 18:45:03 +00:00
parent 0545b1d0e5
commit f3fc03b8d6
7 changed files with 878 additions and 200 deletions
Download patch file Download diff file Expand all files Collapse all files

90
src/components/Comments/Waline.astro
View file

@ -162,7 +162,7 @@ document.addEventListener('astro:after-swap', initWaline)
}
#waline .wl-time {
color: color-mix(in oklch, var(--waline-theme-color), transparent 20%);
color: oklch(var(--un-preset-theme-colors-primary) / 0.75);
}
#waline .wl-edit,
@ -177,70 +177,34 @@ document.addEventListener('astro:after-swap', initWaline)
<!-- Official CSS Variables >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> -->
<!-- https://waline.js.org/reference/client/style.html -->
<style
define:vars={{
lightPrimary,
lightSecondary,
lightBackground,
darkPrimary,
darkSecondary,
darkBackground,
}}
>
#waline {
/* Regular Colors */
--waline-white: var(--lightBackground);
--waline-light-grey: color-mix(in oklch, var(--lightPrimary), transparent 75%);
--waline-dark-grey: var(--lightSecondary);
<style>
#waline {
/* Regular Colors */
--waline-white: var(--uno-colors-background);
--waline-light-grey: oklch(var(--un-preset-theme-colors-primary) / 0.25);
--waline-dark-grey: var(--uno-colors-secondary);
/* Theme Colors */
--waline-theme-color: var(--lightPrimary);
--waline-active-color: var(--lightPrimary);
/* Theme Colors */
--waline-theme-color: var(--uno-colors-primary);
--waline-active-color: var(--uno-colors-primary);
/* Layout Colors */
--waline-color: var(--lightSecondary);
--waline-bg-color: var(--lightBackground);
--waline-bg-color-light: var(--lightBackground);
--waline-bg-color-hover: var(--lightBackground);
--waline-border-color: color-mix(in oklch, var(--lightPrimary), transparent 75%);
--waline-disable-bg-color: color-mix(in oklch, var(--lightSecondary), transparent 92%);
--waline-disable-color: var(--lightPrimary);
/* Layout Colors */
--waline-color: var(--uno-colors-secondary);
--waline-bg-color: var(--uno-colors-background);
--waline-bg-color-light: var(--uno-colors-background);
--waline-bg-color-hover: var(--uno-colors-background);
--waline-border-color: oklch(var(--un-preset-theme-colors-primary) / 0.25);
--waline-disable-bg-color: oklch(var(--un-preset-theme-colors-secondary) / 0.05);
--waline-disable-color: var(--uno-colors-primary);
/* Special Colors */
--waline-bq-color: color-mix(in oklch, var(--lightPrimary), transparent 75%);
/* Special Colors */
--waline-bq-color: oklch(var(--un-preset-theme-colors-primary) / 0.25);
/* Information */
--waline-info-bg-color: var(--lightBackground);
--waline-info-color: color-mix(in oklch, var(--lightPrimary), transparent 75%);
/* Information */
--waline-info-bg-color: var(--uno-colors-background);
--waline-info-color: oklch(var(--un-preset-theme-colors-primary) / 0.25);
/* Rendering Options */
--waline-avatar-radius: 20%;
}
html.dark #waline {
/* Regular Colors */
--waline-white: var(--darkBackground);
--waline-light-grey: color-mix(in oklch, var(--darkPrimary), transparent 75%);
--waline-dark-grey: var(--darkSecondary);
/* Theme Colors */
--waline-theme-color: var(--darkPrimary);
--waline-active-color: var(--darkPrimary);
/* Layout Colors */
--waline-color: var(--darkSecondary);
--waline-bg-color: var(--darkBackground);
--waline-bg-color-light: var(--darkBackground);
--waline-bg-color-hover: var(--darkBackground);
--waline-border-color: color-mix(in oklch, var(--darkPrimary), transparent 75%);
--waline-disable-bg-color: color-mix(in oklch, var(--darkSecondary), transparent 92%);
--waline-disable-color: var(--darkPrimary);
/* Special Colors */
--waline-bq-color: color-mix(in oklch, var(--darkPrimary), transparent 75%);
/* Information */
--waline-info-bg-color: var(--darkBackground);
--waline-info-color: color-mix(in oklch, var(--darkPrimary), transparent 75%);
}
</style>
/* Rendering Options */
--waline-avatar-radius: 0.5rem;
}
</style>