Grundlegend mein Plan hier mal besser erklärt:
Aktuell unterstützt meine Seite nur den Darkmode, es gibt kein "Light", dürfte auch klar sein weshalb:
Da ist nix "Hell", also will ich da grundsätzlich mal auch an etwas hellerem Arbeiten, nicht jedem gefällt es "dunkel" ja. Aber Grundlegend habe ich auch die Idee mehr Farbvariationen anzubieten. Aktuell ist alles in meinem Lieblingsfarben gehalten, ganz offensichtlich viel Lila und Pink...
Aber was spricht zB etwas mehr Rot, Blau, Orange, Grün, etc? Nichts! Und wenn wir dabei sind, wieso nicht gleich ein AMOLED Modus, mit so viel Schwarz wie nur möglich?
Aktuell sieht zB eine Karte so aus:
<template>
<div class="h-auto bg-white/10 bg-clip-padding p-4 drop-shadow backdrop-blur-sm backdrop-filter">
<slot />
</div>
</template>
<script setup>
import { usePage } from '@inertiajs/vue3';
import { computed } from 'vue';
const style = usePage().props.featureFlags.cardGradient;
const classes = computed(() => {
return style ? 'h-auto rounded bg-white/20 bg-gradient-to-b to-white/10 bg-clip-padding p-4 drop-shadow backdrop-blur-sm backdrop-filter' : 'h-auto rounded bg-white/10 bg-clip-padding p-4 drop-shadow backdrop-blur-sm backdrop-filter';
});
</script>Man sieht hier eindeutig das Karten recht einfach gehalten sind ja.
Grundvorstellung also:
Dark: bg-white/10
Light: bg-black/10
AMOLED: bg-black
Sähe dann zB so in gänze aus: h-auto bg-black/10 dark:bg-white/10 amoled:bg-black bg-clip-padding p-4 drop-shadow backdrop-blur-sm backdrop-filter
Normalerweise arbeitet Tailwind einfach nach dem was prefers-color-scheme vom Browser vorgibt, man kann das aber auf die Selektor-Strategie ändern, wo durch setzten von dark im HTML-Tag als Klasse dies getoggelt wird (bspw. via JS ja).
Dazu gibts auch ganz gut eine Erklärung in den Docs:
<!-- Dark mode not enabled -->
<html>
<body>
<!-- Will be white -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>
<!-- Dark mode enabled -->
<html class="dark">
<body>
<!-- Will be black -->
<div class="bg-white dark:bg-black">
<!-- ... -->
</div>
</body>
</html>Mein Ziel ist also, Tailwind so zu erweitern, das wenn ich zB das hier habe:
<!-- AMOLED Mode -->
<html class="amoled">
<body>
<!-- Will be AMOLED Mode -->
<div class="bg-white dark:bg-gray-900 amoled:bg-black">
<!-- ... -->
</div>
</body
</html>Das eben die AMOLED-Klassen gewählt werden, entsprechend erweitert für weitere Selektoren wie red etc.
.
da wohnt ein MA von Hetzner der in der passenden Abteilung arbeitet.
