Θέματα

Τι θα φτιάξετε

Μια εφαρμογή της οποίας ολόκληρη την εμφάνιση μπορεί να αλλάξει ο χρήστης — ξεκινώντας από ένα συνδεδεμένο φύλλο στυλ και καταλήγοντας σε έναν διατηρούμενο εναλλάκτη θέματος κατά την εκτέλεση — σε περίπου 15 λεπτά.

Πριν ξεκινήσετε

Ολοκληρώστε πρώτα τον οδηγό του framework για τη στοίβα σας πρώτα, ώστε να έχετε μια μικρή φόρμα Lily να της δώσετε θέμα. Όλα εδώ δουλεύουν και στα επτά frameworks· τα δείγματα κώδικα δείχνουν Svelte και απλό HTML.

Βήμα 1 — Συνδέστε ένα έτοιμο θέμα

themes/ ο κατάλογος περιέχει 45 αυτόνομα φύλλα στυλ. Αντιγράψτε τα στους στατικούς πόρους της εφαρμογής σας και συνδέστε ένα:

<link rel="stylesheet" href="/assets/themes/united-kingdom-national-health-service-england-for-patients.css" />

Κορυφαία σημεία του συνόλου:

• Δημόσιος τομέας — NHS England / Scotland / Wales, καθένα σε παραλλαγές για ασθενείς και για επαγγελματίες· GOV.UK (united-kingdom-government-digital-service)· USWDS (united-states-web-design-system).
• Εμπνευσμένα από προμηθευτές — adobe-spectrum, mozilla-protocol.
• Γενικής χρήσης — light, dark, nord, dracula, wireframe, corporate, synthwaveκαι πολλά ακόμη.

Βήμα 2 — Παρακάμψτε οτιδήποτε

Οι επιλογείς του θέματος είναι τυλιγμένοι σε :where(...)που έχει μηδενική ειδικότητα — άρα κάθε κανόνας που γράφετε κερδίζει, απλά:

/* After the theme link: your brand button, everything else themed */
.button {
  background: #7c3aed;
  border-radius: 9999px;
}

Βήμα 3 — Εναλλαγή κατά την εκτέλεση με το theme-picker

theme-picker ο βοηθός είναι ένα headless κουμπί-εικονίδιο + listbox που κατέχει ολόκληρο τον κύκλο ζωής του θέματος: φορτώνει το επιλεγμένο φύλλο στυλ αλλάζοντας ένα διαχειριζόμενο <link> (μόνο το ενεργό θέμα φέρνεται ποτέ), ορίζει το data-theme="{slug}" στο έγγραφο και προαιρετικά το διατηρεί στο localStorage. Εδώ φαίνεται το Svelte· οι θύρες για React, Vue, Angular, HTML, Nunjucks και Blazor αντιστοιχούν σύμβαση προς σύμβαση:

<script>
  import ThemePicker from "@lilydesignsystem/svelte-theme-picker";
</script>

<ThemePicker
  label="Theme"
  themesUrl="/assets/themes/"
  themes={["light", "dark", "nord", "wireframe"]}
  storageKey="my-app-theme"
/>

Αυτή είναι ολόκληρη η ενσωμάτωση. Η συμπεριφορά πληκτρολογίου ακολουθεί το μοτίβο listbox του WAI-ARIA APG· το ίδιο το στοιχείο ελέγχου είναι headless (αγκίστρι κλάσης .theme-picker), οπότε παίρνει όποιο θέμα είναι ενεργό.

Βήμα 4 — Αντιδράστε στο θέμα στο δικό σας CSS

Επειδή ο βοηθός ορίζει το data-theme στη ρίζα του εγγράφου, τα δικά σας στυλ μπορούν να διακλαδίζονται με βάση αυτό:

[data-theme="dark"] .site-logo { filter: invert(1); }

Σημειώσεις για απόδοση στον διακομιστή

Ο βοηθός κάνει όλες τις εγγραφές στο DOM μέσα στον κύκλο ζωής mount/effect του framework, άρα είναι ασφαλής για SSR εκ κατασκευής. Για να αποφύγετε αναλαμπή στην πρώτη ζωγραφική, αποδώστε στον διακομιστή το <link> και data-theme του αρχικού θέματος (για παράδειγμα από cookie) — το αποθετήριο του βοηθού Svelte περιλαμβάνει εκτελέσιμο παράδειγμα cookie για SvelteKit, και οι άλλοι κατάλογοι τεκμηριώνουν το ίδιο μοτίβο για τις στοίβες τους.

Επόμενα βήματα

• Βοηθοί προτιμήσεων — το ίδιο μοτίβο για γλώσσα, μέγεθος κειμένου, κοινοποίηση και εισαγωγή ημερομηνίας/ώρας.
• Συνεισφέρετε ένα θέμα — καθένα είναι ένα αυτόνομο φύλλο στυλ που στοχεύει τα αγκίστρια κλάσης· δείτε τη συνεισφορά.

Ερωτήσεις στην πορεία; Η σελίδα βοήθειας είναι γεμάτη απαντήσεις — και αν ένα βήμα μπορεί να γίνει πιο σαφές, πείτε μας και θα βελτιώσουμε με χαρά τον οδηγό.