quickshell/quickshell-web
3
1
Fork 0
Code Issues Projects Activity

fix: theme switching causing constant color transitions, too much shadow on codeblocks in light theme

Browse source
This commit is contained in:
Oleksandr 2026-02-17 19:02:00 +02:00
parent 8848037c63
commit 5d43f69d69
Signed by: Xanazf
GPG key ID: 821EEC32761AC17C
52 changed files with 8088 additions and 3601 deletions
Download patch file Download diff file Expand all files Collapse all files

82
src/layouts/DocsLayout.astro
View file

@ -17,7 +17,7 @@ interface Props {
}
const { title, description, headings, type } = Astro.props;
let url = Astro.url.pathname.split("/").filter(s => s !== "");
let url = Astro.url.pathname.split("/").filter((s: string) => s !== "");
const breadcrumbs = [
{
@ -57,13 +57,19 @@ for (const segment of url) {
class="theme-toggle-input"
aria-label="Toggle theme (light/dark)"
style="display: none;"
/>
<Header title={title} headings={headings} type={type}/>
>
<Header title={title} headings={headings} type={type} />
<div class="docslayout-root">
<Nav mobile={false}/>
<Nav mobile={false} />
<div class="docslayout-inner" data-pagefind-body>
<Breadcrumbs crumbs={breadcrumbs} linkTextFormat="sentence" truncated={true} data-pagefind-ignore>
<Breadcrumbs
crumbs={breadcrumbs}
linkTextFormat="sentence"
truncated={true}
data-pagefind-ignore
>
<svg
<!-- @ts-expect-error -->
slot="index"
xmlns="http://www.w3.org/2000/svg"
width="1em"
@ -74,25 +80,27 @@ for (const segment of url) {
<path
fill="currentColor"
d="m219.31 108.68l-80-80a16 16 0 0 0-22.62 0l-80 80A15.87 15.87 0 0 0 32 120v96a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-56h32v56a8 8 0 0 0 8 8h64a8 8 0 0 0 8-8v-96a15.87 15.87 0 0 0-4.69-11.32M208 208h-48v-56a8 8 0 0 0-8-8h-48a8 8 0 0 0-8 8v56H48v-88l80-80l80 80Z"
></path></svg
>
></path>
</svg>
<svg
<!-- @ts-expect-error -->
slot="separator"
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
viewBox="0 0 256 256"
><path
>
<path
fill="currentColor"
d="m181.66 133.66l-80 80a8 8 0 0 1-11.32-11.32L164.69 128L90.34 53.66a8 8 0 0 1 11.32-11.32l80 80a8 8 0 0 1 0 11.32"
></path></svg
>
></path>
</svg>
</Breadcrumbs>
<slot/>
<slot />
</div>
<slot name="alongside-content"/>
<slot name="alongside-content" />
</div>
<Footer/>
<Footer />
<script>
import "@config/styling/animations_helper.ts";
import "@config/styling/theme_persistence.ts";
@ -101,32 +109,32 @@ for (const segment of url) {
</html>
<script>
// FIXME: need to make this work properly, or fold into the markdown processor
let headings = document.getElementsByClassName("heading")
if (headings.length > 0) {
//@ts-expect-error
for (const heading of headings) {
let button = heading.querySelector("h2")
if (button) {
button.onclick = () => {
let link = window.location.href.split("#")[0];
link += `#${button.textContent?.trimEnd().replaceAll(" ", "-").toLowerCase()}`;
window.location.href = link
navigator.clipboard.writeText(link);
heading.classList.toggle("copied")
setTimeout(() => heading.classList.remove("copied"), 1000);
let headings = document.getElementsByClassName("heading");
if (headings.length > 0) {
//@ts-expect-error
for (const heading of headings) {
let button = heading.querySelector("h2");
if (button) {
button.onclick = () => {
let link = window.location.href.split("#")[0];
link += `#${button.textContent?.trimEnd().replaceAll(" ", "-").toLowerCase()}`;
window.location.href = link;
navigator.clipboard.writeText(link);
heading.classList.toggle("copied");
setTimeout(() => heading.classList.remove("copied"), 1000);
};
}
}
let spanButton = heading.querySelector("span")
if (spanButton) {
spanButton.onclick = () => {
let link = window.location.href.split("#")[0];
link += `#${spanButton.textContent?.trim().replaceAll(" ", "-").toLowerCase()}`;
window.location.href = link
navigator.clipboard.writeText(link);
spanButton.classList.toggle("copied")
setTimeout(() => heading.classList.remove("copied"), 1000);
let spanButton = heading.querySelector("span");
if (spanButton) {
spanButton.onclick = () => {
let link = window.location.href.split("#")[0];
link += `#${spanButton.textContent?.trim().replaceAll(" ", "-").toLowerCase()}`;
window.location.href = link;
navigator.clipboard.writeText(link);
spanButton.classList.toggle("copied");
setTimeout(() => heading.classList.remove("copied"), 1000);
};
}
}
}
}
</script>