Βήμα Βήμα

Πώς να προσθέσεις διακόπτη Dark Mode σε κάθε ιστοσελίδα με ένα Bookmarklet

3 Σεπτεμβρίου 2026 ⏱ υπολογισμός…

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

Η προφανής λύση είναι μια επέκταση. Μόνο που οι επεκτάσεις σκούρου θέματος τρέχουν συνεχώς στο παρασκήνιο, ζητούν άδεια ανάγνωσης σε όλες τις σελίδες που επισκέπτεσαι και συχνά αλλοιώνουν τα χρώματα σε φωτογραφίες και λογότυπα. Υπάρχει όμως και ο πιο ελαφρύς δρόμος: ένα Bookmarklet. Ένας μικρός κώδικας JavaScript αποθηκευμένος σαν σελιδοδείκτης, που λειτουργεί ως διακόπτης On/Off και δεν καταναλώνει τίποτα όσο δεν τον χρησιμοποιείς.

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

📋 Περιεχόμενα άρθρου

1 Τι είναι το Bookmarklet και γιατί υπερέχει 2 Ο βασικός κώδικας του διακόπτη 3 Η βελτιωμένη έκδοση για δύσκολα sites 4 Εγκατάσταση σε υπολογιστή 5 Εγκατάσταση σε Android και iPhone 6 Προσαρμογή: ένταση, τόνοι και εξαιρέσεις 7 Bookmarklet vs επεκτάσεις vs ενσωματωμένο Dark Mode 8 Συνηθισμένα προβλήματα και λύσεις 9 Ασφάλεια: τι πρέπει να προσέχεις 10 Η δική μου εμπειρία 11 Συμπέρασμα 12 Συχνές ερωτήσεις

❓ Τι είναι το Bookmarklet και γιατί υπερέχει

Ένα Bookmarklet μοιάζει με έναν απλό σελιδοδείκτη, αλλά αντί για διεύθυνση ιστοσελίδας περιέχει μια μικρή εντολή JavaScript. Όταν το πατάς, ο περιηγητής δεν σε μεταφέρει κάπου αλλού — εκτελεί την εντολή πάνω στη σελίδα που ήδη βλέπεις.

Η τεχνική υπάρχει από τα τέλη της δεκαετίας του ’90 και υποστηρίζεται από κάθε σύγχρονο browser χωρίς καμία εγκατάσταση. Γι’ αυτό παραμένει τόσο χρήσιμη:

🪶 Μηδενική κατανάλωση πόρων: δεν τρέχει στο παρασκήνιο, δεν κρατά μνήμη και δεν επιβραδύνει το άνοιγμα των καρτελών.
⚡ Άμεση απόκριση: ενεργοποιείται και απενεργοποιείται ακαριαία, χωρίς μενού, ρυθμίσεις ή περίπλοκες επιλογές.
🎨 Έξυπνη αναστροφή χρωμάτων: δεν κάνει απλό «αρνητικό» — επαναφέρει φωτογραφίες, βίντεο και λογότυπα στα φυσικά τους χρώματα.
🔍 Πλήρης διαφάνεια: βλέπεις ολόκληρο τον κώδικα που εκτελείς. Καμία επέκταση δεν σου προσφέρει αυτό.
🔄 Μεταφέρεται παντού: ο ίδιος κώδικας δουλεύει σε Chrome, Edge, Firefox, Brave, Opera και Safari.

Σύγκριση της ίδιας ιστοσελίδας πριν και μετά την ενεργοποίηση του Dark Mode bookmarklet

💻 Ο βασικός κώδικας του διακόπτη

Το script ελέγχει πρώτα αν το σκούρο θέμα είναι ήδη ενεργό. Αν είναι, το αφαιρεί· αν όχι, το εφαρμόζει, φροντίζοντας παράλληλα να μην παραμορφωθούν τα πολυμέσα:

Βασική έκδοση — αντιγραφή ολόκληρης της γραμμής

javascript:(function(){const id='custom-dark-mode-style';const existing=document.getElementById(id);if(existing){existing.remove();return;}const style=document.createElement('style');style.id=id;style.textContent='html { filter: invert(90%) hue-rotate(180deg) !important; background: #121212 !important; } img, video, canvas, svg { filter: invert(100%) hue-rotate(180deg) !important; }';document.documentElement.appendChild(style);})();

ℹ Πώς λειτουργεί
      Ο κώδικας εφαρμόζει ένα CSS φίλτρο που αντιστρέφει τη φωτεινότητα (invert) και στη συνέχεια περιστρέφει τη χρωματική παλέτα κατά 180 μοίρες (hue-rotate), ώστε τα χρώματα να παραμένουν φυσικά. Έπειτα εφαρμόζει την αντίστροφη αναστροφή σε εικόνες και βίντεο, ώστε να επανέρχονται στα κανονικά τους χρώματα. Το 90% αντί για 100% μειώνει την ένταση και κάνει το αποτέλεσμα πιο ξεκούραστο για τα μάτια.
    

🚀 Η βελτιωμένη έκδοση για δύσκολα sites

Η βασική έκδοση καλύπτει τη συντριπτική πλειονότητα των σελίδων. Σε πιο σύνθετα sites όμως θα εμφανιστούν ιδιομορφίες: ενσωματωμένα βίντεο μέσα σε iframe, χάρτες, ή εικόνες φόντου που αλλάζουν λάθος χρώματα. Η παρακάτω έκδοση αντιμετωπίζει αυτές τις περιπτώσεις:

Προχωρημένη έκδοση — καλύπτει iframes και εικόνες φόντου

javascript:(function(){const d=document,id='lft-dark-mode';const e=d.getElementById(id);if(e){e.remove();return;}const s=d.createElement('style');s.id=id;s.textContent='html{filter:invert(88%) hue-rotate(180deg)!important;background:#141414!important}img,video,canvas,svg,iframe,embed,object,picture,[style*="background-image"]{filter:invert(100%) hue-rotate(180deg)!important}';d.documentElement.appendChild(s);})();

Οι διαφορές είναι μικρές αλλά ουσιαστικές:

Προστίθενται iframe, embed, object και picture στις εξαιρέσεις, ώστε ενσωματωμένα βίντεο και χάρτες να εμφανίζονται σωστά.
Ο επιλογέας [style*="background-image"] εντοπίζει στοιχεία με inline εικόνες φόντου — κάτι πολύ συνηθισμένο σε σύγχρονα sites.
Χρησιμοποιείται textContent αντί για innerHTML, που είναι η ασφαλέστερη πρακτική για εισαγωγή CSS.
Το στυλ προσαρτάται στο documentElement αντί για το head, ώστε να λειτουργεί ακόμη και σε σελίδες με ασυνήθιστη δομή.

💡 Συμβουλή
      Αποθήκευσε και τις δύο εκδόσεις ως ξεχωριστά bookmarklets, με ονόματα 🌙 Dark και 🌚 Dark+. Αν κάποιο site δεν αποδώσει καλά με τη μία έκδοση, δοκιμάζεις την άλλη με ένα κλικ.
    

🛠️ Εγκατάσταση σε υπολογιστή

Οδηγίες προσθήκης του Dark Mode bookmarklet στη μπάρα σελιδοδεικτών

Εμφάνισε τη μπάρα σελιδοδεικτών: πάτησε Ctrl + Shift + B (σε Mac: Cmd + Shift + B). Η μπάρα εμφανίζεται ακριβώς κάτω από τη γραμμή διευθύνσεων.

Δημιούργησε νέο σελιδοδείκτη: κάνε δεξί κλικ σε κενό σημείο της μπάρας και επίλεξε «Προσθήκη σελίδας» ή «Νέος σελιδοδείκτης», ανάλογα με τον browser.

Συμπλήρωσε τα δύο πεδία:

Όνομα: 🌙 Dark Mode
URL / Διεύθυνση: επικόλλησε ολόκληρο τον κώδικα, μαζί με το javascript: στην αρχή.

Αποθήκευσε και δοκίμασε: άνοιξε οποιαδήποτε ιστοσελίδα και πάτησε το κουμπί. Με δεύτερο κλικ επανέρχεται το φωτεινό θέμα.

Το παράθυρο προσθήκης σελιδοδείκτη στον Chrome με τον κώδικα του bookmarklet στο πεδίο URL

⚠ Προσοχή στην επικόλληση
      Μην επικολλήσεις τον κώδικα στη γραμμή διευθύνσεων για δοκιμή. Οι περισσότεροι browsers αφαιρούν αυτόματα τη λέξη javascript: ως μέτρο ασφαλείας. Ο κώδικας πρέπει να μπει στο πεδίο URL του σελιδοδείκτη.
    

📱 Εγκατάσταση σε Android και iPhone

Στα κινητά δεν υπάρχει μπάρα σελιδοδεικτών, οπότε η διαδικασία αλλάζει: αποθηκεύεις έναν σελιδοδείκτη και τον καλείς γράφοντας το όνομά του στη γραμμή διευθύνσεων.

Chrome σε Android

Αποθήκευσε οποιαδήποτε σελίδα ως σελιδοδείκτη (εικονίδιο αστεριού).
Άνοιξε Σελιδοδείκτες, βρες τον σελιδοδείκτη και πάτησε Επεξεργασία.
Άλλαξε το όνομα σε darkmode και αντικατάστησε το URL με τον κώδικα.
Σε οποιαδήποτε σελίδα, γράψε darkmode στη γραμμή διευθύνσεων και επίλεξε το αποτέλεσμα.

Safari σε iPhone

Πρόσθεσε μια σελίδα στα Αγαπημένα.
Από τους σελιδοδείκτες, πάτησε Επεξεργασία και άνοιξε τον νέο σελιδοδείκτη.
Ονόμασέ τον darkmode και επικόλλησε τον κώδικα στη διεύθυνση.
Κάλεσέ τον γράφοντας το όνομα στη γραμμή διευθύνσεων.

ℹ Χρήσιμη λεπτομέρεια
      Δώσε ένα όνομα χωρίς κενά και χωρίς ελληνικούς χαρακτήρες. Έτσι η αυτόματη συμπλήρωση τον εμφανίζει από τα πρώτα γράμματα και η εκτέλεση γίνεται σχεδόν ακαριαία.
    

🎚️ Προσαρμογή: ένταση, τόνοι και εξαιρέσεις

Δεν χρειάζεται να ξέρεις JavaScript για να προσαρμόσεις το αποτέλεσμα στα γούστα σου. Αρκεί να αλλάξεις μερικούς αριθμούς μέσα στον κώδικα:

Τι θέλεις να αλλάξεις	Ποιο σημείο πειράζεις	Τι να δοκιμάσεις
Πιο απαλό σκούρο	`invert(90%)`	Κατέβασέ το στο `82%` ή `85%`
Πιο έντονη αντίθεση	`invert(90%)`	Ανέβασέ το στο `96%`
Απόχρωση φόντου	`background:#121212`	`#0f0f1a` για μπλε τόνο, `#1a1614` για ζεστό
Λιγότερο έντονα χρώματα	Πρόσθεσε φίλτρο	`saturate(85%)` μετά το `hue-rotate`
Εξαίρεση συγκεκριμένου στοιχείου	Λίστα επιλογέων	Πρόσθεσε την κλάση του, π.χ. `.logo`

Αν θέλεις πιο ήπιο αποτέλεσμα με ελαφρώς ξεθωριασμένα χρώματα, το φίλτρο γίνεται:

filter: invert(85%) hue-rotate(180deg) saturate(88%) !important;

📊 Bookmarklet vs επεκτάσεις vs ενσωματωμένο Dark Mode

Υπάρχουν τρεις δρόμοι για σκούρο θέμα στον browser — και καθένας εξυπηρετεί διαφορετική ανάγκη:

Χαρακτηριστικό	Bookmarklet	Επέκταση	Ενσωματωμένο
Κατανάλωση RAM / CPU	🟢 Μηδενική	🔴 Συνεχής στο παρασκήνιο	🟢 Μηδενική
Εγκατάσταση	🟢 Απλή επικόλληση	🟠 Λήψη από το Store	🟢 Ήδη υπάρχει
Ιδιωτικότητα	🟢 Βλέπεις τον κώδικα	⚠️ Πρόσβαση σε όλα τα sites	🟢 Πλήρης
Αυτόματη ενεργοποίηση	❌ Χειροκίνητο κλικ	✅ Σε κάθε σελίδα	✅ Όπου υποστηρίζεται
Κάλυψη ιστοσελίδων	🟢 Σχεδόν όλες	🟢 Σχεδόν όλες	🔴 Μόνο όσες το υποστηρίζουν
Ποιότητα αποτελέσματος	🟠 Καλή, αυτόματη	🟢 Ρυθμιζόμενη ανά site	🟢 Σχεδιασμένο από τον δημιουργό

Ο κανόνας που ακολουθώ: αν το site έχει δικό του σκούρο θέμα, χρησιμοποιώ αυτό. Αν δεν έχει και το επισκέπτομαι σπάνια, πατάω το bookmarklet. Επέκταση εγκαθιστώ μόνο αν περνάω ώρες κάθε μέρα σε συγκεκριμένα sites χωρίς dark mode.

🔧 Συνηθισμένα προβλήματα και λύσεις

Καμία λύση αναστροφής χρωμάτων δεν είναι τέλεια. Αυτά είναι τα πιο συνηθισμένα προβλήματα — και οι πρακτικές λύσεις τους:

Το σταθερό μενού «κολλάει» στη μέση της σελίδας Όταν εφαρμόζεται φίλτρο στο html, τα στοιχεία με position: fixed αλλάζουν σημείο αναφοράς. Είναι γνωστός περιορισμός του CSS. Λύση: κάνε κύλιση στην κορυφή πριν πατήσεις τον διακόπτη ή απενεργοποίησέ τον προσωρινά όταν χρειάζεσαι το μενού.

Δεν συμβαίνει απολύτως τίποτα Πιθανότατα λείπει το javascript: από την αρχή του κώδικα, επειδή το αφαίρεσε ο browser κατά την επικόλληση. Άνοιξε ξανά τον σελιδοδείκτη για επεξεργασία και πρόσθεσέ το χειροκίνητα.

Σε ορισμένα sites αγνοείται εντελώς Sites με αυστηρή πολιτική ασφαλείας περιεχομένου (CSP) μπλοκάρουν την εισαγωγή νέων στυλ. Δεν παρακάμπτεται — και δεν θα έπρεπε. Εκεί χρειάζεται επέκταση ή το ενσωματωμένο θέμα του site.

Δεν λειτουργεί σε σελίδες ρυθμίσεων του browser Οι εσωτερικές σελίδες (chrome://, edge://, about:) και οι σελίδες των επίσημων store είναι κλειδωμένες για λόγους ασφαλείας. Είναι αναμενόμενο.

Κάποιες εικόνες βγαίνουν με λάθος χρώματα Πρόκειται για εικόνες φόντου δηλωμένες σε εξωτερικό αρχείο CSS, τις οποίες ο επιλογέας δεν μπορεί να εντοπίσει. Η προχωρημένη έκδοση καλύπτει τις περισσότερες περιπτώσεις.

Χάνεται με την ανανέωση της σελίδας Είναι εξ ορισμού προσωρινό: ο κώδικας εκτελείται μία φορά και δεν αποθηκεύεται πουθενά. Αυτό ακριβώς είναι που τον κρατά ελαφρύ.

🔒 Ασφάλεια: τι πρέπει να προσέχεις

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

Δύο απλοί κανόνες σε καλύπτουν πλήρως:

🚫 Ποτέ σε τραπεζικά ή κρίσιμα sites: μην χρησιμοποιείς bookmarklets σε e-banking, φόρμες πληρωμών ή σελίδες όπου εισάγεις ευαίσθητα δεδομένα.
👀 Διάβασε πάντα τι εκτελείς: αν ο κώδικας περιέχει διευθύνσεις, fetch, eval ή είναι σκόπιμα δυσανάγνωστος, μην τον αποθηκεύσεις. Ο κώδικας αυτού του οδηγού είναι σύντομος και ευανάγνωστος ακριβώς για να μπορείς να τον ελέγξεις.

💡 Καλή πρακτική
      Κράτα έναν ξεχωριστό φάκελο σελιδοδεικτών με όνομα «Εργαλεία» και βάλε εκεί μόνο bookmarklets που έχεις διαβάσει και καταλάβει. Με τον καιρό γίνεται μια μικρή, αλλά πολύ χρήσιμη εργαλειοθήκη.
    

🙋 Η δική μου εμπειρία

Χρησιμοποιώ αυτό το bookmarklet καθημερινά εδώ και περίπου έναν χρόνο, αφού απεγκατέστησα δύο δημοφιλείς επεκτάσεις σκούρου θέματος. Ο λόγος δεν ήταν ιδεολογικός: παρατήρησα ότι ο Chrome με δεκαπέντε ανοιχτές καρτέλες κρατούσε αισθητά περισσότερη μνήμη με την επέκταση ενεργή, και ότι κάθε νέα καρτέλα άργησε λίγο περισσότερο να αποδοθεί.

Στην πράξη, το κλικ που πρέπει να κάνω σε κάθε σελίδα αποδείχθηκε πολύ μικρότερο πρόβλημα απ’ όσο φοβόμουν. Τα περισσότερα sites που επισκέπτομαι συχνά έχουν πλέον δικό τους dark mode, οπότε το bookmarklet το χρειάζομαι κυρίως σε παλιότερες σελίδες τεκμηρίωσης, φόρουμ και ελληνικά blogs που δεν έχουν ενημερωθεί εδώ και χρόνια. Εκεί κάνει ακριβώς τη δουλειά του.

Το μόνο σημείο που με ενόχλησε ήταν τα σταθερά μενού που μετακινούνται. Το έλυσα με μια συνήθεια αντί για κώδικα: πατάω τον διακόπτη μόλις ανοίξω τη σελίδα, πριν αρχίσω να κάνω κύλιση. Επίσης κρατάω δύο εκδόσεις — μία απαλή στο 85% για βραδινό διάβασμα και μία πιο έντονη στο 95% για τεχνικά κείμενα με πολύ κώδικα.

✅ Συμπέρασμα

Το Bookmarklet δεν αντικαθιστά μια καλοφτιαγμένη επέκταση αν χρειάζεσαι αυτόματο σκούρο θέμα παντού. Αντικαθιστά όμως εξαιρετικά καλά τη λογική «εγκαθιστώ κάτι μόνιμο για μια ανάγκη που έχω περιστασιακά».

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

❓ Συχνές ερωτήσεις

Λειτουργεί σε κινητά με Android ή iOS;

Ναι. Αποθηκεύεις το bookmarklet ως κανονικό σελιδοδείκτη στον Chrome ή στον Safari και το εκτελείς γράφοντας το όνομά του στη γραμμή διευθύνσεων ενώ βρίσκεσαι στη σελίδα που θέλεις.

Πρέπει να το πατάω σε κάθε νέα σελίδα;

Ναι, και αυτό είναι εσκεμμένο. Επειδή δεν τρέχει στο παρασκήνιο, δεν καταναλώνει πόρους. Για αυτόματη εφαρμογή χρειάζεσαι επέκταση ή userscript.

Είναι ασφαλές να εκτελώ JavaScript από σελιδοδείκτη;

Ο συγκεκριμένος κώδικας προσθέτει μόνο ένα στυλ στη σελίδα και δεν στέλνει δεδομένα πουθενά. Ο γενικός κανόνας είναι να μην αποθηκεύεις bookmarklet που δεν καταλαβαίνεις και να μην το χρησιμοποιείς σε τραπεζικές σελίδες.

Γιατί σε μερικά sites τα χρώματα φαίνονται περίεργα;

Η τεχνική αντιστρέφει ολόκληρη τη σελίδα και επαναφέρει τα πολυμέσα. Στοιχεία εκτός της λίστας εξαιρέσεων, όπως εικόνες φόντου από εξωτερικό CSS, παραμένουν αντεστραμμένα.

Δουλεύει σε όλους τους περιηγητές;

Ναι, σε Chrome, Edge, Firefox, Brave, Opera, Vivaldi και Safari. Εξαιρούνται οι εσωτερικές σελίδες του browser και sites με πολύ αυστηρή πολιτική ασφαλείας περιεχομένου.

Επιβαρύνει την ταχύτητα του υπολογιστή;

Το φίλτρο CSS επεξεργάζεται από την κάρτα γραφικών και το κόστος είναι πρακτικά αμελητέο σε κάθε σύγχρονο μηχάνημα.