├── screenshots
└── ss.png
├── icons
└── 48pxblacksunglasses.png
├── dark-mode.css
├── README.md
├── popup.html
├── manifest.json
└── popup.js
/screenshots/ss.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/khvci/darkwave/HEAD/screenshots/ss.png
--------------------------------------------------------------------------------
/icons/48pxblacksunglasses.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/khvci/darkwave/HEAD/icons/48pxblacksunglasses.png
--------------------------------------------------------------------------------
/dark-mode.css:
--------------------------------------------------------------------------------
1 | .dark-mode {
2 | filter: invert(100%) hue-rotate(180deg);
3 | background-color: #222;
4 | color: #ddd;
5 | }
6 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | DarkWave
2 | An open source Firefox / Chrome extension to provide dark mode on all web pages.
3 |
4 | 
5 |
--------------------------------------------------------------------------------
/popup.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | DarkWave
6 |
7 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "manifest_version": 2,
3 | "name": "DarkWave",
4 | "version": "1.0",
5 | "description": "A lightweight extension that provides dark mode functionality.",
6 | "icons": {
7 | "48": "icons/48pxblacksunglasses.png"
8 | },
9 | "permissions": [
10 | "",
11 | "activeTab",
12 | "storage"
13 | ],
14 | "browser_action": {
15 | "default_icon": {
16 | "48": "icons/48pxblacksunglasses.png"
17 | },
18 | "default_title": "DarkWave",
19 | "default_popup": "popup.html"
20 | },
21 | "content_scripts": [
22 | {
23 | "matches": [""],
24 | "js": ["popup.js"],
25 | "css": ["dark-mode.css"],
26 | "run_at": "document_idle"
27 | }
28 | ]
29 | }
30 |
--------------------------------------------------------------------------------
/popup.js:
--------------------------------------------------------------------------------
1 | // Get the disable button
2 | const disableButton = document.getElementById('disable-button');
3 |
4 | // Get the current tab's URL
5 | browser.tabs.query({ active: true, currentWindow: true }, function(tabs) {
6 | const url = new URL(tabs[0].url);
7 | const domain = url.hostname;
8 |
9 | // Get the list of disabled domains from storage
10 | browser.storage.local.get(['disabledDomains'], function(result) {
11 | const disabledDomains = result.disabledDomains || [];
12 |
13 | // Set the state of the disable button based on whether the domain is disabled
14 | disableButton.textContent = disabledDomains.includes(domain) ? 'Enable for this page' : 'Disable for this page';
15 |
16 | // Handle the click event for the disable button
17 | disableButton.addEventListener('click', function() {
18 | if (disabledDomains.includes(domain)) {
19 | // Remove the domain from the disabled list
20 | const index = disabledDomains.indexOf(domain);
21 | if (index !== -1) {
22 | disabledDomains.splice(index, 1);
23 | }
24 | disableButton.textContent = 'Disable for this page';
25 | } else {
26 | // Add the domain to the disabled list
27 | disabledDomains.push(domain);
28 | disableButton.textContent = 'Enable for this page';
29 | }
30 |
31 | // Save the updated disabled domains list to storage
32 | browser.storage.local.set({disabledDomains: disabledDomains});
33 |
34 | // Reload the current tab to reflect the updated state
35 | browser.tabs.reload();
36 | });
37 |
38 | // Get the current tab's ID
39 | const tabId = tabs[0].id;
40 |
41 | // Check whether the extension is enabled for the current tab
42 | browser.browserAction.isEnabled({ tabId: tabId }, function(enabled) {
43 | if (enabled) {
44 | // Apply the dark mode to the web page
45 | applyDarkMode();
46 | }
47 | });
48 |
49 | // Listen for changes to the extension's enabled state
50 | browser.browserAction.onClicked.addListener(function(tab) {
51 | // Get the current tab's ID
52 | const tabId = tab.id;
53 |
54 | // Toggle the extension's enabled state
55 | browser.browserAction.isEnabled({ tabId: tabId }, function(enabled) {
56 | if (enabled) {
57 | // Remove the dark mode from the web page
58 | removeDarkMode();
59 |
60 | // Disable the extension for the current tab
61 | browser.browserAction.disable({ tabId: tabId });
62 | } else {
63 | // Apply the dark mode to the web page
64 | applyDarkMode();
65 |
66 | // Enable the extension for the current tab
67 | browser.browserAction.enable({ tabId: tabId });
68 | }
69 | });
70 | });
71 | });
72 | });
73 |
74 | // Apply the dark mode to the web page
75 | function applyDarkMode() {
76 | // Add a dark mode class to the body element
77 | document.body.classList.add('dark-mode');
78 | }
79 |
80 | // Remove the dark mode from the web page
81 | function removeDarkMode() {
82 | // Remove the dark mode class from the body element
83 | document.body.classList.remove('dark-mode');
84 | }
85 |
--------------------------------------------------------------------------------