mirror of
https://github.com/bastienwirtz/homer.git
synced 2026-06-21 23:40:57 +02:00
39 lines
916 B
Vue
39 lines
916 B
Vue
<template>
|
|
<DynamicStyle>
|
|
:root, body #app.light {
|
|
{{ getVars(themes.light) }}
|
|
} @media (prefers-color-scheme: light), (prefers-color-scheme:
|
|
no-preference) { :root, body #app {
|
|
{{ getVars(themes.light) }}
|
|
} } body #app.dark {
|
|
{{ getVars(themes.dark) }}
|
|
} @media (prefers-color-scheme: dark) { :root, body #app {
|
|
{{ getVars(themes.dark) }}
|
|
} }
|
|
</DynamicStyle>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "DynamicTheme",
|
|
props: {
|
|
themes: Object,
|
|
},
|
|
methods: {
|
|
getVars: function (theme) {
|
|
let vars = [];
|
|
for (const themeVars in theme) {
|
|
let value = theme[themeVars];
|
|
if (!value) {
|
|
value = "initial";
|
|
} else if (themeVars == "background-image") {
|
|
value = `url(${theme[themeVars]})`;
|
|
}
|
|
vars.push(`--${themeVars}: ${value}`);
|
|
}
|
|
return vars.join(";");
|
|
},
|
|
},
|
|
};
|
|
</script>
|