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:
parent
ee249fd682
commit
5ca5e1f69c
10 changed files with 72 additions and 19 deletions
|
@ -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}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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: '/',
|
||||
|
|
|
@ -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',
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue