Ja... durch ein anderes Thema drauf gekommen.
Schon jemand Erfahrung mit gemacht wie man ähnlich des dark Modifier was anderes einbauen kann?
Die Idee des AMOLED/OLED Modus kam mir wieder ein, das würd ich dann halt gerne ähnlich lösen.
Also das man am Ende zB bg-white dark:bg-gray-900 amoled:bg-black machen könnte 
.
Man könnte doch eine eigene Variante in der tailwind.config definieren und die dann verwenden.
Oder denke ich da etwas zu einfach gestrikt gerade?
Was sie meint ist: Bei tailwind wird der DARK mode über dieses DARK gesteuert. Ich denke dabei geht im Endeffekt darum zu erkennen welchen Bildschirm der User aktuell nutzt und dann entsprechend den amole Modus zu nutzen. Oder?
Ja genau, dann könnte man das doch mittels Javascript dark removen und die eigene Variante adden im Document mit dem Toggler oder?
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.
Gar nicht sooo dumm!
@media (prefers-color-scheme: amoled) {
body {
color: #FFF;
background-color: #3E3E3E;
}
}mein beispiel wäre quasi die variante mit vanilla css also ohne tailwind. Die frage ist wie setzt tailwind das um? ich habe jetzt mal geschau finde aber dazu keinerlei dokumentation ..
blubb: https://ikladious.net/create-your-own-tailwind-modifiers
Dein Code hilft zumindest schon mal beim Problem mit dem Hintergrund 
Ja lol du warst schneller im antworten wie ich im Schreiben und recherchieren haha 
denke aber mein Beitrag bzw der Link zu dem Blog sollten helfen
Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!