Λειτουργία light-dark() CSS

Ορισμός και χρήση

λειτουργία, CSS light-dark() Η λειτουργία επιτρέπει την ορισμό δύο τιμών χρωμάτων. Αν ο χρήστης ορίσει το θέμα με φωτεινά, επιστρέφει την πρώτη τιμή; Αν ο χρήστης ορίσει το θέμα με σκοτεινά, επιστρέφει τη δεύτερη τιμή.

Για να χρησιμοποιήσετε light-dark() λειτουργία, CSS color-scheme Η ιδιότητα πρέπει να οριστεί ως light dark.

Συμβουλή:Ο χρήστης μπορεί να ορίσει τις προτιμήσεις του για το σχήμα χρωμάτων μέσω των ρυθμίσεων του λειτουργικού συστήματος (μορφή με φωτεινά ή σκοτεινά) ή των ρυθμίσεων του προγράμματος περιήγησης.

Παράδειγμα

Χρήση light-dark() Η συνάρτηση ενεργοποιεί δύο τιμές χρωμάτων:

:root {
  color-scheme: light dark;
  --light-bg: snow;
  --light-color: black;
  --dark-bg: black;
  --dark-color: snow;
}
* {
  background-color: light-dark(var(--light-bg), var(--dark-bg));
  color: light-dark(var(--light-color), var(--dark-color));
}

Προσπαθήστε το شخصικά

Γλωσσή CSS

light-dark(lightcolor, darkcolor)

Τεχνικά λεπτομέρειες

Υποστήριξη του προγράμματος περιήγησης

Τα αριθμήματα στην τάβληδα δείχνουν την έκδοση του προγράμματος περιήγησης που υποστηρίζει πλήρως τη συνάρτηση.

Σχετικές σελίδες

Παραδείγματα:Πρότυπο CSS color-scheme

Παραδείγματα:CSS var() συνάρτηση

Εκμάθηση:CSS μεταβλητές