Add light/dark mode support with CSS variables

This commit is contained in:
Jennie Robinson Faber 2025-10-06 19:54:20 +01:00
parent 970b185151
commit fb02688166
25 changed files with 1293 additions and 1177 deletions

View file

@ -4,13 +4,13 @@
<section class="mb-24">
<div class="relative">
<h1
class="text-6xl md:text-8xl font-bold text-stone-100 ethereal-text leading-tight mb-8"
class="text-6xl md:text-8xl font-bold text-ghost-100 ethereal-text leading-tight mb-8"
>
Get in Touch
</h1>
<div class="mb-16">
<p class="text-stone-100 text-lg max-w-md">
<p class="text-ghost-100 text-lg max-w-md">
We'd be happy to answer any questions<br />
you might have about Ghost Guild
</p>
@ -21,7 +21,7 @@
<!-- Contact Form -->
<section class="mb-32 relative">
<div class="mb-12">
<h2 class="text-3xl font-light text-stone-200 mb-4">
<h2 class="text-3xl font-light text-ghost-200 mb-4">
Send us a message (or email hello@ghostguild.org)
</h2>
</div>
@ -79,7 +79,7 @@
:loading="isSubmitting"
:disabled="!isFormValid"
size="xl"
class="px-12 border border-ghost-600 text-stone-200 hover:bg-ghost-800 hover:border-whisper-500 hover:ethereal-text transition-all duration-500"
class="px-12 border border-ghost-600 text-ghost-200 hover:bg-ghost-800 hover:border-whisper-500 hover:ethereal-text transition-all duration-500"
>
Send Message
</UButton>
@ -98,7 +98,7 @@
</div>
<div v-if="error" class="mt-6 p-4 border border-ghost-700 bg-ghost-900">
<p class="text-stone-300 text-center">
<p class="text-ghost-300 text-center">
{{ error }}
</p>
</div>