aThemeSwitch.html 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. {{define "component/themeSwitchTemplate"}}
  2. <template>
  3. <a-menu :theme="themeSwitcher.currentTheme" mode="inline" selected-keys="">
  4. <a-sub-menu>
  5. <span slot="title">
  6. <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
  7. <span>{{ i18n "menu.theme" }}</span>
  8. </span>
  9. <a-menu-item id="change-theme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOff()">
  10. <span>{{ i18n "menu.dark" }}</span>
  11. <a-switch style="margin-left: 2px;" size="small" :default-checked="themeSwitcher.isDarkTheme" @change="themeSwitcher.toggleTheme()"></a-switch>
  12. </a-menu-item>
  13. <a-menu-item id="change-theme-ultra" v-if="themeSwitcher.isDarkTheme" class="ant-menu-theme-switch" @mousedown="themeSwitcher.animationsOffUltra()">
  14. <span>{{ i18n "menu.ultraDark" }}</span>
  15. <a-checkbox style="margin-left: 2px;" :checked="themeSwitcher.isUltra" @click="themeSwitcher.toggleUltra()"></a-checkbox>
  16. </a-menu-item>
  17. </a-sub-menu>
  18. </a-menu>
  19. </template>
  20. {{end}}
  21. {{define "component/themeSwitchTemplateLogin"}}
  22. <template>
  23. <a-menu @mousedown="themeSwitcher.animationsOff()" id="change-theme" :theme="themeSwitcher.currentTheme" mode="inline"
  24. selected-keys="">
  25. <a-menu-item mode="inline" class="ant-menu-theme-switch">
  26. <a-icon type="bulb" :theme="themeSwitcher.isDarkTheme ? 'filled' : 'outlined'"></a-icon>
  27. <a-switch size="small" :default-checked="themeSwitcher.isDarkTheme"
  28. @change="themeSwitcher.toggleTheme()"></a-switch>
  29. <template v-if="themeSwitcher.isDarkTheme">
  30. <a-checkbox style="margin-left: 1rem; vertical-align: middle;" :checked="themeSwitcher.isUltra"
  31. @click="themeSwitcher.toggleUltra()">Ultra</a-checkbox>
  32. </template>
  33. </a-menu-item>
  34. </a-menu>
  35. </template>
  36. {{end}}
  37. {{define "component/aThemeSwitch"}}
  38. <script>
  39. function createThemeSwitcher() {
  40. const isDarkTheme = localStorage.getItem('dark-mode') === 'true';
  41. const isUltra = localStorage.getItem('isUltraDarkThemeEnabled') === 'true';
  42. if (isUltra) {
  43. document.documentElement.setAttribute('data-theme', 'ultra-dark');
  44. }
  45. const theme = isDarkTheme ? 'dark' : 'light';
  46. document.querySelector('body').setAttribute('class', theme);
  47. return {
  48. animationsOff() {
  49. document.documentElement.setAttribute('data-theme-animations', 'off');
  50. const themeAnimations = document.querySelector('#change-theme');
  51. themeAnimations.addEventListener('mouseleave', () => {
  52. document.documentElement.removeAttribute('data-theme-animations');
  53. });
  54. themeAnimations.addEventListener('touchend', () => {
  55. document.documentElement.removeAttribute('data-theme-animations');
  56. });
  57. },
  58. animationsOffUltra() {
  59. document.documentElement.setAttribute('data-theme-animations', 'off');
  60. const themeAnimationsUltra = document.querySelector('#change-theme-ultra');
  61. themeAnimationsUltra.addEventListener('mouseleave', () => {
  62. document.documentElement.removeAttribute('data-theme-animations');
  63. });
  64. themeAnimationsUltra.addEventListener('touchend', () => {
  65. document.documentElement.removeAttribute('data-theme-animations');
  66. });
  67. },
  68. isDarkTheme,
  69. isUltra,
  70. get currentTheme() {
  71. return this.isDarkTheme ? 'dark' : 'light';
  72. },
  73. toggleTheme() {
  74. this.isDarkTheme = !this.isDarkTheme;
  75. localStorage.setItem('dark-mode', this.isDarkTheme);
  76. document.querySelector('body').setAttribute('class', this.isDarkTheme ? 'dark' : 'light');
  77. document.getElementById('message').className = themeSwitcher.currentTheme;
  78. },
  79. toggleUltra() {
  80. this.isUltra = !this.isUltra;
  81. if (this.isUltra) {
  82. document.documentElement.setAttribute('data-theme', 'ultra-dark');
  83. } else {
  84. document.documentElement.removeAttribute('data-theme');
  85. }
  86. localStorage.setItem('isUltraDarkThemeEnabled', this.isUltra.toString());
  87. }
  88. };
  89. }
  90. const themeSwitcher = createThemeSwitcher();
  91. Vue.component('a-theme-switch', {
  92. template: `{{template "component/themeSwitchTemplate"}}`,
  93. data: () => ({
  94. themeSwitcher
  95. }),
  96. mounted() {
  97. this.$message.config({
  98. getContainer: () => document.getElementById('message')
  99. });
  100. document.getElementById('message').className = themeSwitcher.currentTheme;
  101. }
  102. });
  103. Vue.component('a-theme-switch-login', {
  104. template: `{{template "component/themeSwitchTemplateLogin"}}`,
  105. data: () => ({
  106. themeSwitcher
  107. }),
  108. mounted() {
  109. this.$message.config({
  110. getContainer: () => document.getElementById('message')
  111. });
  112. document.getElementById('message').className = themeSwitcher.currentTheme;
  113. }
  114. });
  115. </script>
  116. {{end}}