Είναι έντεκα το βράδυ, τα φώτα στο δωμάτιο χαμηλωμένα και ανοίγεις ένα άρθρο για να χαλαρώσεις πριν κοιμηθείς. Η σελίδα όμως φορτώνει κατάλευκη, τα μάτια σου τσούζουν και μέσα σε λίγα λεπτά έχεις ήδη κλείσει την καρτέλα. Αν το σκηνικό σου φαίνεται γνώριμο, δεν φταις εσύ: ένα μεγάλο κομμάτι του διαδικτύου εξακολουθεί να μην προσφέρει σκούρο θέμα.
Η προφανής λύση είναι μια επέκταση. Μόνο που οι επεκτάσεις σκούρου θέματος τρέχουν συνεχώς στο παρασκήνιο, ζητούν άδεια ανάγνωσης σε όλες τις σελίδες που επισκέπτεσαι και συχνά αλλοιώνουν τα χρώματα σε φωτογραφίες και λογότυπα. Υπάρχει όμως και ο πιο ελαφρύς δρόμος: ένα Bookmarklet. Ένας μικρός κώδικας JavaScript αποθηκευμένος σαν σελιδοδείκτης, που λειτουργεί ως διακόπτης On/Off και δεν καταναλώνει τίποτα όσο δεν τον χρησιμοποιείς.
Σε αυτόν τον οδηγό θα βρεις τον έτοιμο κώδικα, μια πιο προχωρημένη εκδοχή του, αναλυτικές οδηγίες για χρήση σε υπολογιστή και κινητό, καθώς και λύσεις για τα πιο συνηθισμένα προβλήματα που μπορεί να συναντήσεις στην πράξη.
Ένα Bookmarklet μοιάζει με έναν απλό σελιδοδείκτη, αλλά αντί για διεύθυνση ιστοσελίδας περιέχει μια μικρή εντολή JavaScript. Όταν το πατάς, ο περιηγητής δεν σε μεταφέρει κάπου αλλού — εκτελεί την εντολή πάνω στη σελίδα που ήδη βλέπεις.
Η τεχνική υπάρχει από τα τέλη της δεκαετίας του ’90 και υποστηρίζεται από κάθε σύγχρονο browser χωρίς καμία εγκατάσταση. Γι’ αυτό παραμένει τόσο χρήσιμη:
Το script ελέγχει πρώτα αν το σκούρο θέμα είναι ήδη ενεργό. Αν είναι, το αφαιρεί· αν όχι, το εφαρμόζει, φροντίζοντας παράλληλα να μην παραμορφωθούν τα πολυμέσα:
Βασική έκδοση — αντιγραφή ολόκληρης της γραμμήςinvert) και στη συνέχεια περιστρέφει τη χρωματική παλέτα κατά 180 μοίρες (hue-rotate), ώστε τα χρώματα να παραμένουν φυσικά. Έπειτα εφαρμόζει την αντίστροφη αναστροφή σε εικόνες και βίντεο, ώστε να επανέρχονται στα κανονικά τους χρώματα. Το 90% αντί για 100% μειώνει την ένταση και κάνει το αποτέλεσμα πιο ξεκούραστο για τα μάτια.
Η βασική έκδοση καλύπτει τη συντριπτική πλειονότητα των σελίδων. Σε πιο σύνθετα sites όμως θα εμφανιστούν ιδιομορφίες: ενσωματωμένα βίντεο μέσα σε iframe, χάρτες, ή εικόνες φόντου που αλλάζουν λάθος χρώματα. Η παρακάτω έκδοση αντιμετωπίζει αυτές τις περιπτώσεις:
Οι διαφορές είναι μικρές αλλά ουσιαστικές:
iframe, embed, object και picture στις εξαιρέσεις, ώστε ενσωματωμένα βίντεο και χάρτες να εμφανίζονται σωστά.[style*="background-image"] εντοπίζει στοιχεία με inline εικόνες φόντου — κάτι πολύ συνηθισμένο σε σύγχρονα sites.textContent αντί για innerHTML, που είναι η ασφαλέστερη πρακτική για εισαγωγή CSS.documentElement αντί για το head, ώστε να λειτουργεί ακόμη και σε σελίδες με ασυνήθιστη δομή.🌙 Dark και 🌚 Dark+. Αν κάποιο site δεν αποδώσει καλά με τη μία έκδοση, δοκιμάζεις την άλλη με ένα κλικ.
Ctrl + Shift + B (σε Mac: Cmd + Shift + B). Η μπάρα εμφανίζεται ακριβώς κάτω από τη γραμμή διευθύνσεων.🌙 Dark Modejavascript: στην αρχή.
javascript: ως μέτρο ασφαλείας. Ο κώδικας πρέπει να μπει στο πεδίο URL του σελιδοδείκτη.
Στα κινητά δεν υπάρχει μπάρα σελιδοδεικτών, οπότε η διαδικασία αλλάζει: αποθηκεύεις έναν σελιδοδείκτη και τον καλείς γράφοντας το όνομά του στη γραμμή διευθύνσεων.
darkmode και αντικατάστησε το URL με τον κώδικα.darkmode στη γραμμή διευθύνσεων και επίλεξε το αποτέλεσμα.darkmode και επικόλλησε τον κώδικα στη διεύθυνση.Δεν χρειάζεται να ξέρεις JavaScript για να προσαρμόσεις το αποτέλεσμα στα γούστα σου. Αρκεί να αλλάξεις μερικούς αριθμούς μέσα στον κώδικα:
| Τι θέλεις να αλλάξεις | Ποιο σημείο πειράζεις | Τι να δοκιμάσεις |
|---|---|---|
| Πιο απαλό σκούρο | invert(90%) |
Κατέβασέ το στο 82% ή 85% |
| Πιο έντονη αντίθεση | invert(90%) |
Ανέβασέ το στο 96% |
| Απόχρωση φόντου | background:#121212 |
#0f0f1a για μπλε τόνο, #1a1614 για ζεστό |
| Λιγότερο έντονα χρώματα | Πρόσθεσε φίλτρο | saturate(85%) μετά το hue-rotate |
| Εξαίρεση συγκεκριμένου στοιχείου | Λίστα επιλογέων | Πρόσθεσε την κλάση του, π.χ. .logo |
Αν θέλεις πιο ήπιο αποτέλεσμα με ελαφρώς ξεθωριασμένα χρώματα, το φίλτρο γίνεται:
Υπάρχουν τρεις δρόμοι για σκούρο θέμα στον browser — και καθένας εξυπηρετεί διαφορετική ανάγκη:
| Χαρακτηριστικό | Bookmarklet | Επέκταση | Ενσωματωμένο |
|---|---|---|---|
| Κατανάλωση RAM / CPU | 🟢 Μηδενική | 🔴 Συνεχής στο παρασκήνιο | 🟢 Μηδενική |
| Εγκατάσταση | 🟢 Απλή επικόλληση | 🟠 Λήψη από το Store | 🟢 Ήδη υπάρχει |
| Ιδιωτικότητα | 🟢 Βλέπεις τον κώδικα | ⚠️ Πρόσβαση σε όλα τα sites | 🟢 Πλήρης |
| Αυτόματη ενεργοποίηση | ❌ Χειροκίνητο κλικ | ✅ Σε κάθε σελίδα | ✅ Όπου υποστηρίζεται |
| Κάλυψη ιστοσελίδων | 🟢 Σχεδόν όλες | 🟢 Σχεδόν όλες | 🔴 Μόνο όσες το υποστηρίζουν |
| Ποιότητα αποτελέσματος | 🟠 Καλή, αυτόματη | 🟢 Ρυθμιζόμενη ανά site | 🟢 Σχεδιασμένο από τον δημιουργό |
Ο κανόνας που ακολουθώ: αν το site έχει δικό του σκούρο θέμα, χρησιμοποιώ αυτό. Αν δεν έχει και το επισκέπτομαι σπάνια, πατάω το bookmarklet. Επέκταση εγκαθιστώ μόνο αν περνάω ώρες κάθε μέρα σε συγκεκριμένα sites χωρίς dark mode.
Καμία λύση αναστροφής χρωμάτων δεν είναι τέλεια. Αυτά είναι τα πιο συνηθισμένα προβλήματα — και οι πρακτικές λύσεις τους:
html, τα στοιχεία με position: fixed αλλάζουν σημείο αναφοράς. Είναι γνωστός περιορισμός του CSS. Λύση: κάνε κύλιση στην κορυφή πριν πατήσεις τον διακόπτη ή απενεργοποίησέ τον προσωρινά όταν χρειάζεσαι το μενού.
javascript: από την αρχή του κώδικα, επειδή το αφαίρεσε ο browser κατά την επικόλληση. Άνοιξε ξανά τον σελιδοδείκτη για επεξεργασία και πρόσθεσέ το χειροκίνητα.
chrome://, edge://, about:) και οι σελίδες των επίσημων store είναι κλειδωμένες για λόγους ασφαλείας. Είναι αναμενόμενο.
Ένα bookmarklet εκτελεί κώδικα μέσα στη σελίδα που βλέπεις, με τα ίδια δικαιώματα που έχει και η σελίδα. Στη δική μας περίπτωση αυτό σημαίνει απλώς την προσθήκη ενός στυλ — καμία επικοινωνία με το διαδίκτυο, καμία πρόσβαση σε δεδομένα. Η ίδια όμως δυνατότητα, σε κακόβουλα χέρια, μπορεί να χρησιμοποιηθεί για κλοπή στοιχείων.
Δύο απλοί κανόνες σε καλύπτουν πλήρως:
fetch, eval ή είναι σκόπιμα δυσανάγνωστος, μην τον αποθηκεύσεις. Ο κώδικας αυτού του οδηγού είναι σύντομος και ευανάγνωστος ακριβώς για να μπορείς να τον ελέγξεις.Χρησιμοποιώ αυτό το bookmarklet καθημερινά εδώ και περίπου έναν χρόνο, αφού απεγκατέστησα δύο δημοφιλείς επεκτάσεις σκούρου θέματος. Ο λόγος δεν ήταν ιδεολογικός: παρατήρησα ότι ο Chrome με δεκαπέντε ανοιχτές καρτέλες κρατούσε αισθητά περισσότερη μνήμη με την επέκταση ενεργή, και ότι κάθε νέα καρτέλα άργησε λίγο περισσότερο να αποδοθεί.
Στην πράξη, το κλικ που πρέπει να κάνω σε κάθε σελίδα αποδείχθηκε πολύ μικρότερο πρόβλημα απ’ όσο φοβόμουν. Τα περισσότερα sites που επισκέπτομαι συχνά έχουν πλέον δικό τους dark mode, οπότε το bookmarklet το χρειάζομαι κυρίως σε παλιότερες σελίδες τεκμηρίωσης, φόρουμ και ελληνικά blogs που δεν έχουν ενημερωθεί εδώ και χρόνια. Εκεί κάνει ακριβώς τη δουλειά του.
Το μόνο σημείο που με ενόχλησε ήταν τα σταθερά μενού που μετακινούνται. Το έλυσα με μια συνήθεια αντί για κώδικα: πατάω τον διακόπτη μόλις ανοίξω τη σελίδα, πριν αρχίσω να κάνω κύλιση. Επίσης κρατάω δύο εκδόσεις — μία απαλή στο 85% για βραδινό διάβασμα και μία πιο έντονη στο 95% για τεχνικά κείμενα με πολύ κώδικα.
Ναι. Αποθηκεύεις το bookmarklet ως κανονικό σελιδοδείκτη στον Chrome ή στον Safari και το εκτελείς γράφοντας το όνομά του στη γραμμή διευθύνσεων ενώ βρίσκεσαι στη σελίδα που θέλεις. Δώσε του σύντομο όνομα με λατινικούς χαρακτήρες για να το βρίσκει γρήγορα η αυτόματη συμπλήρωση.
Ναι, και αυτό είναι εσκεμμένο. Ακριβώς επειδή δεν τρέχει στο παρασκήνιο, δεν καταναλώνει πόρους. Αν θέλεις αυτόματη εφαρμογή παντού, χρειάζεσαι επέκταση ή userscript — με το αντίστοιχο κόστος σε μνήμη και δικαιώματα.
Ο συγκεκριμένος κώδικας προσθέτει μόνο ένα στυλ στη σελίδα και δεν στέλνει τίποτα πουθενά. Ο γενικός κανόνας: μην αποθηκεύεις bookmarklets που δεν καταλαβαίνεις και μην τα χρησιμοποιείς σε τραπεζικές σελίδες.
Η τεχνική αντιστρέφει ολόκληρη τη σελίδα και μετά επαναφέρει τα πολυμέσα. Στοιχεία που δεν καλύπτονται από τη λίστα εξαιρέσεων — όπως εικόνες φόντου από εξωτερικό CSS — παραμένουν αντεστραμμένα. Η προχωρημένη έκδοση του οδηγού καλύπτει σημαντικά περισσότερες περιπτώσεις.
Ναι, σε κάθε σύγχρονο browser: Chrome, Edge, Firefox, Brave, Opera, Vivaldi και Safari. Δεν λειτουργεί μόνο σε εσωτερικές σελίδες του browser και σε sites με πολύ αυστηρή πολιτική ασφαλείας περιεχομένου.
Το φίλτρο CSS επεξεργάζεται από την κάρτα γραφικών και το κόστος του είναι πρακτικά αμελητέο σε κάθε μηχάνημα της τελευταίας δεκαετίας. Σε πολύ μεγάλες σελίδες με βαριά κινούμενα γραφικά μπορεί να παρατηρήσεις ελαφρώς λιγότερο ομαλή κύλιση.
Το Bookmarklet δεν αντικαθιστά μια καλοφτιαγμένη επέκταση αν χρειάζεσαι αυτόματο σκούρο θέμα παντού. Αντικαθιστά όμως εξαιρετικά καλά τη λογική «εγκαθιστώ κάτι μόνιμο για μια ανάγκη που έχω περιστασιακά».
Αντίγραψε τον κώδικα, φτιάξε τον σελιδοδείκτη και δοκίμασέ τον απόψε σε μία σελίδα. Αν σου κάνει τη δουλειά, θα δεις ότι είναι από εκείνα τα μικρά εργαλεία που τα ξεχνάς — μέχρι τη στιγμή που τα χρειάζεσαι.
💬 Σχόλια