this repo has no description
Further extend theme-color coloring
+56
-3
+52
-1
src/components/modal.jsx
+52
-1
src/components/modal.jsx
···
1
1
import './modal.css';
2
2
3
3
import { createPortal } from 'preact/compat';
4
-
import { useEffect, useRef } from 'preact/hooks';
4
+
import { useEffect, useLayoutEffect, useRef } from 'preact/hooks';
5
5
import { useHotkeys } from 'react-hotkeys-hook';
6
6
7
+
import store from '../utils/store';
7
8
import useCloseWatcher from '../utils/useCloseWatcher';
8
9
9
10
const $modalContainer = document.getElementById('modal-container');
11
+
12
+
function getBackdropThemeColor() {
13
+
return getComputedStyle(document.documentElement).getPropertyValue(
14
+
'--backdrop-theme-color',
15
+
);
16
+
}
10
17
11
18
function Modal({ children, onClose, onClick, class: className, minimized }) {
12
19
if (!children) return null;
···
65
72
$deckContainers.forEach(($deckContainer) => {
66
73
$deckContainer.removeAttribute('inert');
67
74
});
75
+
};
76
+
}, [children, minimized]);
77
+
78
+
const $meta = useRef();
79
+
const metaColor = useRef();
80
+
useLayoutEffect(() => {
81
+
if (children && !minimized) {
82
+
const theme = store.local.get('theme');
83
+
if (theme) {
84
+
const backdropColor = getBackdropThemeColor();
85
+
console.log({ backdropColor });
86
+
$meta.current = document.querySelector(
87
+
`meta[name="theme-color"][data-theme-setting="manual"]`,
88
+
);
89
+
if ($meta.current) {
90
+
metaColor.current = $meta.current.content;
91
+
$meta.current.content = backdropColor;
92
+
}
93
+
} else {
94
+
const colorScheme = window.matchMedia('(prefers-color-scheme: dark)')
95
+
.matches
96
+
? 'dark'
97
+
: 'light';
98
+
const backdropColor = getBackdropThemeColor();
99
+
console.log({ backdropColor });
100
+
$meta.current = document.querySelector(
101
+
`meta[name="theme-color"][media*="${colorScheme}"]`,
102
+
);
103
+
if ($meta.current) {
104
+
metaColor.current = $meta.current.content;
105
+
$meta.current.content = backdropColor;
106
+
}
107
+
}
108
+
} else {
109
+
// Reset meta color
110
+
if ($meta.current && metaColor.current) {
111
+
$meta.current.content = metaColor.current;
112
+
}
113
+
}
114
+
return () => {
115
+
// Reset meta color
116
+
if ($meta.current && metaColor.current) {
117
+
$meta.current.content = metaColor.current;
118
+
}
68
119
};
69
120
}, [children, minimized]);
70
121
+4
-2
src/index.css
+4
-2
src/index.css
···
88
88
--outline-hover-color: rgba(128, 128, 128, 0.7);
89
89
--divider-color: rgba(0, 0, 0, 0.1);
90
90
--backdrop-color: rgba(0, 0, 0, 0.1);
91
+
--backdrop-solid-color: color-mix(in srgb, var(--bg-color) 90%, #000 10%);
92
+
--backdrop-theme-color: #e5e5e5;
91
93
--backdrop-darker-color: rgba(0, 0, 0, 0.25);
92
-
--backdrop-solid-color: #eee;
93
94
--img-bg-color: rgba(128, 128, 128, 0.2);
94
95
--loader-color: #1c1e2199;
95
96
--comment-line-color: #e5e5e5;
···
161
162
--divider-color: rgba(255, 255, 255, 0.1);
162
163
--bg-blur-color: #24252699;
163
164
--backdrop-color: rgba(0, 0, 0, 0.5);
164
-
--backdrop-solid-color: #111;
165
+
--backdrop-solid-color: color-mix(in srgb, var(--bg-color) 50%, #000 50%);
166
+
--backdrop-theme-color: #121213; /* same as backdrop-solid-color but without color-mix, to be used for meta[theme-color] */
165
167
--loader-color: #f0f2f599;
166
168
--comment-line-color: #565656;
167
169
--drop-shadow-color: rgba(0, 0, 0, 0.5);