You've already forked AstralRinth
forked from didirus/AstralRinth
refactor: migrate to common eslint+prettier configs (#4168)
* refactor: migrate to common eslint+prettier configs * fix: prettier frontend * feat: config changes * fix: lint issues * fix: lint * fix: type imports * fix: cyclical import issue * fix: lockfile * fix: missing dep * fix: switch to tabs * fix: continue switch to tabs * fix: rustfmt parity * fix: moderation lint issue * fix: lint issues * fix: ui intl * fix: lint issues * Revert "fix: rustfmt parity" This reverts commit cb99d2376c321d813d4b7fc7e2a213bb30a54711. * feat: revert last rs
This commit is contained in:
@@ -1,90 +1,91 @@
|
||||
import { ref } from "vue";
|
||||
import { isDarkTheme } from "./themes.ts";
|
||||
import { useNativeTheme } from "./native-theme.ts";
|
||||
import { usePreferredThemes } from "./preferred-theme.ts";
|
||||
import { useThemeSettings } from "./theme-settings.ts";
|
||||
import { ref } from 'vue'
|
||||
|
||||
export * from "./themes.ts";
|
||||
import { useNativeTheme } from './native-theme.ts'
|
||||
import { usePreferredThemes } from './preferred-theme.ts'
|
||||
import { useThemeSettings } from './theme-settings.ts'
|
||||
import { isDarkTheme } from './themes.ts'
|
||||
|
||||
export * from './themes.ts'
|
||||
|
||||
export default defineNuxtPlugin({
|
||||
name: "theme",
|
||||
dependsOn: ["cosmetics"],
|
||||
setup(nuxtApp) {
|
||||
const $nativeTheme = useNativeTheme();
|
||||
name: 'theme',
|
||||
dependsOn: ['cosmetics'],
|
||||
setup(nuxtApp) {
|
||||
const $nativeTheme = useNativeTheme()
|
||||
|
||||
const $preferredThemes = usePreferredThemes();
|
||||
const $preferredThemes = usePreferredThemes()
|
||||
|
||||
function getPreferredNativeTheme() {
|
||||
const nativeTheme = $nativeTheme.value;
|
||||
switch (nativeTheme) {
|
||||
case "light":
|
||||
return $preferredThemes.light;
|
||||
case "dark":
|
||||
case "unknown":
|
||||
if (import.meta.dev && import.meta.server && nativeTheme === "unknown") {
|
||||
console.warn(
|
||||
"[theme] no client hint is available for request, using dark theme as default",
|
||||
);
|
||||
}
|
||||
function getPreferredNativeTheme() {
|
||||
const nativeTheme = $nativeTheme.value
|
||||
switch (nativeTheme) {
|
||||
case 'light':
|
||||
return $preferredThemes.light
|
||||
case 'dark':
|
||||
case 'unknown':
|
||||
if (import.meta.dev && import.meta.server && nativeTheme === 'unknown') {
|
||||
console.warn(
|
||||
'[theme] no client hint is available for request, using dark theme as default',
|
||||
)
|
||||
}
|
||||
|
||||
return $preferredThemes.dark;
|
||||
}
|
||||
}
|
||||
return $preferredThemes.dark
|
||||
}
|
||||
}
|
||||
|
||||
const $settings = useThemeSettings(() => getPreferredNativeTheme());
|
||||
const $settings = useThemeSettings(() => getPreferredNativeTheme())
|
||||
|
||||
useHead({ htmlAttrs: { class: () => [`${$settings.active}-mode`] } });
|
||||
useHead({ htmlAttrs: { class: () => [`${$settings.active}-mode`] } })
|
||||
|
||||
function syncTheme() {
|
||||
$settings.active =
|
||||
$settings.preferred === "system" ? getPreferredNativeTheme() : $settings.preferred;
|
||||
}
|
||||
function syncTheme() {
|
||||
$settings.active =
|
||||
$settings.preferred === 'system' ? getPreferredNativeTheme() : $settings.preferred
|
||||
}
|
||||
|
||||
if (
|
||||
import.meta.server &&
|
||||
$settings.preferred === "system" &&
|
||||
$nativeTheme.value !== "unknown"
|
||||
) {
|
||||
// take advantage of the client hint
|
||||
syncTheme();
|
||||
}
|
||||
if (
|
||||
import.meta.server &&
|
||||
$settings.preferred === 'system' &&
|
||||
$nativeTheme.value !== 'unknown'
|
||||
) {
|
||||
// take advantage of the client hint
|
||||
syncTheme()
|
||||
}
|
||||
|
||||
if (import.meta.client) {
|
||||
const $clientReady = ref(false);
|
||||
if (import.meta.client) {
|
||||
const $clientReady = ref(false)
|
||||
|
||||
nuxtApp.hook("app:suspense:resolve", () => {
|
||||
$clientReady.value = true;
|
||||
});
|
||||
nuxtApp.hook('app:suspense:resolve', () => {
|
||||
$clientReady.value = true
|
||||
})
|
||||
|
||||
watchEffect(() => $clientReady.value && syncTheme());
|
||||
}
|
||||
watchEffect(() => $clientReady.value && syncTheme())
|
||||
}
|
||||
|
||||
function cycle() {
|
||||
const nextTheme = isDarkTheme($settings.active)
|
||||
? $preferredThemes.light
|
||||
: $preferredThemes.dark;
|
||||
function cycle() {
|
||||
const nextTheme = isDarkTheme($settings.active)
|
||||
? $preferredThemes.light
|
||||
: $preferredThemes.dark
|
||||
|
||||
$settings.preferred = nextTheme;
|
||||
$settings.preferred = nextTheme
|
||||
|
||||
return nextTheme;
|
||||
}
|
||||
return nextTheme
|
||||
}
|
||||
|
||||
return {
|
||||
provide: {
|
||||
theme: reactive({
|
||||
...toRefs($settings),
|
||||
/**
|
||||
* Preferred themes for each mode.
|
||||
*/
|
||||
preferences: $preferredThemes,
|
||||
/**
|
||||
* Current native (system) theme provided through client hint header or
|
||||
* `prefers-color-scheme` media query.
|
||||
*/
|
||||
native: $nativeTheme,
|
||||
cycle,
|
||||
}),
|
||||
},
|
||||
};
|
||||
},
|
||||
});
|
||||
return {
|
||||
provide: {
|
||||
theme: reactive({
|
||||
...toRefs($settings),
|
||||
/**
|
||||
* Preferred themes for each mode.
|
||||
*/
|
||||
preferences: $preferredThemes,
|
||||
/**
|
||||
* Current native (system) theme provided through client hint header or
|
||||
* `prefers-color-scheme` media query.
|
||||
*/
|
||||
native: $nativeTheme,
|
||||
cycle,
|
||||
}),
|
||||
},
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
Reference in New Issue
Block a user