fosc/new.fosc.space
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add themechange v0.1

Browse Source
This commit is contained in:
Pablo Moyano 2023-10-06 18:11:59 +02:00
parent f57e2d5b1c
commit 70b7242199
2 changed files with 27 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
src/layouts/example.astro
View File

@ -16,26 +16,6 @@ const { title } = Astro.props;
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<title>{title}</title> <title>{title}</title>
<!-- Theme manager -->
<script is:inline>
// ☝️ This script prevent the FART effect.
if (localStorage.getItem("theme") === null) {
document.documentElement.setAttribute("data-theme", "light");
} else
document.documentElement.setAttribute(
"data-theme",
localStorage.getItem("theme")
);
// "theme" LocalStorage value is set by the package to remember user preference.
// The value is checked and applyed before rendering anything.
</script>
<script>
import { themeChange } from 'theme-change';
themeChange();
// 👆 you could import the CDN directly instead of these two lines
</script>
</head> </head>
<body> <body>

27
src/pages/index.astro
View File

@ -17,6 +17,25 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>FOSC</title> <title>FOSC</title>
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<!-- Theme manager -->
<script is:inline>
// ☝️ This script prevent the FART effect.
if (localStorage.getItem("theme") === null) {
document.documentElement.setAttribute("data-theme", "light");
} else
document.documentElement.setAttribute(
"data-theme",
localStorage.getItem("theme")
);
// "theme" LocalStorage value is set by the package to remember user preference.
// The value is checked and applyed before rendering anything.
</script>
<script>
import { themeChange } from 'theme-change';
themeChange();
// 👆 you could import the CDN directly instead of these two lines
</script>
</head> </head>
<body class="bg-fixed bg-cover bg-center bg-repeat-y"> <body class="bg-fixed bg-cover bg-center bg-repeat-y">
@ -35,6 +54,14 @@ import foscLogo from "../assets/img/fosc-logo-old.png";
<HackerText text="FOSC"></HackerText> <HackerText text="FOSC"></HackerText>
</div> </div>
<div class="container mx-auto flex justify-center items-center">
<button class="btn" data-set-theme="" data-act-class="ACTIVECLASS">none</button>
<button class="btn" data-set-theme="light" data-act-class="ACTIVECLASS">light</button>
<button class="btn" data-set-theme="dark" data-act-class="ACTIVECLASS">dark</button>
<button class="btn" data-set-theme="cyberpunk" data-act-class="ACTIVECLASS">cyber</button>
</div>
</div> </div>
</div> </div>
</body> </body>