Γεννήτρια θέματος shadcn/ui
Δημιουργήστε ένα προσαρμοσμένο θέμα shadcn/ui με tokens χρώματος για φωτεινή και σκοτεινή λειτουργία και αντιγράψτε τη ρύθμιση για συνεκτική εμφάνιση του UI.
Base
Primary
Secondary
Muted & Accent
Destructive
Borders & Input
Προεπισκόπηση
Προεπισκόπηση στοιχείων
Card content
Muted text example
@layer base {
:root {
--background: 0 0% 100%;
--foreground: 0 0% 4%;
--card: 0 0% 100%;
--card-foreground: 0 0% 4%;
--popover: 0 0% 100%;
--popover-foreground: 0 0% 4%;
--primary: 0 0% 9%;
--primary-foreground: 0 0% 98%;
--secondary: 0 0% 96%;
--secondary-foreground: 0 0% 9%;
--muted: 0 0% 96%;
--muted-foreground: 0 0% 45%;
--accent: 0 0% 96%;
--accent-foreground: 0 0% 9%;
--destructive: 0 84% 60%;
--destructive-foreground: 0 0% 98%;
--border: 0 0% 90%;
--input: 0 0% 90%;
--ring: 0 0% 9%;
--radius: 0.5rem;
}
}Δημιουργήστε ένα προσαρμοσμένο θέμα shadcn/ui με tokens χρώματος για φωτεινή και σκοτεινή λειτουργία και αντιγράψτε τη ρύθμιση για συνεκτική εμφάνιση του UI.
Το Γεννήτρια θέματος shadcn/ui εμφανίζει μόνο τα στοιχεία ελέγχου και τα αποτελέσματα που ανήκουν στη λειτουργία του. Οι διαθέσιμες επιλογές εξαρτώνται από το εργαλείο και την είσοδο.
Υποστηριζόμενες μορφές
Πώς λειτουργεί
Βήμα 1
Ανοίξτε το Γεννήτρια θέματος shadcn/ui και ετοιμάστε την είσοδο που ζητά η διεπαφή
Βήμα 2
Ρυθμίστε τα ορατά στοιχεία ελέγχου για το αποτέλεσμα που χρειάζεστε
Βήμα 3
Ελέγξτε το αποτέλεσμα πριν το αντιγράψετε, εξαγάγετε ή επαναχρησιμοποιήσετε
Συνηθισμένα λάθη προς αποφυγή
- Μην θεωρείτε ότι υποστηρίζεται μορφή ή επιλογή που δεν εμφανίζεται στη διεπαφή.
- Ελέγξτε τις τιμές πριν τις χρησιμοποιήσετε σε ταυτότητα, διεπαφή ή αρχείο παραγωγής.
- Για κείμενο ή στοιχεία UI ελέγξτε και την αντίθεση.
Συμβουλές από ειδικούς (Pro tips)
- Κρατήστε την αρχική τιμή μαζί με το αποτέλεσμα για σύγκριση παραλλαγών.
- Χρησιμοποιήστε τις μορφές που δείχνει πραγματικά το εργαλείο αντί να εκτιμάτε μετατροπές.
- Σε κινητό και tablet αφήστε κείμενο και ελέγχους να αναδιπλώνονται.
Επεξεργασία δεδομένων
Η επεξεργασία εξαρτάται από τη λειτουργία. Η συγκατάθεση, τα analytics και οι λειτουργίες λογαριασμού του ιστότοπου είναι ξεχωριστά από τη λειτουργία χρώματος.
Τι κάνει αυτό το εργαλείο
Δημιουργήστε ένα προσαρμοσμένο θέμα shadcn/ui με tokens χρώματος για φωτεινή και σκοτεινή λειτουργία και αντιγράψτε τη ρύθμιση για συνεκτική εμφάνιση του UI. Το Γεννήτρια θέματος shadcn/ui παραμένει εστιασμένο σε αυτή την εργασία και δεν υπονοεί λειτουργίες που δεν εμφανίζονται στη διεπαφή. Χρησιμοποιήστε τα διαθέσιμα στοιχεία ελέγχου για το αποτέλεσμα που χρειάζεστε και ελέγξτε τις εμφανιζόμενες τιμές πριν τις μεταφέρετε σε άλλο εργαλείο, φύλλο στυλ, αρχείο σχεδίασης ή έγγραφο.
Προετοιμασία κατάλληλης εισόδου
Ξεκινήστε με την είσοδο που ζητά το Γεννήτρια θέματος shadcn/ui: χρώμα, τιμή, εικόνα ή ρύθμιση ανάλογα με την οθόνη. Οι μορφές που αναφέρονται σε αυτή τη σελίδα είναι CSS, Tailwind, HSL, shadcn/ui. Αν μια μορφή ή επιλογή δεν εμφανίζεται στη διεπαφή, μην τη θεωρείτε υποστηριζόμενη από τη συγκεκριμένη λειτουργία.
Ανάγνωση και έλεγχος αποτελέσματος
Διαβάστε το αποτέλεσμα στο πλαίσιο της λειτουργίας που εκτελέσατε. Συγκρίνετέ το με την αρχική τιμή και ελέγξτε τις ρυθμίσεις που επηρέασαν τον υπολογισμό. Για σημαντική οπτική εργασία, ελέγξτε επίσης το αποτέλεσμα στην πραγματική διεπαφή όπου θα χρησιμοποιηθεί.
Χρήση σε κινητό και tablet
Το Γεννήτρια θέματος shadcn/ui χρησιμοποιεί responsive διάταξη. Τίτλοι, υπότιτλοι, breadcrumbs και χειριστήρια μπορούν να αναδιπλώνονται σε στενές οθόνες ώστε να μην κόβονται οι μεγάλες μεταφράσεις. Παρ’ όλα αυτά, ελέγξτε το τελικό αποτέλεσμα στη συσκευή και στο πλαίσιο όπου θα χρησιμοποιηθεί.
Επαναχρησιμοποίηση στο έργο
Μετά τον έλεγχο, χρησιμοποιήστε μόνο τις ενέργειες που προσφέρει πραγματικά το Γεννήτρια θέματος shadcn/ui, όπως αντιγραφή ή εξαγωγή όταν υπάρχουν. Κρατήστε την αρχική τιμή αν χρειαστεί να αναπαράγετε τη ρύθμιση και, για χρώματα UI, καταγράψτε τον ρόλο και την απαιτούμενη αντίθεση.
Σχετικά εργαλεία
Οδηγοί και σεμινάρια
Μάθετε πώς να χρησιμοποιείτε τα εργαλεία μας με τους λεπτομερείς οδηγούς μας.
shadcn-theme: πρακτικός οδηγός για developer
Τοπικοποιημένος οδηγός για το shadcn-theme, καλές πρακτικές developer και συχνά λάθη.
shadcn-theme: πρακτικός οδηγός για developer
Τοπικοποιημένος οδηγός για το shadcn-theme, καλές πρακτικές developer και συχνά λάθη.
shadcn-theme: πρακτικός οδηγός για developer
Τοπικοποιημένος οδηγός για το shadcn-theme, καλές πρακτικές developer και συχνά λάθη.
Συχνές ερωτήσεις
Μάθετε πώς να χρησιμοποιείτε τα εργαλεία μας με τους λεπτομερείς οδηγούς μας.