1
0
Fork 0
mirror of https://github.com/seanmorley15/AdventureLog.git synced 2025-07-24 15:29:36 +02:00

Change card colors and add aestheticDark theme.

This commit is contained in:
Sean Morley 2024-09-06 23:35:48 -04:00
parent ee249fd682
commit 5ca5e1f69c
10 changed files with 72 additions and 19 deletions

View file

@ -161,7 +161,7 @@
{/if}
<div
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl text-base-content"
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl"
>
<figure>
{#if adventure.images && adventure.images.length > 0}

View file

@ -29,7 +29,7 @@
</script>
<div
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl overflow-hidden"
>
<div class="card-body">
<div class="flex justify-between">

View file

@ -78,7 +78,7 @@
{/if}
<div
class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-primary-content shadow-xl text-base-content"
class="card min-w-max lg:w-96 md:w-80 sm:w-60 xs:w-40 bg-neutral text-neutral-content shadow-xl"
>
<div class="card-body">
<div class="flex justify-between">

View file

@ -13,7 +13,7 @@
</script>
<div
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl overflow-hidden"
>
<figure>
<!-- svelte-ignore a11y-img-redundant-alt -->

View file

@ -202,7 +202,12 @@
</li>
<li>
<button formaction="/?/setTheme&theme=forest">Forest<Forest class="w-6 h-6" /></button>
<button formaction="/?/setTheme&theme=garden">Garden<Flower class="w-6 h-6" /></button>
<button formaction="/?/setTheme&theme=aestheticLight"
>Aesthetic Light<Flower class="w-6 h-6" /></button
>
<button formaction="/?/setTheme&theme=aestheticDark"
>Aesthetic Dark<Flower class="w-6 h-6" /></button
>
<button formaction="/?/setTheme&theme=aqua">Aqua<Water class="w-6 h-6" /></button>
</li>
</form>

View file

@ -30,7 +30,7 @@
</script>
<div
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md overflow-hidden bg-neutral text-neutral-content shadow-xl"
>
<div class="card-body">
<div class="flex justify-between">

View file

@ -54,7 +54,7 @@
</script>
<div
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl overflow-hidden text-base-content"
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl overflow-hidden"
>
<div class="card-body">
{#if region.name_en && region.name !== region.name_en}

View file

@ -1,16 +1,10 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import Launch from '~icons/mdi/launch';
import TrashCanOutline from '~icons/mdi/trash-can-outline';
import FileDocumentEdit from '~icons/mdi/file-document-edit';
import { goto } from '$app/navigation';
import type { Collection, Transportation, User } from '$lib/types';
import type { Transportation, User } from '$lib/types';
import { addToast } from '$lib/toasts';
import Plus from '~icons/mdi/plus';
import ArrowDownThick from '~icons/mdi/arrow-down-thick';
const dispatch = createEventDispatcher();
@ -40,7 +34,7 @@
</script>
<div
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-primary-content shadow-xl text-base-content"
class="card w-full max-w-xs sm:max-w-sm md:max-w-md lg:max-w-md xl:max-w-md bg-neutral text-neutral-content shadow-xl"
>
<div class="card-body">
<h2 class="card-title overflow-ellipsis">{transportation.name}</h2>

View file

@ -9,9 +9,18 @@ export const actions: Actions = {
// change the theme only if it is one of the allowed themes
if (
theme &&
['light', 'dark', 'night', 'retro', 'forest', 'aqua', 'forest', 'garden', 'emerald'].includes(
theme
)
[
'light',
'dark',
'night',
'retro',
'forest',
'aqua',
'forest',
'aestheticLight',
'aestheticDark',
'emerald'
].includes(theme)
) {
cookies.set('colortheme', theme, {
path: '/',

View file

@ -15,7 +15,52 @@ export default {
'aqua',
'emerald',
{
garden: {
aestheticDark: {
primary: '#3e5747',
'primary-focus': '#2f4236',
'primary-content': '#e9e7e7',
secondary: '#547b82',
'secondary-focus': '#3d5960',
'secondary-content': '#c1dfe5',
accent: '#8b6161',
'accent-focus': '#6e4545',
'accent-content': '#f2eaea',
neutral: '#2b2a2a',
'neutral-focus': '#1c1b1b',
'neutral-content': '#e9e7e7',
'base-100': '#121212', // Dark background
'base-200': '#1d1d1d',
'base-300': '#292929',
'base-content': '#e9e7e7', // Light content on dark background
// set bg-primary-content
'bg-base': '#121212',
'bg-base-content': '#e9e7e7',
info: '#3b7ecb',
success: '#007766',
warning: '#d4c111',
error: '#e64a19',
'--rounded-box': '1rem',
'--rounded-btn': '.5rem',
'--rounded-badge': '1.9rem',
'--animation-btn': '.25s',
'--animation-input': '.2s',
'--btn-text-case': 'uppercase',
'--navbar-padding': '.5rem',
'--border-btn': '1px',
fontFamily:
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
},
aestheticLight: {
primary: '#5a7c65',
'primary-focus': '#48604f',
'primary-content': '#dcd5d5',