Move themes into their own style tag in Layout.astro

This commit is contained in:
wearrrrr 2024-07-27 21:22:36 -05:00
parent 0fe23c7020
commit e7aa57adcb
2 changed files with 53 additions and 43 deletions

View file

@ -52,7 +52,6 @@ const { title, optionalPreloads } = Astro.props;
window.dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-P1JX4G9KSF");
</script>
<script>
@ -87,15 +86,6 @@ const { title, optionalPreloads } = Astro.props;
--background-color: black;
--text-color: #fff;
}
[data-theme="alu"] {
--background-color: #211d29;
--background-highlight: #35314a;
--accent-color: #624978;
--accent-color-brighter: #543d65;
--text-color: #fff;
--text-color-accent: #c7c7c7;
--dropdown-background-color: #262539;
}
* {
box-sizing: border-box;
}
@ -148,39 +138,6 @@ const { title, optionalPreloads } = Astro.props;
font-size: 16px;
}
[data-theme="mocha"] {
/* Catppucin Mocha theme */
--background-color: #1e1e2e;
--background-highlight: #45475a;
--accent-color: #181825;
--accent-color-brighter: #242539;
--text-color: #cdd6f4;
--text-color-accent: #bac2de;
--dropdown-background-color: #32324e;
}
[data-theme="macchiato"] {
/* Catppuccin Macchiato Theme */
--background-color: #24273a;
--background-highlight: #494d64;
--accent-color: #1e2030;
--accent-color-brighter: #2a2d42;
--text-color: #cad3f5;
--text-color-accent: #b8c0e0;
--dropdown-background-color: #323550;
}
[data-theme="rose_pine"] {
/* Rosé Pine Theme */
--background-color: #191724;
--background-highlight: #1f1d2e;
--accent-color: #26233a;
--accent-color-brighter: #2e2b4a;
--text-color: #e0def4;
--text-color-accent: #c7c5e0;
--dropdown-background-color: #1f1d2e;
}
.skip-to-main-content-link {
position: absolute;
top: 10px;
@ -330,5 +287,48 @@ const { title, optionalPreloads } = Astro.props;
border: 2px solid var(--text-color);
}
</style>
<style is:global>
[data-theme="alu"] {
--background-color: #211d29;
--background-highlight: #35314a;
--accent-color: #624978;
--accent-color-brighter: #543d65;
--text-color: #fff;
--text-color-accent: #c7c7c7;
--dropdown-background-color: #262539;
}
[data-theme="mocha"] {
/* Catppucin Mocha theme */
--background-color: #1e1e2e;
--background-highlight: #45475a;
--accent-color: #181825;
--accent-color-brighter: #242539;
--text-color: #cdd6f4;
--text-color-accent: #bac2de;
--dropdown-background-color: #32324e;
}
[data-theme="macchiato"] {
/* Catppuccin Macchiato Theme */
--background-color: #24273a;
--background-highlight: #494d64;
--accent-color: #1e2030;
--accent-color-brighter: #2a2d42;
--text-color: #cad3f5;
--text-color-accent: #b8c0e0;
--dropdown-background-color: #323550;
}
[data-theme="rose_pine"] {
/* Rosé Pine Theme */
--background-color: #191724;
--background-highlight: #1f1d2e;
--accent-color: #26233a;
--accent-color-brighter: #2e2b4a;
--text-color: #e0def4;
--text-color-accent: #c7c5e0;
--dropdown-background-color: #1f1d2e;
}
</style>
</body>
</html>

View file

@ -20,6 +20,16 @@ import { ViewTransitions } from "astro:transitions";
<meta property="twitter:description" content="Alu is a sleek web proxy supporting multiple standards of communication, and wide levels of customization." />
<meta property="twitter:image" content="/logo.png" />
<ViewTransitions />
<script src="https://www.googletagmanager.com/gtag/js?id=G-P1JX4G9KSF" is:inline></script>
<script is:inline>
window.dataLayer = window.dataLayer || [];
function gtag() {
window.dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-P1JX4G9KSF");
</script>
<script>
const currentLang = localStorage.getItem("alu__selectedLanguage");
const redirect = (loc: string) => (window.location.href = loc);