kmcom-nuxt-layers 2.3.0 → 2.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,11 @@
|
|
|
1
1
|
// Theme Layer - Color mode, accent colors, accessibility preferences
|
|
2
|
+
|
|
3
|
+
declare module '@nuxt/schema' {
|
|
4
|
+
interface PublicRuntimeConfig {
|
|
5
|
+
themeDefaultAccent: string
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
2
9
|
export default defineNuxtConfig({
|
|
3
10
|
$meta: {
|
|
4
11
|
name: 'theme',
|
|
@@ -6,6 +13,12 @@ export default defineNuxtConfig({
|
|
|
6
13
|
|
|
7
14
|
extends: ['../core'],
|
|
8
15
|
|
|
16
|
+
runtimeConfig: {
|
|
17
|
+
public: {
|
|
18
|
+
themeDefaultAccent: 'blue',
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
|
|
9
22
|
alias: {
|
|
10
23
|
'#layers/theme': import.meta.dirname,
|
|
11
24
|
'#layers/theme/types': `${import.meta.dirname}/app/types`,
|
|
@@ -28,11 +28,12 @@ const accentCSS = buildAccentCSS()
|
|
|
28
28
|
// Written as a self-invoking function to avoid polluting the global scope.
|
|
29
29
|
// JSON.parse handles the quoted string that useLocalStorage writes.
|
|
30
30
|
// Note: theme-mode is stored as a raw string by Nuxt Color Mode (no JSON.stringify).
|
|
31
|
-
|
|
31
|
+
function buildInitScript(defaultAccent: string) {
|
|
32
|
+
return `(function(){
|
|
32
33
|
try{
|
|
33
34
|
var h=document.documentElement;
|
|
34
35
|
var c=localStorage.getItem('theme-colour');
|
|
35
|
-
h.setAttribute('data-theme-colour',c?JSON.parse(c):'
|
|
36
|
+
h.setAttribute('data-theme-colour',c?JSON.parse(c):'${defaultAccent}');
|
|
36
37
|
var ct=localStorage.getItem('theme-contrast');
|
|
37
38
|
var ctv=ct?JSON.parse(ct):'system';
|
|
38
39
|
if(ctv==='on'){h.setAttribute('data-theme-contrast','high')}
|
|
@@ -55,9 +56,12 @@ const initScript = `(function(){
|
|
|
55
56
|
else{h.setAttribute('data-theme-mode',(window.matchMedia&&window.matchMedia('(prefers-color-scheme:dark)').matches)?'dark':'light')}
|
|
56
57
|
}catch(e){}
|
|
57
58
|
})()`.replace(/\n\s*/g, '')
|
|
59
|
+
}
|
|
58
60
|
|
|
59
61
|
export default defineNitroPlugin((nitroApp) => {
|
|
60
|
-
nitroApp.hooks.hook('render:html', (html) => {
|
|
62
|
+
nitroApp.hooks.hook('render:html', (html, { event }) => {
|
|
63
|
+
const config = useRuntimeConfig(event)
|
|
64
|
+
const initScript = buildInitScript(config.public.themeDefaultAccent || 'blue')
|
|
61
65
|
html.head.unshift(
|
|
62
66
|
`<style id="theme-accent-css">${accentCSS}</style><script>${initScript}</script>`
|
|
63
67
|
)
|
package/package.json
CHANGED