diff --git a/src/app.scss b/src/app.scss index a580d427..3ee29274 100644 --- a/src/app.scss +++ b/src/app.scss @@ -8,12 +8,14 @@ // For a copy, see . // -@use "./assets/scss/flags.scss"; -@use "./assets/scss/animated-emoji.scss"; +$--font-path: '~element-ui/lib/theme-chalk/fonts'; + +@use './assets/scss/flags.scss'; +@use './assets/scss/animated-emoji.scss'; @import '~animate.css/animate.min.css'; @import '~noty/lib/noty.css'; -@import '~element-ui/lib/theme-chalk/index.css'; +@import '~element-ui/packages/theme-chalk/src/index'; .color-palettes { background: #409eff; diff --git a/src/shared/constants/index.js b/src/shared/constants/index.js index df47de1f..56ddc82f 100644 --- a/src/shared/constants/index.js +++ b/src/shared/constants/index.js @@ -9,3 +9,4 @@ export * from './user'; export * from './instance'; export * from './world'; export * from './moderation'; +export * from './themes'; diff --git a/src/shared/constants/themes.js b/src/shared/constants/themes.js new file mode 100644 index 00000000..a221fe1e --- /dev/null +++ b/src/shared/constants/themes.js @@ -0,0 +1,39 @@ +export const THEME_CONFIG = { + system: { + cssFile: '', + requiresDarkBase: false, + isDark: 'system', + name: 'System' + }, + light: { + cssFile: '', + requiresDarkBase: false, + isDark: false, + name: 'Light' + }, + dark: { cssFile: '', requiresDarkBase: true, isDark: true, name: 'Dark' }, + darkvanillaold: { + cssFile: 'theme.darkvanillaold.css', + requiresDarkBase: true, + isDark: true, + name: 'Dark Vanilla Old' + }, + darkvanilla: { + cssFile: 'theme.darkvanilla.css', + requiresDarkBase: true, + isDark: true, + name: 'Dark Vanilla' + }, + pink: { + cssFile: 'theme.pink.css', + requiresDarkBase: true, + isDark: true, + name: 'Pink' + }, + material3: { + cssFile: 'theme.material3.css', + requiresDarkBase: true, + isDark: true, + name: 'Material 3' + } +}; diff --git a/src/shared/utils/base/ui.js b/src/shared/utils/base/ui.js index 4b39a753..da992e67 100644 --- a/src/shared/utils/base/ui.js +++ b/src/shared/utils/base/ui.js @@ -1,5 +1,6 @@ import { storeToRefs } from 'pinia'; import { useAppearanceSettingsStore } from '../../../stores'; +import { THEME_CONFIG } from '../../constants'; /** * @@ -21,43 +22,10 @@ function changeAppDarkStyle(isDark) { } } -/** - * - * @param {string} themeMode - * @returns - */ function changeAppThemeStyle(themeMode) { - const themeStyle = {}; - switch (themeMode) { - case 'light': - themeStyle.href = ''; - break; - case 'dark': - themeStyle.href = ''; - break; - case 'darkvanillaold': - themeStyle.href = 'theme.darkvanillaold.css'; - break; - case 'darkvanilla': - themeStyle.href = 'theme.darkvanilla.css'; - break; - case 'pink': - themeStyle.href = 'theme.pink.css'; - break; - case 'material3': - themeStyle.href = 'theme.material3.css'; - break; - case 'system': - themeStyle.href = ''; - break; - } + const themeConfig = THEME_CONFIG[themeMode]; + if (!themeConfig) return; - /** - * prevents flickering - * giving absolute paths does prevent flickering - * when switching from another dark theme to 'dark' theme - * works on my machine - */ let filePathPrefix = 'file://vrcx/'; if (LINUX) { filePathPrefix = './'; @@ -70,38 +38,35 @@ function changeAppThemeStyle(themeMode) { $appThemeStyle.rel = 'stylesheet'; document.head.appendChild($appThemeStyle); } - $appThemeStyle.href = themeStyle.href - ? `${filePathPrefix}${themeStyle.href}` + $appThemeStyle.href = themeConfig.cssFile + ? `${filePathPrefix}${themeConfig.cssFile}` : ''; let $appThemeDarkStyle = document.getElementById('app-theme-dark-style'); - const darkThemeCssPath = `${filePathPrefix}theme.dark.css`; + const shouldApplyDarkBase = + themeConfig.requiresDarkBase || + (themeMode === 'system' && systemIsDarkMode()); - if (!$appThemeDarkStyle && themeMode !== 'light') { - if (themeMode === 'system' && !systemIsDarkMode()) { - return; + if (shouldApplyDarkBase) { + if (!$appThemeDarkStyle) { + $appThemeDarkStyle = document.createElement('link'); + $appThemeDarkStyle.setAttribute('id', 'app-theme-dark-style'); + $appThemeDarkStyle.rel = 'stylesheet'; + $appThemeDarkStyle.href = darkThemeCssPath; + document.head.insertBefore($appThemeDarkStyle, $appThemeStyle); + } else if ($appThemeDarkStyle.href !== darkThemeCssPath) { + $appThemeDarkStyle.href = darkThemeCssPath; } - $appThemeDarkStyle = document.createElement('link'); - $appThemeDarkStyle.setAttribute('id', 'app-theme-dark-style'); - $appThemeDarkStyle.rel = 'stylesheet'; - $appThemeDarkStyle.href = darkThemeCssPath; - document.head.insertBefore($appThemeDarkStyle, $appThemeStyle); } else { - if (themeMode === 'system' && systemIsDarkMode()) { - if ($appThemeDarkStyle.href === darkThemeCssPath) { - return; - } - $appThemeDarkStyle.href = darkThemeCssPath; - } else if (themeMode !== 'light' && themeMode !== 'system') { - if ($appThemeDarkStyle.href === darkThemeCssPath) { - return; - } - $appThemeDarkStyle.href = darkThemeCssPath; - } else { - $appThemeDarkStyle && $appThemeDarkStyle.remove(); - } + $appThemeDarkStyle && $appThemeDarkStyle.remove(); } + + let isDarkForExternalApp = themeConfig.isDark; + if (isDarkForExternalApp === 'system') { + isDarkForExternalApp = systemIsDarkMode(); + } + changeAppDarkStyle(isDarkForExternalApp); } /** diff --git a/src/views/Settings/Settings.vue b/src/views/Settings/Settings.vue index 2309c801..12abd277 100644 --- a/src/views/Settings/Settings.vue +++ b/src/views/Settings/Settings.vue @@ -340,40 +340,12 @@ - - - - - - + v-for="(config, themeKey) in THEME_CONFIG" + :key="themeKey" + @click.native="saveThemeMode(themeKey)" + :class="{ 'is-active': themeMode === themeKey }"> + {{ t(`view.settings.appearance.appearance.theme_mode_${themeKey}`) }} + @@ -1885,6 +1857,7 @@ import FeedFiltersDialog from './dialogs/FeedFiltersDialog.vue'; import AvatarProviderDialog from './dialogs/AvatarProviderDialog.vue'; import { openExternalLink } from '../../shared/utils'; + import { THEME_CONFIG } from '../../shared/constants'; const { messages, t } = useI18n(); const { $message } = getCurrentInstance().proxy; diff --git a/webpack.config.js b/webpack.config.js index 8867a365..afdd29a7 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -64,7 +64,14 @@ module.exports = (env, argv) => { use: [ MiniCssExtractPlugin.loader, 'css-loader', - 'sass-loader' + { + loader: 'sass-loader', + options: { + sassOptions: { + quietDeps: true + } + } + } ] }, { @@ -77,7 +84,13 @@ module.exports = (env, argv) => { ] }, devServer: { - port: 9000 + port: 9000, + client: { + overlay: { + warnings: false, + errors: true + } + } }, resolve: { extensions: ['.js', '.vue', '.css', '.scss'],