jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add light/dark mode support with CSS variables

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

100
app/pages/member/profile.vue
View file

@ -17,7 +17,7 @@
<div
class="w-8 h-8 border-4 border-blue-500 border-t-transparent rounded-full animate-spin mx-auto mb-4"
></div>
<p class="text-stone-400">Loading your profile...</p>
<p class="text-ghost-400">Loading your profile...</p>
</div>
</div>
@ -32,7 +32,7 @@
<!-- Basic Information -->
<div>
<h2
class="text-2xl font-semibold mb-8 text-stone-100 ethereal-text"
class="text-2xl font-semibold mb-8 text-ghost-100 ethereal-text"
>
Basic Information
</h2>
@ -105,7 +105,7 @@
:class="
formData.avatar === ghost.value
? 'border-blue-400 bg-blue-500/20'
: 'border-stone-700 bg-stone-800/50 hover:border-stone-600'
: 'border-ghost-700 bg-ghost-800/50 hover:border-ghost-600'
"
@click="formData.avatar = ghost.value"
>
@ -134,7 +134,7 @@
<!-- Professional Info -->
<div>
<h2
class="text-2xl font-semibold mb-8 text-stone-100 ethereal-text"
class="text-2xl font-semibold mb-8 text-ghost-100 ethereal-text"
>
Professional Information
</h2>
@ -203,7 +203,7 @@
<!-- Community Connections -->
<div>
<h2
class="text-2xl font-semibold mb-8 text-stone-100 ethereal-text"
class="text-2xl font-semibold mb-8 text-ghost-100 ethereal-text"
>
Community Connections
</h2>
@ -219,7 +219,7 @@
<!-- Tags input -->
<div>
<label
class="block text-sm font-medium text-stone-200 mb-2"
class="block text-sm font-medium text-ghost-200 mb-2"
>
Skills & Topics
</label>
@ -251,7 +251,7 @@
<!-- Description textarea -->
<div>
<label
class="block text-sm font-medium text-stone-200 mb-2"
class="block text-sm font-medium text-ghost-200 mb-2"
>
Details
</label>
@ -281,7 +281,7 @@
<!-- Tags input -->
<div>
<label
class="block text-sm font-medium text-stone-200 mb-2"
class="block text-sm font-medium text-ghost-200 mb-2"
>
Skills & Topics
</label>
@ -313,7 +313,7 @@
<!-- Description textarea -->
<div>
<label
class="block text-sm font-medium text-stone-200 mb-2"
class="block text-sm font-medium text-ghost-200 mb-2"
>
Details
</label>
@ -338,7 +338,7 @@
<!-- Peer Support -->
<div>
<h2
class="text-2xl font-semibold mb-8 text-stone-100 ethereal-text"
class="text-2xl font-semibold mb-8 text-ghost-100 ethereal-text"
>
Peer Support
</h2>
@ -346,7 +346,7 @@
<div
class="mb-6 backdrop-blur-sm bg-purple-500/10 border border-purple-500/30 rounded-lg p-4"
>
<p class="text-stone-300 text-sm leading-relaxed">
<p class="text-ghost-300 text-sm leading-relaxed">
Offer guidance to fellow members through the
<NuxtLink
to="/peer-support"
@ -362,10 +362,10 @@
<div class="flex items-start gap-4">
<USwitch v-model="formData.peerSupportEnabled" />
<div>
<p class="font-medium text-stone-200">
<p class="font-medium text-ghost-200">
Offer Peer Support
</p>
<p class="text-sm text-stone-400 mt-1">
<p class="text-sm text-ghost-400 mt-1">
Make yourself available to support other members
</p>
</div>
@ -435,20 +435,20 @@
<label
v-for="topic in availableSupportTopics"
:key="topic"
class="flex items-center gap-3 p-3 rounded-lg border border-stone-700 hover:border-purple-500/50 transition-colors cursor-pointer"
class="flex items-center gap-3 p-3 rounded-lg border border-ghost-700 hover:border-purple-500/50 transition-colors cursor-pointer"
:class="
formData.peerSupportSupportTopics.includes(topic)
? 'bg-purple-500/10 border-purple-500/50'
: 'bg-stone-900/50'
: 'bg-ghost-900/50'
"
>
<input
type="checkbox"
:value="topic"
v-model="formData.peerSupportSupportTopics"
class="rounded border-stone-600 text-purple-500 focus:ring-purple-500 focus:ring-offset-0 bg-stone-800"
class="rounded border-ghost-600 text-purple-500 focus:ring-purple-500 focus:ring-offset-0 bg-ghost-800"
/>
<span class="text-stone-200">{{ topic }}</span>
<span class="text-ghost-200">{{ topic }}</span>
</label>
</div>
</UFormField>
@ -484,7 +484,7 @@
class="w-full"
/>
<template #hint>
<span class="text-xs text-stone-500">
<span class="text-xs text-ghost-500">
{{ formData.peerSupportMessage?.length || 0 }}/200
characters
</span>
@ -511,7 +511,7 @@
<!-- Directory Settings -->
<div>
<h2
class="text-2xl font-semibold mb-8 text-stone-100 ethereal-text"
class="text-2xl font-semibold mb-8 text-ghost-100 ethereal-text"
>
Directory Visibility
</h2>
@ -519,10 +519,10 @@
<div class="flex items-start gap-4">
<USwitch v-model="formData.showInDirectory" />
<div>
<p class="font-medium text-stone-200">
<p class="font-medium text-ghost-200">
Show in Member Directory
</p>
<p class="text-sm text-stone-400 mt-1">
<p class="text-sm text-ghost-400 mt-1">
Allow other members to discover and connect with you
through the directory
</p>
@ -576,34 +576,34 @@
<!-- Current Membership -->
<div>
<h2
class="text-2xl font-semibold mb-6 text-stone-100 ethereal-text"
class="text-2xl font-semibold mb-6 text-ghost-100 ethereal-text"
>
Current Membership
</h2>
<div
class="backdrop-blur-sm bg-stone-800/50 border border-stone-700 rounded-lg p-6 space-y-4"
class="backdrop-blur-sm bg-ghost-800/50 border border-ghost-700 rounded-lg p-6 space-y-4"
>
<div class="flex items-start justify-between">
<div>
<p class="text-sm text-stone-400">Circle</p>
<p class="text-sm text-ghost-400">Circle</p>
<p
class="text-lg font-medium text-stone-100 capitalize"
class="text-lg font-medium text-ghost-100 capitalize"
>
{{ memberData.circle }}
</p>
</div>
<div>
<p class="text-sm text-stone-400">Contribution Level</p>
<p class="text-lg font-medium text-stone-100">
<p class="text-sm text-ghost-400">Contribution Level</p>
<p class="text-lg font-medium text-ghost-100">
${{ contributionTierDetails?.amount }}/month
</p>
</div>
</div>
<div v-if="memberData.subscriptionStartDate">
<p class="text-sm text-stone-400">Member Since</p>
<p class="text-stone-100">
<p class="text-sm text-ghost-400">Member Since</p>
<p class="text-ghost-100">
{{ formatDate(memberData.subscriptionStartDate) }}
</p>
</div>
@ -614,8 +614,8 @@
memberData.contributionTier !== '0'
"
>
<p class="text-sm text-stone-400">Next Billing Date</p>
<p class="text-stone-100">
<p class="text-sm text-ghost-400">Next Billing Date</p>
<p class="text-ghost-100">
{{ formatDate(memberData.nextBillingDate) }}
</p>
</div>
@ -625,15 +625,15 @@
<!-- Change Contribution Level -->
<div>
<h2
class="text-2xl font-semibold mb-6 text-stone-100 ethereal-text"
class="text-2xl font-semibold mb-6 text-ghost-100 ethereal-text"
>
Change Contribution Level
</h2>
<div
class="backdrop-blur-sm bg-stone-800/50 border border-stone-700 rounded-lg p-6"
class="backdrop-blur-sm bg-ghost-800/50 border border-ghost-700 rounded-lg p-6"
>
<p class="text-stone-300 mb-6">
<p class="text-ghost-300 mb-6">
Choose a new contribution level that works for you.
Changes will take effect on your next billing cycle.
</p>
@ -647,16 +647,16 @@
'w-full text-left p-4 rounded-lg border-2 transition-all',
selectedContributionTier === tier.value
? 'border-blue-400 bg-blue-500/20'
: 'border-stone-600 bg-stone-900/30 hover:border-stone-500',
: 'border-ghost-600 bg-ghost-900/30 hover:border-ghost-500',
]"
@click="selectedContributionTier = tier.value"
>
<div class="flex items-center justify-between">
<div>
<p class="font-medium text-stone-100">
<p class="font-medium text-ghost-100">
{{ tier.label }}
</p>
<p class="text-sm text-stone-400 mt-1">
<p class="text-sm text-ghost-400 mt-1">
{{ tier.features[0] }}
</p>
</div>
@ -702,20 +702,20 @@
<!-- Cancel Membership -->
<div>
<h2
class="text-2xl font-semibold mb-6 text-stone-100 ethereal-text"
class="text-2xl font-semibold mb-6 text-ghost-100 ethereal-text"
>
Cancel Membership
</h2>
<div
class="backdrop-blur-sm bg-stone-800/50 border border-stone-700 rounded-lg p-6"
class="backdrop-blur-sm bg-ghost-800/50 border border-ghost-700 rounded-lg p-6"
>
<p class="text-stone-300 mb-4">
<p class="text-ghost-300 mb-4">
We're sorry to see you go. If you cancel, you'll lose
access to member benefits at the end of your current
billing period.
</p>
<p class="text-sm text-stone-400 mb-6">
<p class="text-sm text-ghost-400 mb-6">
Need a break? Consider switching to the free tier instead.
</p>
@ -1325,7 +1325,7 @@ useHead({
<style scoped>
/* Field labels - bright and readable */
:deep(label) {
color: rgb(231 229 228) !important; /* stone-200 */
color: rgb(231 229 228) !important; /* ghost-200 equivalent */
font-weight: 500;
text-align: left !important;
}
@ -1334,7 +1334,7 @@ useHead({
:deep([class*="description"]) {
color: rgb(
168 162 158
) !important; /* stone-400 - lighter than the dark background */
) !important; /* ghost-400 equivalent - lighter than the dark background */
opacity: 0.9;
}
@ -1344,22 +1344,22 @@ useHead({
width: 100% !important;
}
/* Input fields - ensure good contrast */
/* Input fields - respect light/dark mode */
:deep(input),
:deep(textarea) {
background-color: rgb(41 37 36) !important; /* stone-800 */
color: rgb(231 229 228) !important; /* stone-200 */
border-color: rgb(87 83 78) !important; /* stone-600 */
background-color: transparent !important;
color: var(--color-ghost-100) !important;
border-color: var(--color-ghost-600) !important;
}
:deep(input::placeholder),
:deep(textarea::placeholder) {
color: rgb(120 113 108) !important; /* stone-500 */
color: var(--color-ghost-500) !important;
}
:deep(input:focus),
:deep(textarea:focus) {
border-color: rgb(147 197 253) !important; /* blue-300 */
background-color: rgb(44 40 39) !important; /* slightly lighter stone */
border-color: rgb(147 197 253) !important;
background-color: transparent !important;
}
</style>