added theme switcher
This commit is contained in:
parent
e11eda9b3b
commit
f09320161b
7 changed files with 160 additions and 61 deletions
|
@ -39,7 +39,7 @@ sync_assets:
|
||||||
|
|
||||||
# start the application in development
|
# start the application in development
|
||||||
dev:
|
dev:
|
||||||
@make -j5 templ server assets sync_assets
|
@make -j4 templ server assets sync_assets
|
||||||
|
|
||||||
# build the application for production. This will compile your app
|
# build the application for production. This will compile your app
|
||||||
# to a single binary with all its assets embedded.
|
# to a single binary with all its assets embedded.
|
||||||
|
|
|
@ -10,47 +10,50 @@
|
||||||
@apply bg-background text-foreground;
|
@apply bg-background text-foreground;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
:root {
|
:root {
|
||||||
--background: 224 71.4% 4.1%;
|
--background: 0 0% 100%;
|
||||||
--foreground: 210 20% 98%;
|
--foreground: 240 10% 3.9%;
|
||||||
--card: 224 71.4% 4.1%;
|
--card: 0 0% 100%;
|
||||||
--card-foreground: 210 20% 98%;
|
--card-foreground: 240 10% 3.9%;
|
||||||
--popover: 224 71.4% 4.1%;
|
--popover: 0 0% 100%;;
|
||||||
--popover-foreground: 210 20% 98%;
|
--popover-foreground: 240 10% 3.9%;
|
||||||
--primary: 263.4 70% 50.4%;
|
--primary: 240 5.9% 10%;
|
||||||
--primary-foreground: 210 20% 98%;
|
--primary-foreground: 0 0% 98%;
|
||||||
--secondary: 215 27.9% 16.9%;
|
--secondary: 240 4.8% 95.9%;
|
||||||
--secondary-foreground: 210 20% 98%;
|
--secondary-foreground: 240 5.9% 10%;
|
||||||
--muted: 215 27.9% 16.9%;
|
--muted: 240 4.8% 95.9%;
|
||||||
--muted-foreground: 217.9 10.6% 64.9%;
|
--muted-foreground: 240 3.8% 46.1%;
|
||||||
--accent: 215 27.9% 16.9%;
|
--accent: 240 4.8% 95.9%;
|
||||||
--accent-foreground: 210 20% 98%;
|
--accent-foreground: 240 5.9% 10%;
|
||||||
--destructive: 0 62.8% 30.6%;
|
--destructive: 0 72.22% 50.59%;
|
||||||
--destructive-foreground: 210 20% 98%;
|
--destructive-foreground: 0 0% 98%;
|
||||||
--border: 215 27.9% 16.9%;
|
--border: 240 5.9% 90%;
|
||||||
--input: 215 27.9% 16.9%;
|
--input: 240 5.9% 90%;
|
||||||
--ring: 263.4 70% 50.4%;
|
--ring: 240 5.9% 10%;
|
||||||
|
--radius: 0.5rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
--background: 224 71.4% 4.1%;
|
--background: 240 10% 3.9%;
|
||||||
--foreground: 210 20% 98%;
|
--foreground: 0 0% 98%;
|
||||||
--card: 224 71.4% 4.1%;
|
--card: 240 10% 3.9%;
|
||||||
--card-foreground: 210 20% 98%;
|
--card-foreground: 0 0% 98%;
|
||||||
--popover: 224 71.4% 4.1%;
|
--popover: 240 10% 3.9%;
|
||||||
--popover-foreground: 210 20% 98%;
|
--popover-foreground: 0 0% 98%;
|
||||||
--primary: 263.4 70% 50.4%;
|
--primary: 0 0% 98%;
|
||||||
--primary-foreground: 210 20% 98%;
|
--primary-foreground: 240 5.9% 10%;
|
||||||
--secondary: 215 27.9% 16.9%;
|
--secondary: 240 3.7% 15.9%;
|
||||||
--secondary-foreground: 210 20% 98%;
|
--secondary-foreground: 0 0% 98%;
|
||||||
--muted: 215 27.9% 16.9%;
|
--muted: 240 3.7% 15.9%;
|
||||||
--muted-foreground: 217.9 10.6% 64.9%;
|
--muted-foreground: 240 5% 64.9%;
|
||||||
--accent: 215 27.9% 16.9%;
|
--accent: 240 3.7% 15.9%;
|
||||||
--accent-foreground: 210 20% 98%;
|
--accent-foreground: 0 0% 98%;
|
||||||
--destructive: 0 62.8% 30.6%;
|
--destructive: 0 62.8% 30.6%;
|
||||||
--destructive-foreground: 210 20% 98%;
|
--destructive-foreground: 0 0% 98%;
|
||||||
--border: 215 27.9% 16.9%;
|
--border: 240 3.7% 15.9%;
|
||||||
--input: 215 27.9% 16.9%;
|
--input: 240 3.7% 15.9%;
|
||||||
--ring: 263.4 70% 50.4%;
|
--ring: 240 4.9% 83.9%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,10 +2,15 @@ package components
|
||||||
|
|
||||||
templ Navigation() {
|
templ Navigation() {
|
||||||
<nav class="border-b py-3">
|
<nav class="border-b py-3">
|
||||||
<div class="container mx-auto">
|
<div class="container mx-auto flex justify-between">
|
||||||
<div class="text-lg text-red-500">
|
<div class="text-lg text-red-500">
|
||||||
<a href="/" class="font-semibold uppercase">Gothkit <span class="text-sm">v0.1</span></a>
|
<a href="/" class="font-semibold uppercase">Gothkit <span class="text-sm">v0.1</span></a>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="flex gap-4 items-center">
|
||||||
|
<div>
|
||||||
|
@ThemeSwitcher()
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
}
|
}
|
||||||
|
|
18
bootstrap/app/views/components/theme_switcher.templ
Normal file
18
bootstrap/app/views/components/theme_switcher.templ
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
package components
|
||||||
|
|
||||||
|
templ ThemeSwitcher() {
|
||||||
|
<div x-show="theme === 'dark'" class="cursor-pointer" @click={ "theme = 'light'" }>
|
||||||
|
@LightIcon()
|
||||||
|
</div>
|
||||||
|
<div x-show="theme === 'light'" class="cursor-pointer" @click={ "theme = 'dark'" }>
|
||||||
|
@DarkIcon()
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
|
||||||
|
templ DarkIcon() {
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun-moon"><path d="M12 8a2.83 2.83 0 0 0 4 4 4 4 0 1 1-4-4"></path><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.9 4.9 1.4 1.4"></path><path d="m17.7 17.7 1.4 1.4"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.3 17.7-1.4 1.4"></path><path d="m19.1 4.9-1.4 1.4"></path></svg>
|
||||||
|
}
|
||||||
|
|
||||||
|
templ LightIcon() {
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg>
|
||||||
|
}
|
|
@ -7,7 +7,7 @@ import (
|
||||||
templ Index() {
|
templ Index() {
|
||||||
@layouts.App() {
|
@layouts.App() {
|
||||||
<div class="mt-20 text-center flex flex-col gap-10">
|
<div class="mt-20 text-center flex flex-col gap-10">
|
||||||
<h1 class="text-3xl lg:text-6xl font-bold">A single binary to change the world</h1>
|
<h1 class="max-w-xl mx-auto tracking-wider text-3xl lg:text-6xl font-bold">A single binary to change the world</h1>
|
||||||
<a class="text-xl underline text-blue-500" target="_blank" href="https://github.com/anthdm/gothkit">Get started by reading the documentation</a>
|
<a class="text-xl underline text-blue-500" target="_blank" href="https://github.com/anthdm/gothkit">Get started by reading the documentation</a>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
|
|
|
@ -22,10 +22,8 @@ templ BaseLayout() {
|
||||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||||
<!-- HTMX -->
|
<!-- HTMX -->
|
||||||
<script src="https://unpkg.com/htmx.org@1.9.9" defer></script>
|
<script src="https://unpkg.com/htmx.org@1.9.9" defer></script>
|
||||||
<!-- Font Awesome -->
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/js/all.min.js"></script>
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body x-data="{theme: 'light'}" :class="theme" lang="en">
|
||||||
{ children... }
|
{ children... }
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -457,25 +457,48 @@ body {
|
||||||
}
|
}
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--background: 224 71.4% 4.1%;
|
--background: 0 0% 100%;
|
||||||
--foreground: 210 20% 98%;
|
--foreground: 240 10% 3.9%;
|
||||||
--card: 224 71.4% 4.1%;
|
--card: 0 0% 100%;
|
||||||
--card-foreground: 210 20% 98%;
|
--card-foreground: 240 10% 3.9%;
|
||||||
--popover: 224 71.4% 4.1%;
|
--popover: 0 0% 100%;
|
||||||
--popover-foreground: 210 20% 98%;
|
--popover-foreground: 240 10% 3.9%;
|
||||||
--primary: 263.4 70% 50.4%;
|
--primary: 240 5.9% 10%;
|
||||||
--primary-foreground: 210 20% 98%;
|
--primary-foreground: 0 0% 98%;
|
||||||
--secondary: 215 27.9% 16.9%;
|
--secondary: 240 4.8% 95.9%;
|
||||||
--secondary-foreground: 210 20% 98%;
|
--secondary-foreground: 240 5.9% 10%;
|
||||||
--muted: 215 27.9% 16.9%;
|
--muted: 240 4.8% 95.9%;
|
||||||
--muted-foreground: 217.9 10.6% 64.9%;
|
--muted-foreground: 240 3.8% 46.1%;
|
||||||
--accent: 215 27.9% 16.9%;
|
--accent: 240 4.8% 95.9%;
|
||||||
--accent-foreground: 210 20% 98%;
|
--accent-foreground: 240 5.9% 10%;
|
||||||
|
--destructive: 0 72.22% 50.59%;
|
||||||
|
--destructive-foreground: 0 0% 98%;
|
||||||
|
--border: 240 5.9% 90%;
|
||||||
|
--input: 240 5.9% 90%;
|
||||||
|
--ring: 240 5.9% 10%;
|
||||||
|
--radius: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: 240 10% 3.9%;
|
||||||
|
--foreground: 0 0% 98%;
|
||||||
|
--card: 240 10% 3.9%;
|
||||||
|
--card-foreground: 0 0% 98%;
|
||||||
|
--popover: 240 10% 3.9%;
|
||||||
|
--popover-foreground: 0 0% 98%;
|
||||||
|
--primary: 0 0% 98%;
|
||||||
|
--primary-foreground: 240 5.9% 10%;
|
||||||
|
--secondary: 240 3.7% 15.9%;
|
||||||
|
--secondary-foreground: 0 0% 98%;
|
||||||
|
--muted: 240 3.7% 15.9%;
|
||||||
|
--muted-foreground: 240 5% 64.9%;
|
||||||
|
--accent: 240 3.7% 15.9%;
|
||||||
|
--accent-foreground: 0 0% 98%;
|
||||||
--destructive: 0 62.8% 30.6%;
|
--destructive: 0 62.8% 30.6%;
|
||||||
--destructive-foreground: 210 20% 98%;
|
--destructive-foreground: 0 0% 98%;
|
||||||
--border: 215 27.9% 16.9%;
|
--border: 240 3.7% 15.9%;
|
||||||
--input: 215 27.9% 16.9%;
|
--input: 240 3.7% 15.9%;
|
||||||
--ring: 263.4 70% 50.4%;
|
--ring: 240 4.9% 83.9%;
|
||||||
}
|
}
|
||||||
|
|
||||||
*, ::before, ::after {
|
*, ::before, ::after {
|
||||||
|
@ -617,6 +640,14 @@ body {
|
||||||
max-width: 80rem;
|
max-width: 80rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.max-w-xl {
|
||||||
|
max-width: 36rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor-pointer {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
.flex-col {
|
.flex-col {
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
@ -629,6 +660,10 @@ body {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.justify-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
.gap-10 {
|
.gap-10 {
|
||||||
gap: 2.5rem;
|
gap: 2.5rem;
|
||||||
}
|
}
|
||||||
|
@ -637,10 +672,35 @@ body {
|
||||||
gap: 1rem;
|
gap: 1rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.gap-8 {
|
||||||
|
gap: 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rounded-full {
|
||||||
|
border-radius: 9999px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.border {
|
||||||
|
border-width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
.border-b {
|
.border-b {
|
||||||
border-bottom-width: 1px;
|
border-bottom-width: 1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.border-black {
|
||||||
|
--tw-border-opacity: 1;
|
||||||
|
border-color: rgb(0 0 0 / var(--tw-border-opacity));
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-1 {
|
||||||
|
padding: 0.25rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.p-1\.5 {
|
||||||
|
padding: 0.375rem;
|
||||||
|
}
|
||||||
|
|
||||||
.py-3 {
|
.py-3 {
|
||||||
padding-top: 0.75rem;
|
padding-top: 0.75rem;
|
||||||
padding-bottom: 0.75rem;
|
padding-bottom: 0.75rem;
|
||||||
|
@ -691,6 +751,14 @@ body {
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.tracking-wide {
|
||||||
|
letter-spacing: 0.025em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tracking-wider {
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
.text-blue-500 {
|
.text-blue-500 {
|
||||||
--tw-text-opacity: 1;
|
--tw-text-opacity: 1;
|
||||||
color: rgb(59 130 246 / var(--tw-text-opacity));
|
color: rgb(59 130 246 / var(--tw-text-opacity));
|
||||||
|
@ -716,3 +784,10 @@ body {
|
||||||
line-height: 1;
|
line-height: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.dark\:border-white {
|
||||||
|
--tw-border-opacity: 1;
|
||||||
|
border-color: rgb(255 255 255 / var(--tw-border-opacity));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue