Skip to content

Commit f683e60

Browse files
nobkdnobkd
committed
dark theme support
1 parent 8ef5072 commit f683e60

File tree

6 files changed

+90
-17
lines changed

6 files changed

+90
-17
lines changed

‎src/bg/utils/storage.js‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,18 @@ import { updateIcon } from './actionIcon.js'
44

55
export const KEY_DISABLED_HOSTS = 'disabled_hosts'
66
export const KEY_RESIZABLE_STATE = 'resizable_state'
7+
export const KEY_THEME = 'theme'
78

89
// Listens to changes on the storage. Updates disabled hosts list, if stored list changes
910
/** @type {string[]} */
1011
export let disabledHosts = await getDisabledHosts()
1112
export let resizableState = await getResizableState()
13+
export let theme = await getTheme()
1214

1315
storage.local.onChanged.addListener((changes) => {
14-
if (KEY_DISABLED_HOSTS in changes) {
15-
disabledHosts = changes[KEY_DISABLED_HOSTS].newValue ?? []
16-
}
16+
if (KEY_DISABLED_HOSTS in changes) disabledHosts = changes[KEY_DISABLED_HOSTS].newValue ?? []
1717
if (KEY_RESIZABLE_STATE in changes) resizableState = changes[KEY_RESIZABLE_STATE].newValue ?? false
18+
if (KEY_THEME in changes) theme = changes[KEY_THEME].newValue ?? 'system'
1819
})
1920

2021
/**
@@ -29,6 +30,10 @@ async function getResizableState() {
2930
return (await storage.local.get(KEY_RESIZABLE_STATE))[KEY_RESIZABLE_STATE] ?? false
3031
}
3132

33+
async function getTheme() {
34+
return (await storage.local.get(KEY_THEME))[KEY_THEME] ?? 'system'
35+
}
36+
3237
/**
3338
* Async function to invert the state of a hostname.
3439
* Adds new entry if not disabled, removes entry, if already disabled
@@ -54,6 +59,12 @@ export async function setResizableState(state) {
5459
}))
5560
}
5661

62+
export async function setTheme(state) {
63+
return (await storage.local.set({
64+
[KEY_THEME]: state
65+
}))
66+
}
67+
5768
/**
5869
* Retrieves the hostname from a URL
5970
* @param {string} url Full URL string

‎src/map/map.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
import L from 'leaflet'
22
import 'leaflet-fullscreen'
33

4+
import { theme, KEY_THEME } from '../bg/utils/storage.js'
45
import { readPB, readQ } from './utils/read.js'
56
import { tileTypes } from './utils/parsePB.js'
67

8+
import { storage } from 'webextension-polyfill'
9+
document.body.dataset.theme = theme
10+
storage.local.onChanged.addListener((changes) => { if (KEY_THEME in changes) document.body.dataset.theme = theme })
11+
712
/**
813
* @typedef {object} Tile
914
* @property {string} layer

‎src/options.html‎

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,18 @@
99
<title>Replace Maps Options</title>
1010
</head>
1111
<body>
12-
<section class="check">
13-
<input type="checkbox" id="resizable">
14-
<label for="resizable">Make map iFrame resizable</label>
12+
<section class="items">
13+
<!--
14+
<label for="resizable">Resizable map iFrame:</label>
15+
<input id="resizable" type="checkbox">
16+
-->
17+
18+
<label for="theme">Theme:</label>
19+
<select id="theme">
20+
<option value="system">System</option>
21+
<option value="light">Light</option>
22+
<option value="dark">Dark</option>
23+
</select>
1524
</section>
1625

1726
<hr>

‎src/options/options.js‎

Lines changed: 20 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -8,21 +8,34 @@ import {
88
invertHostState,
99
resizableState,
1010
setResizableState,
11+
theme,
12+
setTheme,
13+
KEY_THEME,
1114
} from '../bg/utils/storage.js'
1215

13-
const resizable = document.getElementById('resizable')
14-
resizable.addEventListener('change', (e) => {
15-
setResizableState(resizable.checked)
16+
// const resizable = document.getElementById('resizable')
17+
// resizable.addEventListener('change', (e) => {
18+
// setResizableState(resizable.checked)
19+
// })
20+
21+
const themeEl = document.getElementById('theme')
22+
themeEl.addEventListener('change', (e) => {
23+
setTheme(themeEl.selectedOptions[0].value)
1624
})
1725

1826

1927
const table = document.querySelector('.table')
2028

29+
function setThemeOption() {
30+
[...themeEl.querySelectorAll('option')].filter(e => e.value == theme)?.pop()?.setAttribute('selected', true)
31+
}
32+
2133
/**
2234
* (Re)Builds the list of diasabled hostnames
2335
*/
2436
function buildEntries() {
25-
resizable.checked = resizableState
37+
// resizable.checked = resizableState
38+
setThemeOption()
2639
table.innerHTML = ''
2740
disabledHosts.forEach(createEntry)
2841
}
@@ -91,11 +104,9 @@ function getIndex(button) {
91104
}
92105

93106
storage.local.onChanged.addListener((changes) => {
94-
if (KEY_DISABLED_HOSTS in changes) {
95-
buildEntries()
96-
}
97-
98-
if (KEY_RESIZABLE_STATE in changes) resizable.checked = resizableState
107+
if (KEY_DISABLED_HOSTS in changes) buildEntries()
108+
// if (KEY_RESIZABLE_STATE in changes) resizable.checked = resizableState
109+
if (KEY_THEME in changes) setThemeOption()
99110
})
100111

101112
buildEntries()

‎src/styles/map.css‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,43 @@ div {
66
}
77

88
#map {
9+
color-scheme: inherit;
910
width: calc(100vw - (100vw - 100%));
1011
height: 100vh;
1112
}
13+
14+
/* system */
15+
@media (prefers-color-scheme: dark) {
16+
[data-theme="system"] .leaflet-container {
17+
background: #000 !important;
18+
}
19+
20+
[data-theme="system"]
21+
:is(
22+
.leaflet-layer,
23+
.leaflet-popup,
24+
.leaflet-tooltip,
25+
.leaflet-control,
26+
.leaflet-control-layers-toggle,
27+
.leaflet-attribution-flag
28+
) {
29+
filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(120%);
30+
}
31+
}
32+
33+
/* dark */
34+
[data-theme="dark"] .leaflet-container {
35+
background: #000 !important;
36+
}
37+
38+
[data-theme="dark"]
39+
:is(
40+
.leaflet-layer,
41+
.leaflet-popup,
42+
.leaflet-tooltip,
43+
.leaflet-control,
44+
.leaflet-control-layers-toggle,
45+
.leaflet-attribution-flag
46+
) {
47+
filter: invert(100%) hue-rotate(180deg) brightness(120%) contrast(120%);
48+
}

‎src/styles/options.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,9 +42,9 @@ hr {
4242
width: 100%;
4343
}
4444

45-
.check {
45+
.items {
4646
display: grid;
47-
grid-template-columns: auto 1fr;
47+
grid-template-columns: 1fr auto;
4848
}
4949

5050
.table > * {

0 commit comments

Comments
 (0)