Repository: darkreader/darkreader
Pull request #1552 (2019-09-07 09:31:08)

added dplay.com as is dark


Patch:
diff --git a/.eslintrc.js b/.eslintrc.js
index 9b7a5625..4abd87ce 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -9,6 +9,7 @@ module.exports = {
         'no-multi-spaces': 'error',
         'no-trailing-spaces': 'error',
         'no-whitespace-before-property': 'error',
+        'semi': ['error', 'always'],
         'space-before-function-paren': ['error', {
             anonymous: 'always',
             named: 'never',
diff --git a/src/_locales/be.config b/src/_locales/be.config
index ae794ffa..f5541014 100644
--- a/src/_locales/be.config
+++ b/src/_locales/be.config
@@ -27,12 +27,21 @@
 Уст. спалучэнне
 клавіш
 
-@time_settings
-Налады часу
+@automation
+Аўтаматызацыя
 
 @set_active_hours
 Усталюйце перыяд актыўнасці
 
+@set_location
+Увядзіце прыблізнае месца для аўтаматычнай актывацыі на заходзе
+
+@longitude
+Даўгата
+
+@latitude
+Шырата
+
 @page_protected
 Гэтая старонка ахоўваецца
 браўзэрам
@@ -41,6 +50,12 @@
 Гэтая старонка ў глаб.
 спісе Цёмных Сайтаў
 
+@system_dark_mode
+Выкарыстоўваць сістэмныя колеры
+
+@system_dark_mode_description
+Уключыць калі сістэмны начны рэжым актыўны
+
 
 #==== Filter ====
 
diff --git a/src/_locales/cs.config b/src/_locales/cs.config
index a9e06bfd..c8fc3563 100644
--- a/src/_locales/cs.config
+++ b/src/_locales/cs.config
@@ -27,12 +27,21 @@ Přepnout rozšíření
 Nastavit klávesovou
 pro přepínání rozšíř.
 
-@time_settings
-Nastavení času
+@automation
+Automatizace
 
 @set_active_hours
 Změňte doby aktivního používání
 
+@set_location
+Zadejte vaši přibližnou polohu pro automatickou aktivaci při západu slunce
+
+@longitude
+Zeměpisná délka
+
+@latitude
+Zeměpisná šířka
+
 @page_protected
 Tato stránka je chráněna
 prohlížečem
@@ -41,6 +50,12 @@ prohlížečem
 Tato stránka je v seznamu
 stránek s tmavým motivem
 
+@system_dark_mode
+Použít barevný systém schéma
+
+@system_dark_mode_description
+Aktivovat při zapnutém systému dark režim
+
 
 #==== Filter ====
 
diff --git a/src/_locales/de.config b/src/_locales/de.config
index ed165ee3..47c862ab 100644
--- a/src/_locales/de.config
+++ b/src/_locales/de.config
@@ -27,12 +27,21 @@ Erweiterung
 Hotkey zum (de)aktivieren
 der Erweiterung
 
-@time_settings
-Zeit Einstellungen
+@automation
+Automatisierung
 
 @set_active_hours
 Ändern die Nutzungszeit
 
+@set_location
+Geben Sie Ihren ungefähren Standort für die automatische Aktivierung bei Sonnenuntergang
+
+@longitude
+Längengrad
+
+@latitude
+Breite
+
 @page_protected
 Diese Seite ist durch
 den Browser geschützt
@@ -41,6 +50,12 @@ den Browser geschützt
 Seite befindet sich auf der
 permanenten Dunkel-Liste
 
+@system_dark_mode
+Das System-Farbschema
+
+@system_dark_mode_description
+Aktivieren, wenn das System dunkel-Modus eingeschaltet ist
+
 
 #==== Filter ====
 
diff --git a/src/_locales/el.config b/src/_locales/el.config
index a7d47a3c..7157ba51 100644
--- a/src/_locales/el.config
+++ b/src/_locales/el.config
@@ -27,12 +27,21 @@ Off
 Ρυθμίσεις πρόσθετου
 αλλαγή hotkey
 
-@time_settings
-Ρυθμίσεις ώρας
+@automation
+Αυτοματοποίηση
 
 @set_active_hours
 Ορισμός ενεργών ωρών
 
+@set_location
+Καταχωρίστε την κατά προσέγγιση τοποθεσία σας για αυτόματη ενεργοποίηση κατά το ηλιοβασίλεμα
+
+@longitude
+Γεωγραφικό μήκος
+
+@latitude
+Γεωγραφικό πλάτος
+
 @page_protected
 Η σελίδα αυτή
 προστατεύεται
@@ -41,6 +50,12 @@ Off
 Η σελίδα αυτή είναι
 παγκόσμια Σκούρα Λίστα
 
+@system_dark_mode
+Χρησιμοποιήστε το συνδυασμό χρωμάτων του συστήματος
+
+@system_dark_mode_description
+Ενεργοποιείται όταν το σύστημα σκοτεινή λειτουργία είναι ενεργοποιημένη
+
 
 #==== Filter ====
 
diff --git a/src/_locales/en.config b/src/_locales/en.config
index e8157d23..72b8ab07 100644
--- a/src/_locales/en.config
+++ b/src/_locales/en.config
@@ -27,12 +27,21 @@ Toggle extension
 Setup extension
 toggle hotkey
 
-@time_settings
-Time settings
+@automation
+Automation
 
 @set_active_hours
 Set active hours
 
+@set_location
+Enter your approximate location for automatic activation at sunset
+
+@longitude
+Longitude
+
+@latitude
+Latitude
+
 @page_protected
 This page is protected
 by browser
@@ -41,6 +50,12 @@ by browser
 This site is in global
 Dark List
 
+@system_dark_mode
+Use system color scheme
+
+@system_dark_mode_description
+Activate when system dark mode is on
+
 
 #==== Filter ====
 
diff --git a/src/_locales/en_GB.config b/src/_locales/en_GB.config
index 7351c098..0191e126 100644
--- a/src/_locales/en_GB.config
+++ b/src/_locales/en_GB.config
@@ -27,12 +27,21 @@ Toggle extension
 Setup extension
 toggle hotkey
 
-@time_settings
-Time settings
+@automation
+Automation
 
 @set_active_hours
 Set active hours
 
+@set_location
+Enter your approximate location for automatic activation at sunset
+
+@longitude
+Longitude
+
+@latitude
+Latitude
+
 @page_protected
 This page is protected
 by browser
@@ -41,6 +50,12 @@ by browser
 This site is in global
 Dark List
 
+@system_dark_mode
+Use system colour scheme
+
+@system_dark_mode_description
+Activate when system dark mode is on
+
 
 #==== Filter ====
 
diff --git a/src/_locales/en_US.config b/src/_locales/en_US.config
index e8157d23..72b8ab07 100644
--- a/src/_locales/en_US.config
+++ b/src/_locales/en_US.config
@@ -27,12 +27,21 @@ Toggle extension
 Setup extension
 toggle hotkey
 
-@time_settings
-Time settings
+@automation
+Automation
 
 @set_active_hours
 Set active hours
 
+@set_location
+Enter your approximate location for automatic activation at sunset
+
+@longitude
+Longitude
+
+@latitude
+Latitude
+
 @page_protected
 This page is protected
 by browser
@@ -41,6 +50,12 @@ by browser
 This site is in global
 Dark List
 
+@system_dark_mode
+Use system color scheme
+
+@system_dark_mode_description
+Activate when system dark mode is on
+
 
 #==== Filter ====
 
diff --git a/src/_locales/es.config b/src/_locales/es.config
index a28f1765..4d05b996 100644
--- a/src/_locales/es.config
+++ b/src/_locales/es.config
@@ -27,12 +27,21 @@ Alternar extensión
 Configurar extensión
 Tecla de atajo
 
-@time_settings
-Ajustes de hora
+@automation
+Automatización
 
 @set_active_hours
 Establece horas activas
 
+@set_location
+Ingrese su ubicación aproximada para la activación automática al atardecer
+
+@longitude
+Longitud
+
+@latitude
+Latitud
+
 @page_protected
 Esta página está protegida
 por el navegador
@@ -41,6 +50,12 @@ por el navegador
 Este sitio está en la
 lista global Dark List
 
+@system_dark_mode
+Uso esquema de color del sistema
+
+@system_dark_mode_description
+Activar el modo oscuro cuando el sistema está encendido
+
 
 #==== Filter ====
 
diff --git a/src/_locales/fr.config b/src/_locales/fr.config
index 29107e22..3b74c7f6 100644
--- a/src/_locales/fr.config
+++ b/src/_locales/fr.config
@@ -27,12 +27,21 @@ Activer/Désactiver l'extension
 Configuration de l'extension
 Touche de raccourci bascule
 
-@time_settings
-Paramètres de temps
+@automation
+Automatisation
 
 @set_active_hours
 Définissez les heures d’activité
 
+@set_location
+Entrez votre emplacement approximatif pour l'activation automatique au coucher du soleil
+
+@longitude
+Longitude
+
+@latitude
+Latitude
+
 @page_protected
 Cette page est protégée
 par le navigateur
@@ -41,6 +50,12 @@ par le navigateur
 Ce site est dans la
 liste noire mondiale
 
+@system_dark_mode
+Utilisez des couleurs du système
+
+@system_dark_mode_description
+Activer lorsque le mode sombre du système est
+
 
 #==== Filter ====
 
diff --git a/src/_locales/hi.config b/src/_locales/hi.config
index 441a3c6b..01fca7ba 100644
--- a/src/_locales/hi.config
+++ b/src/_locales/hi.config
@@ -27,12 +27,21 @@
 एक्सटेंशन टॉगल हॉटकी
 सेटअप करें
 
-@time_settings
-समय सेंट करें
+@automation
+स्वचालन
 
 @set_active_hours
 सक्रिय घंटे सेट करें
 
+@set_location
+सूर्यास्त पर स्वचालित सक्रियण के लिए अपना अनुमानित स्थान दर्ज करें
+
+@longitude
+देशान्तर
+
+@latitude
+अक्षांश
+
 @page_protected
 यह पृष्ठ ब्राउज़र
 द्वारा संरक्षित है
@@ -41,6 +50,12 @@
 यह साइट वैश्विक
 डार्क लिस्ट में है
 
+@system_dark_mode
+उपयोग प्रणाली रंग योजना
+
+@system_dark_mode_description
+सक्रिय करें जब सिस्टम अंधेरे मोड पर है
+
 
 #==== Filter ====
 
diff --git a/src/_locales/id.config b/src/_locales/id.config
index beaebc08..5741c1ed 100644
--- a/src/_locales/id.config
+++ b/src/_locales/id.config
@@ -27,12 +27,21 @@ Saklar ekstensi
 Setelan ekstensi
 Saklar Pintasan
 
-@time_settings
-Pengaturan waktu
+@automation
+Otomatisasi
 
 @set_active_hours
 Ubah waktu aktivitas
 
+@set_location
+Masukkan perkiraan lokasi Anda untuk aktivasi otomatis saat matahari terbenam
+
+@longitude
+Garis bujur
+
+@latitude
+Lintang
+
 @page_protected
 Halaman ini dilindungi
 oleh browser
@@ -41,6 +50,12 @@ oleh browser
 Situs ini berada dalam daftar
 Mode Malam
 
+@system_dark_mode
+Gunakan skema warna sistem
+
+@system_dark_mode_description
+Aktifkan ketika sistem modus gelap di
+
 
 #==== Filter ====
 
diff --git a/src/_locales/it.config b/src/_locales/it.config
index eb1b8c21..ed51c052 100644
--- a/src/_locales/it.config
+++ b/src/_locales/it.config
@@ -27,12 +27,21 @@ per il sito attuale
 Tasti di scelta rapida
 dell'estensione
 
-@time_settings
-Impostazioni del tempo
+@automation
+Automazione
 
 @set_active_hours
 Imposta l'orario di attività
 
+@set_location
+Inserisci la posizione approssimativa per l'attivazione automatica al tramonto
+
+@longitude
+Longitudine
+
+@latitude
+Latitudine
+
 @page_protected
 Questa pagina è protetta
 dal browser
@@ -41,6 +50,12 @@ dal browser
 Questo sito è nella
 Dark List globale
 
+@system_dark_mode
+Usa schema di colori del sistema
+
+@system_dark_mode_description
+Attiva quando la modalità scura sistema è acceso
+
 
 #==== Filter ====
 
diff --git a/src/_locales/ja.config b/src/_locales/ja.config
index 29023788..62964acc 100644
--- a/src/_locales/ja.config
+++ b/src/_locales/ja.config
@@ -27,12 +27,21 @@
 セットアップ拡張
 トグルホットキー
 
-@time_settings
-時間設定
+@automation
+自動化
 
 @set_active_hours
 アクティブ時間を設定する
 
+@set_location
+日没時に自動起動するおおよその場所を入力してください
+
+@longitude
+経度
+
+@latitude
+緯度
+
 @page_protected
 このページはブラウザに
 よって保護されています
@@ -41,6 +50,12 @@
 このサイトはグローバル
 ダークリストに含まれています
 
+@system_dark_mode
+システムのカラースキームを使用します
+
+@system_dark_mode_description
+システムダークモードがオンのときに有効に
+
 
 #==== Filter ====
 
diff --git a/src/_locales/ko.config b/src/_locales/ko.config
index c7047e37..c3418062 100644
--- a/src/_locales/ko.config
+++ b/src/_locales/ko.config
@@ -27,12 +27,21 @@
 확장 기능 설정하기
 바로 가기 전환
 
-@time_settings
-시간 설정
+@automation
+오토메이션
 
 @set_active_hours
 사용 시간 설정
 
+@set_location
+일몰시 자동 활성화를위한 대략적인 위치를 입력하십시오
+
+@longitude
+경도
+
+@latitude
+위도
+
 @page_protected
 이 페이지는
 브라우저에 의해 보호되어 있습니다.
@@ -41,6 +50,12 @@
 이 사이트는 이미
 전체 목록에 있습니다
 
+@system_dark_mode
+사용 시스템 색 구성표
+
+@system_dark_mode_description
+시스템 어두운 모드가 켜져있을 때 활성화
+
 
 #==== Filter ====
 
diff --git a/src/_locales/nl.config b/src/_locales/nl.config
index 4a89e8af..92394b4c 100644
--- a/src/_locales/nl.config
+++ b/src/_locales/nl.config
@@ -27,12 +27,21 @@ Ext. in of uit schakelen
 Sneltoets instellen
 extensie in of uit schakelen
 
-@time_settings
-Tijd instellingen
+@automation
+Automatisering
 
 @set_active_hours
 Actieve uren instellen
 
+@set_location
+Voer uw geschatte locatie in voor automatische activering bij zonsondergang
+
+@longitude
+Lengtegraad
+
+@latitude
+Breedtegraad
+
 @page_protected
 Deze pagina is beschermd
 door de browser
@@ -41,6 +50,12 @@ door de browser
 Deze site staat op
 de globale lijst
 
+@system_dark_mode
+Gebruik systeem kleurenschema
+
+@system_dark_mode_description
+Geactiveerd als het systeem donkere mode aanstaat
+
 
 #==== Filter ====
 
diff --git a/src/_locales/no.config b/src/_locales/no.config
index 83a06d7e..17ab01e8 100644
--- a/src/_locales/no.config
+++ b/src/_locales/no.config
@@ -27,12 +27,21 @@ Slå utvidelsen på/av
 Sett opp hurtigtast for
 å slå utvidelsen på/av
 
-@time_settings
-Tidsinnstillinger
+@automation
+Automasjon
 
 @set_active_hours
 Angi aktivitetsperiode
 
+@set_location
+Angi ditt omtrentlige sted for automatisk aktivering ved solnedgang
+
+@longitude
+Lengdegrad
+
+@latitude
+Breddegrad
+
 @page_protected
 Denne siden er beskyttet
 av nettleseren
@@ -41,6 +50,12 @@ av nettleseren
 Siden er i den globale
 mørk-modus listen
 
+@system_dark_mode
+Bruk systemfargevalg
+
+@system_dark_mode_description
+Aktiveres når systemet mørk modus er på
+
 
 #==== Filter ====
 
diff --git a/src/_locales/pt_BR.config b/src/_locales/pt_BR.config
index 49c6e2c6..83d5d963 100644
--- a/src/_locales/pt_BR.config
+++ b/src/_locales/pt_BR.config
@@ -27,12 +27,21 @@ Alternar extensão
 Tecla de atalho de alternância
 da extensão de configuração
 
-@time_settings
-Configurações de tempo
+@automation
+Automação
 
 @set_active_hours
 Defina o horário ativo
 
+@set_location
+Insira sua localização aproximada para ativação automática ao pôr do sol
+
+@longitude
+Longitude
+
+@latitude
+Latitude
+
 @page_protected
 Esta página é protegida
 pelo navegador
@@ -41,6 +50,12 @@ pelo navegador
 Este site está na lista
 negra global
 
+@system_dark_mode
+Use esquema de cores do sistema
+
+@system_dark_mode_description
+Ative quando o modo escuro sistema estiver ligado
+
 
 #==== Filter ====
 
diff --git a/src/_locales/pt_PT.config b/src/_locales/pt_PT.config
index 2bd10abf..90f4807b 100644
--- a/src/_locales/pt_PT.config
+++ b/src/_locales/pt_PT.config
@@ -27,12 +27,21 @@ Alternar extensão
 Tecla de atalho de alternância
 da extensão de configuração
 
-@time_settings
-Configurações de tempo
+@automation
+Automação
 
 @set_active_hours
 Defina as horas de atividade
 
+@set_location
+Insira sua localização aproximada para ativação automática ao pôr do sol
+
+@longitude
+Longitude
+
+@latitude
+Latitude
+
 @page_protected
 Esta página é protegida
 pelo navegador
@@ -41,6 +50,12 @@ pelo navegador
 Este site está na lista
 negra global
 
+@system_dark_mode
+Use esquema de cores do sistema
+
+@system_dark_mode_description
+Ative quando o modo escuro sistema estiver ligado
+
 
 #==== Filter ====
 
diff --git a/src/_locales/ro.config b/src/_locales/ro.config
index 2b5b5233..e2bbb0db 100755
--- a/src/_locales/ro.config
+++ b/src/_locales/ro.config
@@ -27,12 +27,21 @@ Comută extensia
 Setează extensia
 scurtătură comutare
 
-@time_settings
-Setări de timp
+@automation
+Automatizare
 
 @set_active_hours
 Setați orele de activitate
 
+@set_location
+Introduceți locația dvs. aproximativă pentru activarea automată la apusul soarelui
+
+@longitude
+Longitudine
+
+@latitude
+Latitudine
+
 @page_protected
 Această pagină este protejată
 de navigator
@@ -41,6 +50,12 @@ de navigator
 Acest site este în
 Lista Întunecată globală
 
+@system_dark_mode
+Utilizați schema de culori sistem
+
+@system_dark_mode_description
+Activați când modul întunecat sistem este pornit
+
 
 #==== Filter ====
 
diff --git a/src/_locales/ru.config b/src/_locales/ru.config
index 5247f3de..fe6c6455 100644
--- a/src/_locales/ru.config
+++ b/src/_locales/ru.config
@@ -27,12 +27,21 @@
 Уст. сочетание
 клавиш
 
-@time_settings
-Настройки времени
+@automation
+Автоматизация
 
 @set_active_hours
 Установите период активности
 
+@set_location
+Введите приблизительное местоположение для автоматической активации на закате
+
+@longitude
+Долгота
+
+@latitude
+широта
+
 @page_protected
 Эта страница защищена
 браузером
@@ -41,6 +50,12 @@
 Эта страница в глоб
 списке Тёмных Сайтов
 
+@system_dark_mode
+Использовать системную цветовую схему
+
+@system_dark_mode_description
+Включить когда системный ночной режим активен
+
 
 #==== Filter ====
 
diff --git a/src/_locales/si.config b/src/_locales/si.config
index 7878d74f..3d3f2528 100644
--- a/src/_locales/si.config
+++ b/src/_locales/si.config
@@ -27,12 +27,21 @@ Extension එක toggle කරන්න
 Extension එක සකසන්න
 ඉක්මන් ප්‍රවේශ යතුරු (hotkey) toggle කරන්න
 
-@time_settings
-කාල සැකසුම්
+@automation
+ස්වයංක්රීයකරණය
 
 @set_active_hours
 ක්‍රියාකාරී වේලාවන් සකසන්න
 
+@set_location
+හිරු බැස යෑමේදී ස්වයංක්‍රීයව ක්‍රියාත්මක කිරීම සඳහා ඔබගේ ආසන්න ස්ථානය ඇතුළත් කරන්න
+
+@longitude
+දේශාංශ
+
+@latitude
+අක්ෂාංශ
+
 @page_protected
 මෙම පිටුව ආරක්‍ෂා කර ඇත
 බ්‍රව්සරය මඟින්
@@ -41,6 +50,12 @@ Extension එක සකසන්න
 මෙම වෙබ් අඩවිය ගෝලීය වේ
 අඳුරු ලැයිස්තුව
 
+@system_dark_mode
+පද්ධතිය වර්ණ භාවිතා කරන්න
+
+@system_dark_mode_description
+පද්ධතිය අඳුරු මාදිලිය මත විට ක්රියාත්මක
+
 
 #==== Filter ====
 
diff --git a/src/_locales/th.config b/src/_locales/th.config
index 0c10d25f..0ff5f11b 100644
--- a/src/_locales/th.config
+++ b/src/_locales/th.config
@@ -27,12 +27,21 @@
 ตั้งค่าคีย์ลัดสำหรับ
 สลับโหมดเปิด-ปิด
 
-@time_settings
-การตั้งเวลา
+@automation
+การทำงานอัตโนมัติ
 
 @set_active_hours
 ตั้งเวลาที่เริ่มทำงาน
 
+@set_location
+ป้อนตำแหน่งโดยประมาณของคุณสำหรับการเปิดใช้งานอัตโนมัติเมื่อพระอาทิตย์ตก
+
+@longitude
+ลองจิจูด
+
+@latitude
+ละติจูด
+
 @page_protected
 หน้านี้ถูกป้องกัน
 โดยเว็บเบราเซอร์
@@ -41,6 +50,12 @@
 เว็บนี้อยู่ในรายชื่อ
 ที่มีธีมมืดให้ใช้
 
+@system_dark_mode
+ใช้โทนสีระบบ
+
+@system_dark_mode_description
+เปิดใช้งานเมื่อระบบโหมดมืดอยู่บน
+
 
 #==== Filter ====
 
diff --git a/src/_locales/tr.config b/src/_locales/tr.config
index c6b204a6..5cd1d1b0 100644
--- a/src/_locales/tr.config
+++ b/src/_locales/tr.config
@@ -27,12 +27,21 @@ Eklentiyi aç-kapat
 Eklenti aç-kapat
 kısayol tuşu ayarla
 
-@time_settings
-Zaman ayarları
+@automation
+Otomasyon
 
 @set_active_hours
 Etkin saatleri ayarla
 
+@set_location
+Günbatımında otomatik aktivasyon için yaklaşık konumunuzu girin
+
+@longitude
+Boylam
+
+@latitude
+Enlem
+
 @page_protected
 Bu sayfa tarayıcı
 tarafından korunuyor
@@ -41,6 +50,12 @@ tarafından korunuyor
 Bu site genel
 Koyu Listesinde
 
+@system_dark_mode
+Sistemin renk düzeni
+
+@system_dark_mode_description
+Sistem karanlık modu açıkken etkinleştirme
+
 
 #==== Filter ====
 
diff --git a/src/_locales/uk.config b/src/_locales/uk.config
index fc1f76a4..e4ddd989 100644
--- a/src/_locales/uk.config
+++ b/src/_locales/uk.config
@@ -27,12 +27,21 @@
 Налаштувати гарячу клавішу
 для розширення
 
-@time_settings
-Налаштування часу
+@automation
+Автоматизація
 
 @set_active_hours
 Встановити робочий час
 
+@set_location
+Введіть своє приблизне місце для автоматичної активації на заході сонця
+
+@longitude
+Довгота
+
+@latitude
+Широта
+
 @page_protected
 Ця сторінка захищена
 браузером
@@ -41,6 +50,12 @@
 Цей сайт у глобальному
 "Темному Списку"
 
+@system_dark_mode
+Використовувати системну колірну схему
+
+@system_dark_mode_description
+Активізувати коли системний нічний режим включений
+
 
 #==== Filter ====
 
diff --git a/src/_locales/zh_CN.config b/src/_locales/zh_CN.config
index 148e186c..21b50e5c 100644
--- a/src/_locales/zh_CN.config
+++ b/src/_locales/zh_CN.config
@@ -27,12 +27,21 @@
 设置扩展的
 开关快捷键
 
-@time_settings
-时间设置
+@automation
+自动化
 
 @set_active_hours
 设置使用时段
 
+@set_location
+输入您在日落时自动激活的大致位置
+
+@longitude
+经度
+
+@latitude
+纬度
+
 @page_protected
 此页面受
 浏览器保护
@@ -41,6 +50,12 @@
 此网站位于全球
 黑暗列表中
 
+@system_dark_mode
+使用系统的配色方案
+
+@system_dark_mode_description
+激活时，系统暗模式开启
+
 
 #==== Filter ====
 
diff --git a/src/_locales/zh_TW.config b/src/_locales/zh_TW.config
index 61a81b84..c69fd760 100644
--- a/src/_locales/zh_TW.config
+++ b/src/_locales/zh_TW.config
@@ -27,12 +27,21 @@
 設置擴展的
 開關快捷鍵
 
-@time_settings
-時間設置
+@automation
+自動化
 
 @set_active_hours
 設定使用時間
 
+@set_location
+輸入您在日落時自動激活的大致位置
+
+@longitude
+經度
+
+@latitude
+緯度
+
 @page_protected
 此頁面受
 瀏覽器保護
@@ -41,6 +50,12 @@
 此網站位於全局
 黑暗列表中
 
+@system_dark_mode
+使用系統配色方案
+
+@system_dark_mode_description
+系統暗設置模式打開時激活
+
 
 #==== Filter ====
 
diff --git a/src/api/chrome.ts b/src/api/chrome.ts
index e5db38e6..c4571314 100644
--- a/src/api/chrome.ts
+++ b/src/api/chrome.ts
@@ -16,7 +16,7 @@ if (window.chrome.runtime.sendMessage) {
         nativeSendMessage.apply(window.chrome.runtime, args);
     };
 } else {
-    window.chrome.runtime.sendMessage = throwCORSError
+    window.chrome.runtime.sendMessage = throwCORSError;
 }
 if (!window.chrome.runtime.onMessage) {
     window.chrome.runtime.onMessage = {
diff --git a/src/background/extension.ts b/src/background/extension.ts
index d7fe3e77..baf6ba4f 100644
--- a/src/background/extension.ts
+++ b/src/background/extension.ts
@@ -8,7 +8,7 @@ import UserStorage from './user-storage';
 import {setWindowTheme, resetWindowTheme} from './window-theme';
 import {getFontList, getCommands, setShortcut, canInjectScript} from './utils/extension-api';
 import {isFirefox} from '../utils/platform';
-import {isInTimeInterval, getDuration} from '../utils/time';
+import {isInTimeInterval, getDuration, isNightAtLocation} from '../utils/time';
 import {isURLInList, getURLHost, isURLEnabled} from '../utils/url';
 import ThemeEngines from '../generators/theme-engines';
 import createCSSFilterStylesheet from '../generators/css-filter';
@@ -16,6 +16,7 @@ import {getDynamicThemeFixesFor} from '../generators/dynamic-theme';
 import createStaticStylesheet from '../generators/static-theme';
 import {createSVGFilterStylesheet, getSVGFilterMatrixValue, getSVGReverseFilterMatrixValue} from '../generators/svg-filter';
 import {ExtensionData, FilterConfig, News, Shortcuts, UserSettings, TabInfo} from '../definitions';
+import {isSystemDarkModeEnabled} from '../utils/media-query';
 
 const AUTO_TIME_CHECK_INTERVAL = getDuration({seconds: 10});
 
@@ -41,16 +42,29 @@ export class Extension {
         this.news = new Newsmaker((news) => this.onNewsUpdate(news));
         this.tabs = new TabManager({
             getConnectionMessage: (url, frameURL) => this.getConnectionMessage(url, frameURL),
+            onColorSchemeChange: this.onColorSchemeChange,
         });
         this.user = new UserStorage();
         this.awaiting = [];
     }
 
     isEnabled() {
-        if (this.user.settings.automation === 'time') {
+        const {automation} = this.user.settings;
+        if (automation === 'time') {
             const now = new Date();
             return isInTimeInterval(now, this.user.settings.time.activation, this.user.settings.time.deactivation);
+        } else if (automation === 'system') {
+            return isSystemDarkModeEnabled();
+        } else if (automation === 'location') {
+            const latitude = this.user.settings.location.latitude;
+            const longitude = this.user.settings.location.longitude;
+
+            if (latitude != null && longitude != null) {
+                const now = new Date();
+                return isNightAtLocation(now, latitude, longitude);
+            }
         }
+
         return this.user.settings.enabled;
     }
 
@@ -190,19 +204,33 @@ export class Extension {
 
     private startAutoTimeCheck() {
         setInterval(() => {
-            if (!this.ready || this.user.settings.automation !== 'time') {
+            if (!this.ready || this.user.settings.automation === '') {
                 return;
             }
-            const isEnabled = this.isEnabled();
-            if (this.wasEnabledOnLastCheck !== isEnabled) {
-                this.wasEnabledOnLastCheck = isEnabled;
-                this.onAppToggle();
-                this.tabs.sendMessage(this.getTabMessage);
-                this.reportChanges();
-            }
+            this.handleAutoCheck();
         }, AUTO_TIME_CHECK_INTERVAL);
     }
 
+    private onColorSchemeChange = () => {
+        if (this.user.settings.automation !== 'system') {
+            return;
+        }
+        this.handleAutoCheck();
+    };
+
+    private handleAutoCheck = () => {
+        if (!this.ready) {
+            return;
+        }
+        const isEnabled = this.isEnabled();
+        if (this.wasEnabledOnLastCheck !== isEnabled) {
+            this.wasEnabledOnLastCheck = isEnabled;
+            this.onAppToggle();
+            this.tabs.sendMessage(this.getTabMessage);
+            this.reportChanges();
+        }
+    };
+
     changeSettings($settings: Partial<UserSettings>) {
         const prev = {...this.user.settings};
 
@@ -212,7 +240,9 @@ export class Extension {
             (prev.enabled !== this.user.settings.enabled) ||
             (prev.automation !== this.user.settings.automation) ||
             (prev.time.activation !== this.user.settings.time.activation) ||
-            (prev.time.deactivation !== this.user.settings.time.deactivation)
+            (prev.time.deactivation !== this.user.settings.time.deactivation) ||
+            (prev.location.latitude !== this.user.settings.location.latitude) ||
+            (prev.location.longitude !== this.user.settings.location.longitude)
         ) {
             this.onAppToggle();
         }
diff --git a/src/background/tab-manager.ts b/src/background/tab-manager.ts
index 219dd1f8..1702f4e2 100644
--- a/src/background/tab-manager.ts
+++ b/src/background/tab-manager.ts
@@ -10,6 +10,7 @@ function queryTabs(query: chrome.tabs.QueryInfo) {
 
 interface TabManagerOptions {
     getConnectionMessage: (url: string, frameUrl: string) => any;
+    onColorSchemeChange: () => void;
 }
 
 interface PortInfo {
@@ -20,7 +21,7 @@ interface PortInfo {
 export default class TabManager {
     private ports: Map<number, Map<number, PortInfo>>;
 
-    constructor({getConnectionMessage}: TabManagerOptions) {
+    constructor({getConnectionMessage, onColorSchemeChange}: TabManagerOptions) {
         this.ports = new Map();
         chrome.runtime.onConnect.addListener((port) => {
             if (port.name === 'tab') {
@@ -67,6 +68,10 @@ export default class TabManager {
                     sendResponse({error: err && err.message ? err.message : err});
                 }
             }
+
+            if (type === 'color-scheme-change') {
+                onColorSchemeChange();
+            }
         });
     }
 
diff --git a/src/background/user-storage.ts b/src/background/user-storage.ts
index 7106b660..e7ef61cd 100644
--- a/src/background/user-storage.ts
+++ b/src/background/user-storage.ts
@@ -34,6 +34,10 @@ export default class UserStorage {
                 activation: '18:00',
                 deactivation: '9:00',
             },
+            location: {
+                latitude: null,
+                longitude: null,
+            }
         };
         this.settings = null;
     }
diff --git a/src/background/window-theme.ts b/src/background/window-theme.ts
index 0d0e15c5..2440a3b8 100644
--- a/src/background/window-theme.ts
+++ b/src/background/window-theme.ts
@@ -36,7 +36,7 @@ const themeColorTypes = {
     toolbar_text: 'text',
     toolbar_top_separator: 'border',
     toolbar_vertical_separator: 'border',
-}
+};
 
 const $colors = {
     accentcolor: '#111111',
diff --git a/src/config/dark-sites.config b/src/config/dark-sites.config
index e5abba94..bae9565c 100644
--- a/src/config/dark-sites.config
+++ b/src/config/dark-sites.config
@@ -52,6 +52,7 @@ dota2.com
 dota2.ru
 dotabuff.com
 dotapicker.com
+dplay.com
 dpreview.com
 draculatheme.com
 draftkings.com
diff --git a/src/config/dynamic-theme-fixes.config b/src/config/dynamic-theme-fixes.config
index 8e90019b..caf62ccf 100644
--- a/src/config/dynamic-theme-fixes.config
+++ b/src/config/dynamic-theme-fixes.config
@@ -560,15 +560,12 @@ nav {
 
 marketplace.visualstudio.com
 
-INVERT
-.ms-Grid-row
-
 CSS
-.details-tab {
-  color: ${rgba(201, 199, 197, 0.9)} !important;
+.ux-updated-date {
+    color: ${rgb(55, 255, 0)} !important;
 }
-.reviews-row .ux-updated-date {
-    color: ${rgb(255, 255, 182)} !important;
+.ms-Grid-row {
+    color: ${rgba(0, 0, 0, .8)} !important;
 }
 
 ================================
diff --git a/src/definitions.d.ts b/src/definitions.d.ts
index 88ed028f..208adc13 100644
--- a/src/definitions.d.ts
+++ b/src/definitions.d.ts
@@ -63,8 +63,9 @@ export interface UserSettings {
     changeBrowserTheme: boolean;
     notifyOfNews: boolean;
     syncSettings: boolean;
-    automation: string;
+    automation: '' | 'time' | 'system' | 'location';
     time: TimeSettings;
+    location: LocationSettings;
 }
 
 export interface TimeSettings {
@@ -72,6 +73,11 @@ export interface TimeSettings {
     deactivation: string;
 }
 
+export interface LocationSettings {
+    latitude: number;
+    longitude: number;
+}
+
 export interface TabInfo {
     url: string;
     isProtected: boolean;
diff --git a/src/generators/modify-colors.ts b/src/generators/modify-colors.ts
index 1a4f6c23..37af1fa9 100644
--- a/src/generators/modify-colors.ts
+++ b/src/generators/modify-colors.ts
@@ -28,7 +28,7 @@ function modifyColorWithCache(rgb: RGBA, filter: FilterConfig, modifyHSL: (hsl:
     const hsl = rgbToHSL(rgb);
     const modified = modifyHSL(hsl);
     const {r, g, b, a} = hslToRGB(modified);
-    const matrix = createFilterMatrix(filter)
+    const matrix = createFilterMatrix(filter);
     const [rf, gf, bf] = applyColorMatrix([r, g, b], matrix);
 
     const color = (a === 1 ?
diff --git a/src/generators/static-theme.ts b/src/generators/static-theme.ts
index 9d4be039..977f6824 100644
--- a/src/generators/static-theme.ts
+++ b/src/generators/static-theme.ts
@@ -100,7 +100,7 @@ function createRuleGen(getSelectors: (siteTheme: StaticTheme) => string[], gener
         selectors.forEach((s, i) => {
             let ln = modifySelector(s);
             if (i < selectors.length - 1) {
-                ln += ','
+                ln += ',';
             } else {
                 ln += ' {';
             }
diff --git a/src/generators/text-style.ts b/src/generators/text-style.ts
index 26e0a347..415421d9 100644
--- a/src/generators/text-style.ts
+++ b/src/generators/text-style.ts
@@ -1,4 +1,4 @@
-import {FilterConfig} from '../definitions'
+import {FilterConfig} from '../definitions';
 
 export function createTextStyle(config: FilterConfig): string {
     const lines: string[] = [];
diff --git a/src/inject/dynamic-theme/modify-css.ts b/src/inject/dynamic-theme/modify-css.ts
index 0a807bba..45a16468 100644
--- a/src/inject/dynamic-theme/modify-css.ts
+++ b/src/inject/dynamic-theme/modify-css.ts
@@ -329,7 +329,7 @@ function getBgImageModifier(prop: string, value: string, rule: CSSStyleRule, isC
                     });
             }
             return results.join('');
-        }
+        };
 
     } catch (err) {
         logWarn(`Unable to parse gradient ${value}`, err);
diff --git a/src/inject/dynamic-theme/style-manager.ts b/src/inject/dynamic-theme/style-manager.ts
index 5e00031c..606afed4 100644
--- a/src/inject/dynamic-theme/style-manager.ts
+++ b/src/inject/dynamic-theme/style-manager.ts
@@ -470,7 +470,7 @@ function linkLoading(link: HTMLLinkElement) {
         const cleanUp = () => {
             link.removeEventListener('load', onLoad);
             link.removeEventListener('error', onError);
-        }
+        };
         const onLoad = () => {
             cleanUp();
             resolve();
diff --git a/src/inject/dynamic-theme/url.ts b/src/inject/dynamic-theme/url.ts
index 0fb4e98a..08691385 100644
--- a/src/inject/dynamic-theme/url.ts
+++ b/src/inject/dynamic-theme/url.ts
@@ -17,7 +17,7 @@ export function getAbsoluteURL($base: string, $relative: string) {
         return u.href;
     }
     const pathParts = b.pathname.split('/').concat($relative.split('/')).filter((p) => p);
-    let backwardIndex: number
+    let backwardIndex: number;
     while ((backwardIndex = pathParts.indexOf('..')) > 0) {
         pathParts.splice(backwardIndex - 1, 2);
     }
diff --git a/src/inject/index.ts b/src/inject/index.ts
index ccc2336e..8f90b431 100644
--- a/src/inject/index.ts
+++ b/src/inject/index.ts
@@ -1,7 +1,8 @@
 import {createOrUpdateStyle, removeStyle} from './style';
 import {createOrUpdateSVGFilter, removeSVGFilter} from './svg-filter';
 import {createOrUpdateDynamicTheme, removeDynamicTheme, cleanDynamicThemeCache} from './dynamic-theme';
-import {logWarn} from './utils/log';
+import {logInfo, logWarn} from './utils/log';
+import {watchForColorSchemeChange} from './utils/watch-color-scheme';
 
 function onMessage({type, data}) {
     switch (type) {
@@ -34,9 +35,15 @@ function onMessage({type, data}) {
     }
 }
 
+const colorSchemeWatcher = watchForColorSchemeChange(() => {
+    logInfo('Media query was changed');
+    chrome.runtime.sendMessage({type: 'color-scheme-change', data: null});
+});
+
 const port = chrome.runtime.connect({name: 'tab'});
 port.onMessage.addListener(onMessage);
 port.onDisconnect.addListener(() => {
     logWarn('disconnect');
     cleanDynamicThemeCache();
+    colorSchemeWatcher.disconnect();
 });
diff --git a/src/inject/utils/watch-color-scheme.ts b/src/inject/utils/watch-color-scheme.ts
new file mode 100644
index 00000000..35f651f4
--- /dev/null
+++ b/src/inject/utils/watch-color-scheme.ts
@@ -0,0 +1,9 @@
+export function watchForColorSchemeChange(callback: () => void) {
+    const mediaQueryList = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQueryList.addListener(callback);
+    return {
+        disconnect() {
+            mediaQueryList.removeListener(callback);
+        },
+    };
+}
diff --git a/src/ui/connect/mock.ts b/src/ui/connect/mock.ts
index 5f84cfcd..083fd64e 100644
--- a/src/ui/connect/mock.ts
+++ b/src/ui/connect/mock.ts
@@ -29,6 +29,10 @@ export function getMockData(override = {}): ExtensionData {
                 activation: '18:00',
                 deactivation: '9:00',
             },
+            location: {
+                latitude: 52.4237178,
+                longitude: 31.021786,
+            },
         } as UserSettings,
         fonts: [
             'serif',
diff --git a/src/ui/controls/time-range-picker/index.tsx b/src/ui/controls/time-range-picker/index.tsx
index 90e440e9..740f951e 100644
--- a/src/ui/controls/time-range-picker/index.tsx
+++ b/src/ui/controls/time-range-picker/index.tsx
@@ -36,19 +36,19 @@ function to24HTime($time: string) {
 
 export default function TimeRangePicker(props: TimePickerProps) {
     function onStartTimeChange($startTime: string) {
-        props.onChange([to24HTime($startTime), props.endTime])
+        props.onChange([to24HTime($startTime), props.endTime]);
     }
 
     function onEndTimeChange($endTime: string) {
-        props.onChange([props.startTime, to24HTime($endTime)])
+        props.onChange([props.startTime, to24HTime($endTime)]);
     }
 
     function setStartTime(node: HTMLInputElement) {
-        node.value = toLocaleTime(props.startTime)
+        node.value = toLocaleTime(props.startTime);
     }
 
     function setEndTime(node: HTMLInputElement) {
-        node.value = toLocaleTime(props.endTime)
+        node.value = toLocaleTime(props.endTime);
     }
 
     return (
diff --git a/src/ui/devtools/components/body.tsx b/src/ui/devtools/components/body.tsx
index 6252c86e..0bd9761f 100644
--- a/src/ui/devtools/components/body.tsx
+++ b/src/ui/devtools/components/body.tsx
@@ -8,7 +8,7 @@ import {ExtWrapper} from '../../../definitions';
 type BodyProps = ExtWrapper;
 
 function Body({data, actions}: BodyProps) {
-    const {state, setState} = useState({errorText: null as string})
+    const {state, setState} = useState({errorText: null as string});
     let textNode: HTMLTextAreaElement;
 
     const wrapper = (data.settings.theme.engine === ThemeEngines.staticTheme
diff --git a/src/ui/devtools/style.less b/src/ui/devtools/style.less
index 813d9049..3936c23b 100644
--- a/src/ui/devtools/style.less
+++ b/src/ui/devtools/style.less
@@ -14,7 +14,6 @@ body {
     flex-direction: column;
     height: 100%;
     margin: 0 auto;
-    max-width: 60rem;
 }
 
 header {
diff --git a/src/ui/popup/components/body.tsx b/src/ui/popup/components/body.tsx
index 80fc0b61..5d8860c9 100644
--- a/src/ui/popup/components/body.tsx
+++ b/src/ui/popup/components/body.tsx
@@ -48,7 +48,7 @@ function Body(props: BodyProps) {
             <body>
                 <Loader complete={false} />
             </body>
-        )
+        );
     }
 
     const unreadNews = props.data.news.filter(({read}) => !read);
diff --git a/src/ui/popup/components/filter-settings/index.tsx b/src/ui/popup/components/filter-settings/index.tsx
index 3e243f3b..e2aeb750 100644
--- a/src/ui/popup/components/filter-settings/index.tsx
+++ b/src/ui/popup/components/filter-settings/index.tsx
@@ -16,7 +16,7 @@ export default function FilterSettings({data, actions, tab}: ExtWrapper & {tab:
             custom.theme = {...custom.theme, ...config};
             actions.changeSettings({customThemes: data.settings.customThemes});
         } else {
-            actions.setTheme(config)
+            actions.setTheme(config);
         }
     }
 
diff --git a/src/ui/popup/components/header/index.tsx b/src/ui/popup/components/header/index.tsx
index ef380e57..a41dcb9c 100644
--- a/src/ui/popup/components/header/index.tsx
+++ b/src/ui/popup/components/header/index.tsx
@@ -2,11 +2,13 @@ import {m} from 'malevic';
 import SiteToggle from '../site-toggle';
 import MoreToggleSettings from './more-toggle-settings';
 import WatchIcon from './watch-icon';
+import SunMoonIcon from './sun-moon-icon';
+import SystemIcon from './system-icon';
 import {Shortcut, Toggle} from '../../../controls';
 import {getLocalMessage} from '../../../../utils/locales';
 import {ExtWrapper, TabInfo} from '../../../../definitions';
 
-function multiline(...lines) {
+function multiline(...lines: string[]) {
     return lines.join('\n');
 }
 
@@ -24,7 +26,9 @@ function Header({data, actions, tab, onMoreToggleSettingsClick}: HeaderProps) {
         });
     }
 
+    const isAutomation = Boolean(data.settings.automation);
     const isTimeAutomation = data.settings.automation === 'time';
+    const isLocationAutomation = data.settings.automation === 'location';
     const now = new Date();
 
     return (
@@ -74,12 +78,14 @@ function Header({data, actions, tab, onMoreToggleSettingsClick}: HeaderProps) {
                 <span
                     class={{
                         'header__app-toggle__time': true,
-                        'header__app-toggle__time--active': isTimeAutomation,
+                        'header__app-toggle__time--active': isAutomation,
                     }}
                 >
                     {(isTimeAutomation
                         ? <WatchIcon hours={now.getHours()} minutes={now.getMinutes()} />
-                        : null)}
+                        : (isLocationAutomation
+                            ? (<SunMoonIcon date={now} latitude={data.settings.location.latitude} longitude={data.settings.location.longitude} />)
+                            : <SystemIcon />))}
                 </span>
             </div>
         </header>
diff --git a/src/ui/popup/components/header/more-toggle-settings.tsx b/src/ui/popup/components/header/more-toggle-settings.tsx
index df80f51a..02551a17 100644
--- a/src/ui/popup/components/header/more-toggle-settings.tsx
+++ b/src/ui/popup/components/header/more-toggle-settings.tsx
@@ -1,5 +1,5 @@
 import {m} from 'malevic';
-import {CheckBox, TimeRangePicker} from '../../../controls';
+import {Button, CheckBox, TextBox, TimeRangePicker} from '../../../controls';
 import {getLocalMessage} from '../../../../utils/locales';
 import {ExtWrapper} from '../../../../definitions';
 
@@ -9,6 +9,65 @@ type MoreToggleSettingsProps = ExtWrapper & {
 };
 
 export default function MoreToggleSettings({data, actions, isExpanded, onClose}: MoreToggleSettingsProps) {
+    const isSystemAutomation = data.settings.automation === 'system';
+    const locationSettings = data.settings.location;
+    const values = {
+        'latitude': {
+            min: -90,
+            max: 90
+        },
+        'longitude': {
+            min: -180,
+            max: 180,
+        },
+    };
+
+    function getLocationString(location: number) {
+        if (location == null) {
+            return '';
+        }
+
+        return `${location}°`;
+    }
+
+    function locationChanged(inputElement: HTMLInputElement, newValue: string, type: string) {
+        if (newValue.trim() === '') {
+            inputElement.value = '';
+
+            actions.changeSettings({
+                location: {
+                    ...locationSettings,
+                    [type]: null,
+                },
+            });
+
+            return;
+        }
+
+        const min: number = values[type].min;
+        const max: number = values[type].max;
+
+        newValue = newValue.replace(',', '.').replace('°', '');
+
+        let num = Number(newValue);
+        if (isNaN(num)) {
+            num = 0;
+        } else if (num > max) {
+            num = max;
+        } else if (num < min) {
+            num = min;
+        }
+
+        inputElement.value = getLocationString(num);
+
+        actions.changeSettings({
+            location: {
+                ...locationSettings,
+                [type]: num,
+            },
+        });
+    }
+
     return (
         <div
             class={{
@@ -17,7 +76,7 @@ export default function MoreToggleSettings({data, actions, isExpanded, onClose}:
             }}
         >
             <div class="header__app-toggle__more-settings__top">
-                <span class="header__app-toggle__more-settings__top__text">{getLocalMessage('time_settings')}</span>
+                <span class="header__app-toggle__more-settings__top__text">{getLocalMessage('automation')}</span>
                 <span class="header__app-toggle__more-settings__top__close" role="button" onclick={onClose}>✕</span>
             </div>
             <div class="header__app-toggle__more-settings__content">
@@ -35,6 +94,58 @@ export default function MoreToggleSettings({data, actions, isExpanded, onClose}:
                 <p class="header__app-toggle__more-settings__description">
                     {getLocalMessage('set_active_hours')}
                 </p>
+                <div class="header__app-toggle__more-settings__line header__app-toggle__more-settings__location">
+                    <CheckBox
+                        checked={data.settings.automation === 'location'}
+                        onchange={(e) => actions.changeSettings({automation: e.target.checked ? 'location' : ''})}
+                    />
+                    <TextBox
+                        class="header__app-toggle__more-settings__location__latitude"
+                        placeholder={getLocalMessage('latitude')}
+                        onchange={(e) => locationChanged(e.target, e.target.value, 'latitude')}
+                        attached={(node: HTMLInputElement) => node.value = getLocationString(locationSettings.latitude)}
+                        onkeypress={(e) => {
+                            if (e.key === 'Enter') {
+                                (e.target as HTMLInputElement).blur();
+                            }
+                        }}
+                    />
+                    <TextBox
+                        class="header__app-toggle__more-settings__location__longitude"
+                        placeholder={getLocalMessage('longitude')}
+                        onchange={(e) => locationChanged(e.target, e.target.value, 'longitude')}
+                        attached={(node: HTMLInputElement) => node.value = getLocationString(locationSettings.longitude)}
+                        onkeypress={(e) => {
+                            if (e.key === 'Enter') {
+                                (e.target as HTMLInputElement).blur();
+                            }
+                        }}
+                    />
+                </div>
+                <p class="header__app-toggle__more-settings__location-description">
+                    {getLocalMessage('set_location')}
+                </p>
+                <div class={[
+                    'header__app-toggle__more-settings__line',
+                    'header__app-toggle__more-settings__system-dark-mode',
+                ]}
+                >
+                    <CheckBox
+                        class="header__app-toggle__more-settings__system-dark-mode__checkbox"
+                        checked={isSystemAutomation}
+                        onchange={(e) => actions.changeSettings({automation: e.target.checked ? 'system' : ''})}
+                    />
+                    <Button
+                        class={{
+                            'header__app-toggle__more-settings__system-dark-mode__button': true,
+                            'header__app-toggle__more-settings__system-dark-mode__button--active': isSystemAutomation,
+                        }}
+                        onclick={() => actions.changeSettings({automation: isSystemAutomation ? '' : 'system'})}
+                    >{getLocalMessage('system_dark_mode')}</Button>
+                </div>
+                <p class="header__app-toggle__more-settings__description">
+                    {getLocalMessage('system_dark_mode_description')}
+                </p>
             </div>
         </div>
     );
diff --git a/src/ui/popup/components/header/style.less b/src/ui/popup/components/header/style.less
index 06ca1c46..7728bbd2 100644
--- a/src/ui/popup/components/header/style.less
+++ b/src/ui/popup/components/header/style.less
@@ -1,8 +1,10 @@
 @import "../../../theme";
 
+@more-settings-line-height: 2 * @size-border + @size-control-inner + @size-text-small-height;  
+
 .header {
     display: grid;
-    grid: 
+    grid:
         "logo logo"
         "site-toggle app-toggle"
         / 5.5fr 4.5fr;
@@ -45,7 +47,7 @@
             display: inline-block;
             height: @size-control-inner + 2 * @size-border;
             left: 100%;
-            opacity: 0;
+            opacity: 0.7;
             position: absolute;
             top: 0;
             transition: opacity @time-slow, background-color @time-slow, color @time-slow;
@@ -102,16 +104,21 @@
             border-top: @size-border solid @color-border;
             display: flex;
             flex-direction: column;
-            height: @size-control-inner
+            height:
+                @size-control-inner
                 + @indent-large
-                + 2 * @size-border + @size-control-inner
-                + @size-text-small-height
+                + @more-settings-line-height
+                + @indent-small
+                + @more-settings-line-height
+                + @indent-small
+                + @more-settings-line-height
                 + @indent-large;
             left: 0;
             position: absolute;
             top: @popup-content-padding + @size-control-inner * 2 + @size-border + @indent-small;
             transition: all @time-slow;
-            z-index: 2;
+            width: 100%;
+            z-index: 999;
 
             &:not(&--expanded) {
                 border-bottom-width: 0;
@@ -120,7 +127,7 @@
                 opacity: 0;
                 pointer-events: none;
             }
-            
+
             &:not(&--expanded) &__content {
                 padding-bottom: 0;
                 padding-top: 0;
@@ -191,6 +198,14 @@
                 white-space: nowrap;
             }
 
+            &__location-description {
+                font-size: @size-text-small;
+                line-height: @size-text-small-height;
+                margin: 0;
+                text-align: center;
+                white-space: nowrap;
+            }
+
             &::after {
                 background-image: linear-gradient(to bottom, fadeout(@color-back, 10%), fadeout(@color-back, 100%));
                 content: "";
@@ -204,6 +219,51 @@
                 transition: height @time-slow;
                 width: 100%;
             }
+
+            &__location {
+                margin-top: @indent-small;
+
+                &__latitude,
+                &__longitude {
+                    flex: auto;
+                    text-align: center;
+                    text-indent: 0;
+                    width: 100%;
+                }
+
+                &__latitude {
+                    border-left: @size-border-inner solid @color-border;
+                    border-right: none;
+                }
+
+                &__longitude {
+                    border-left: @size-border-inner solid @color-border;
+                }
+            }
+
+            &__system-dark-mode {
+                display: flex;
+                flex-direction: row;
+                margin-top: @indent-small;
+    
+                &__checkbox {
+                    flex: none;
+                }
+    
+                &__button {
+                    border-left-width: @size-border-inner;
+                    flex: auto;
+    
+                    &:not(&--active) {
+                        color: @color-input-fore;
+                    }
+                }
+    
+                &:hover &__button,
+                &:hover &__checkbox {
+                    background-color: @color-control-hover;
+                }
+            }
         }
     }
 
diff --git a/src/ui/popup/components/header/sun-moon-icon.tsx b/src/ui/popup/components/header/sun-moon-icon.tsx
new file mode 100644
index 00000000..2fbca698
--- /dev/null
+++ b/src/ui/popup/components/header/sun-moon-icon.tsx
@@ -0,0 +1,42 @@
+import {m} from 'malevic';
+import {isNightAtLocation} from '../../../../utils/time';
+
+export default function SunMoonIcon({date, latitude, longitude}) {
+    if (latitude == null || longitude == null) {
+        // question mark icon
+        return (
+            <svg viewBox="-2.5 -2.5 21 21">
+                <path fill="white" stroke="none" d="M7.78 0C10.55 0 13.28 1.27 13.28 4.32C13.28 7.14 10.05 8.21 9.36 9.23C8.84 9.99 9.02 11.05 7.59 11.05C6.66 11.05 6.21 10.29 6.21 9.6C6.21 7.03 9.99 6.45 9.99 4.32C9.99 3.16 9.21 2.46 7.91 2.46C5.14 2.46 6.23 5.32 4.13 5.32C3.38 5.32 2.73 4.86 2.73 4C2.72 1.88 5.14 0 7.79 0Z M7.68 12.45C8.65 12.45 9.45 13.25 9.45 14.23C9.45 15.2 8.65 16 7.68 16C6.7 16 5.9 15.2 5.9 14.23C5.9 13.25 6.7 12.45 7.68 12.45Z" />
+            </svg>
+        );
+    }
+
+    if (isNightAtLocation(date, latitude, longitude)) {
+        // moon icon
+        return (
+            <svg viewBox="0 0 16 16">
+                <path fill="white" stroke="none" d="M 6 3 Q 10 8 6 13 Q 12 13 12 8 Q 12 3 6 3" />
+            </svg>
+        );
+    }
+
+    // sun icon
+    return (
+        <svg viewBox="-4.5 -4.5 41 41">
+            <circle fill="white" stroke="none" cx="16" cy="16" r="8" />
+            {...(Array.from({length: 8}).map((_, i) => (
+                <line
+                    x1="2"
+                    y1="16"
+                    x2="4"
+                    y2="16"
+                    stroke="white"
+                    stroke-width="5"
+                    stroke-linecap="round"
+                    transform-origin="16 16"
+                    transform={`rotate(${i * 45})`}
+                />
+            )))}
+        </svg>
+    );
+}
diff --git a/src/ui/popup/components/header/system-icon.tsx b/src/ui/popup/components/header/system-icon.tsx
new file mode 100644
index 00000000..1bb8b7ae
--- /dev/null
+++ b/src/ui/popup/components/header/system-icon.tsx
@@ -0,0 +1,13 @@
+import {m} from 'malevic';
+
+export default function SystemIcon() {
+    return (
+        <svg viewBox="0 0 16 16">
+            <path
+                fill="white"
+                stroke="none"
+                d="M3,3 h10 v7 h-3 v2 h1 v1 h-6 v-1 h1 v-2 h-3 z M4,4 v5 h8 v-5 z"
+            />
+        </svg>
+    );
+}
diff --git a/src/ui/popup/components/more-settings/index.tsx b/src/ui/popup/components/more-settings/index.tsx
index c4d79fe2..eef28aca 100644
--- a/src/ui/popup/components/more-settings/index.tsx
+++ b/src/ui/popup/components/more-settings/index.tsx
@@ -19,7 +19,7 @@ export default function MoreSettings({data, actions, tab}: ExtWrapper & {tab: Ta
             custom.theme = {...custom.theme, ...config};
             actions.changeSettings({customThemes: data.settings.customThemes});
         } else {
-            actions.setTheme(config)
+            actions.setTheme(config);
         }
     }
 
diff --git a/src/ui/popup/components/site-list-settings/index.tsx b/src/ui/popup/components/site-list-settings/index.tsx
index 3e323923..ce5801be 100644
--- a/src/ui/popup/components/site-list-settings/index.tsx
+++ b/src/ui/popup/components/site-list-settings/index.tsx
@@ -1,5 +1,5 @@
 import {m} from 'malevic';
-import {Toggle, TextList, Shortcut} from '../../../controls'
+import {Toggle, TextList, Shortcut} from '../../../controls';
 import {getLocalMessage} from '../../../../utils/locales';
 import {ExtWrapper} from '../../../../definitions';
 
diff --git a/src/utils/media-query.ts b/src/utils/media-query.ts
new file mode 100644
index 00000000..a584e043
--- /dev/null
+++ b/src/utils/media-query.ts
@@ -0,0 +1,13 @@
+const matchesMediaQuery = (query: string) => Boolean(window.matchMedia(query).matches);
+
+const matchesDarkTheme = () => matchesMediaQuery('(prefers-color-scheme: dark)');
+const matchesLightTheme = () => matchesMediaQuery('(prefers-color-scheme: light)');
+
+const isColorSchemeSupported = matchesDarkTheme() || matchesLightTheme();
+
+export function isSystemDarkModeEnabled() {
+    if (!isColorSchemeSupported) {
+        return false;
+    }
+    return matchesDarkTheme();
+}
diff --git a/src/utils/time.ts b/src/utils/time.ts
index 3599d447..03fc40ec 100644
--- a/src/utils/time.ts
+++ b/src/utils/time.ts
@@ -70,3 +70,139 @@ export function getDuration(time: Duration) {
     }
     return duration;
 }
+
+function getSunsetSunriseUTCTime(
+    date: Date,
+    latitude: number,
+    longitude: number,
+) {
+    const dec31 = new Date(date.getUTCFullYear(), 0, 0);
+    const oneDay = getDuration({days: 1});
+    const dayOfYear = Math.floor((Number(date) - Number(dec31)) / oneDay);
+
+    const zenith = 90.83333333333333;
+    const D2R = Math.PI / 180;
+    const R2D = 180 / Math.PI;
+
+    // convert the longitude to hour value and calculate an approximate time
+    const lnHour = longitude / 15;
+
+    function getTime(isSunrise: boolean) {
+        const t = dayOfYear + (((isSunrise ? 6 : 18) - lnHour) / 24);
+
+        // calculate the Sun's mean anomaly
+        const M = (0.9856 * t) - 3.289;
+
+        // calculate the Sun's true longitude
+        let L = M + (1.916 * Math.sin(M * D2R)) + (0.020 * Math.sin(2 * M * D2R)) + 282.634;
+        if (L > 360) {
+            L = L - 360;
+        } else if (L < 0) {
+            L = L + 360;
+        }
+
+        // calculate the Sun's right ascension
+        let RA = R2D * Math.atan(0.91764 * Math.tan(L * D2R));
+        if (RA > 360) {
+            RA = RA - 360;
+        } else if (RA < 0) {
+            RA = RA + 360;
+        }
+
+        // right ascension value needs to be in the same qua
+        const Lquadrant = (Math.floor(L / (90))) * 90;
+        const RAquadrant = (Math.floor(RA / 90)) * 90;
+        RA = RA + (Lquadrant - RAquadrant);
+
+        // right ascension value needs to be converted into hours
+        RA = RA / 15;
+
+        // calculate the Sun's declination
+        const sinDec = 0.39782 * Math.sin(L * D2R);
+        const cosDec = Math.cos(Math.asin(sinDec));
+
+        // calculate the Sun's local hour angle
+        const cosH = (Math.cos(zenith * D2R) - (sinDec * Math.sin(latitude * D2R))) / (cosDec * Math.cos(latitude * D2R));
+        if (cosH > 1) {
+            // always night
+            return {
+                alwaysDay: false,
+                alwaysNight: true,
+                time: 0,
+            };
+        } else if (cosH < -1) {
+            // always day
+            return {
+                alwaysDay: true,
+                alwaysNight: false,
+                time: 0,
+            };
+        }
+
+        const H = (isSunrise ? (360 - R2D * Math.acos(cosH)) : (R2D * Math.acos(cosH))) / 15;
+
+        // calculate local mean time of rising/setting
+        const T = H + RA - (0.06571 * t) - 6.622;
+
+        // adjust back to UTC
+        let UT = T - lnHour;
+        if (UT > 24) {
+            UT = UT - 24;
+        } else if (UT < 0) {
+            UT = UT + 24;
+        }
+
+        // convert to milliseconds
+        return {
+            alwaysDay: false,
+            alwaysNight: false,
+            time: UT * getDuration({hours: 1}),
+        };
+    }
+
+    const sunriseTime = getTime(true);
+    const sunsetTime = getTime(false);
+
+    if (sunriseTime.alwaysDay || sunsetTime.alwaysDay) {
+        return {
+            alwaysDay: true
+        };
+    } else if (sunriseTime.alwaysNight || sunsetTime.alwaysNight) {
+        return {
+            alwaysNight: true
+        };
+    }
+
+    return {
+        sunriseTime: sunriseTime.time,
+        sunsetTime: sunsetTime.time
+    };
+}
+
+export function isNightAtLocation(
+    date: Date,
+    latitude: number,
+    longitude: number,
+) {
+    const time = getSunsetSunriseUTCTime(date, latitude, longitude);
+
+    if (time.alwaysDay) {
+        return false;
+    } else if (time.alwaysNight) {
+        return true;
+    }
+
+    const sunriseTime = time.sunriseTime;
+    const sunsetTime = time.sunsetTime;
+    const currentTime = (
+        date.getUTCHours() * getDuration({hours: 1}) +
+        date.getUTCMinutes() * getDuration({minutes: 1}) +
+        date.getUTCSeconds() * getDuration({seconds: 1})
+    );
+
+    if (sunsetTime > sunriseTime) {
+        return (currentTime > sunsetTime) || (currentTime < sunriseTime);
+    } else {
+        return (currentTime > sunsetTime) && (currentTime < sunriseTime);
+    }
+}
diff --git a/tasks/bundle-locales.js b/tasks/bundle-locales.js
index 7edd0a0f..a3b5ca83 100644
--- a/tasks/bundle-locales.js
+++ b/tasks/bundle-locales.js
@@ -3,7 +3,7 @@ const {getDestDir} = require('./paths');
 
 async function bundleLocales({production}) {
     const destDir = getDestDir({production});
-    const localesSrcDir = 'src/_locales'
+    const localesSrcDir = 'src/_locales';
     const list = await fs.readdir(localesSrcDir);
     for (let name of list) {
         if (!name.endsWith('.config')) {


Test patch:
diff --git a/tests/color.tests.ts b/tests/color.tests.ts
index d16f3e4c..1a741aad 100644
--- a/tests/color.tests.ts
+++ b/tests/color.tests.ts
@@ -86,7 +86,7 @@ test('Color conversion', () => {
     expect(hslToRGB({h: 192, s: 0.57, l: 0.10})).toEqual({r: 11, g: 34, b: 40, a: 1});
     expect(hslToRGB({h: 0, s: 0, l: 0.5})).toEqual({r: 128, g: 128, b: 128, a: 1});
 
-    const round = (color: HSLA) => Object.entries(color).reduce((c, [k, v]) => (c[k] = k === 'h' ? Math.round(v) : Math.round(v * 100) / 100, c), {} as HSLA)
+    const round = (color: HSLA) => Object.entries(color).reduce((c, [k, v]) => (c[k] = k === 'h' ? Math.round(v) : Math.round(v * 100) / 100, c), {} as HSLA);
     expect(round(rgbToHSL({r: 0, g: 255, b: 255, a: 0.25}))).toEqual({h: 180, s: 1, l: 0.5, a: 0.25});
     expect(round(rgbToHSL({r: 128, g: 0, b: 0, a: 0.5}))).toEqual({h: 0, s: 1, l: 0.25, a: 0.5});
     expect(round(rgbToHSL({r: 233, g: 109, b: 78}))).toEqual({h: 12, s: 0.78, l: 0.61, a: 1});
diff --git a/tests/config.tests.ts b/tests/config.tests.ts
index 712efb9b..29ddeff0 100644
--- a/tests/config.tests.ts
+++ b/tests/config.tests.ts
@@ -84,7 +84,7 @@ test('Dynamic Theme Fixes config', async () => {
     ].join('\r\n'))).toEqual([
         {url: ['inbox.google.com', 'mail.google.com'], invert: ['a', 'b'], css: '.x { color: white !important; }'},
         {url: ['twitter.com'], invert: ['c', 'd']},
-    ])
+    ]);
 });
 
 test('Inversion Fixes config', async () => {
diff --git a/tests/locales.tests.ts b/tests/locales.tests.ts
index 1cf9d508..c3d7e5cf 100644
--- a/tests/locales.tests.ts
+++ b/tests/locales.tests.ts
@@ -45,7 +45,7 @@ test('Locales', async () => {
                 }
             }
             return true;
-        })
+        });
     }
 
     // Line count is the same
diff --git a/tests/time.tests.ts b/tests/time.tests.ts
index 95d1acd3..ff1c21bc 100644
--- a/tests/time.tests.ts
+++ b/tests/time.tests.ts
@@ -1,4 +1,4 @@
-import {isInTimeInterval, parseTime, getDuration} from '../src/utils/time';
+import {isInTimeInterval, isNightAtLocation, parseTime, getDuration} from '../src/utils/time';
 
 test('Time interval', () => {
     expect(isInTimeInterval(new Date(2018, 11, 4, 10), '9:00', '12:00')).toBe(true);
@@ -32,3 +32,31 @@ test('Duration', () => {
         days: 3
     })).toEqual(289488000);
 });
+
+test('Sunrize/sunset', () => {
+    const utcDate = (y, m, d, hh, mm) => new Date(Date.UTC(y, m, d, hh, mm));
+
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 0, 0), 52, 0)).toBe(true);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 5, 0), 52, 0)).toBe(true);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 7, 0), 52, 0)).toBe(false);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 12, 0), 52, 0)).toBe(false);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 18, 0), 52, 0)).toBe(false);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 20, 0), 52, 0)).toBe(true);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 23, 59), 52, 0)).toBe(true);
+
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 0, 0), 52, 30)).toBe(true);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 3, 0), 52, 30)).toBe(true);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 5, 0), 52, 30)).toBe(false);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 10, 0), 52, 30)).toBe(false);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 16, 0), 52, 30)).toBe(false);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 18, 0), 52, 30)).toBe(true);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 23, 59), 52, 30)).toBe(true);
+
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 0, 0), 52, -30)).toBe(true);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 7, 0), 52, -30)).toBe(true);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 9, 0), 52, -30)).toBe(false);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 14, 0), 52, -30)).toBe(false);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 20, 0), 52, -30)).toBe(false);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 22, 0), 52, -30)).toBe(true);
+    expect(isNightAtLocation(utcDate(2019, 8, 9, 23, 59), 52, -30)).toBe(true);
+});