Merge pull request #4342 from traPtitech/CustomTheme.vue

ダークカスタムテーマを作りました。

src/views/Settings/ThemeTab.vue

@@ -37,42 +37,54 @@
           @change-theme="changeTheme"
         />
       </div>
-      <div>
-        <template v-if="state.type === 'custom'">
-          <div :class="$style.setting">
-            <div
-              v-for="(val, category) in state.custom.basic"
-              :key="category"
-              :class="$style.category"
-            >
-              <h4 class>{{ category }}</h4>
-              <div
-                v-for="(color, name) in val"
-                :key="name"
-                :class="$style.color"
-              >
-                <p :class="$style.name">{{ name }}</p>
-                <!-- eslint-disable vue/valid-v-model -->
-                <!-- TODO: 自動適用じゃなくてバリデーションしてから適用するようにする -->
-                <form-input
-                  v-model="(val[name as keyof typeof val] as string)"
-                  use-change-event
-                  on-secondary
-                  :class="$style.input"
-                />
-                <!-- eslint-enable vue/valid-v-model -->
-              </div>
+    </div>
+
+    <div>
+      <template v-if="state.type === 'custom'">
+        <div :class="$style.setting">
+          <div
+            v-for="(val, category) in state.custom.basic"
+            :key="category"
+            :class="$style.category"
+          >
+            <h4 class>{{ category }}</h4>
+            <div v-for="(color, name) in val" :key="name" :class="$style.color">
+              <p :class="$style.name">{{ name }}</p>
+              <!-- eslint-disable vue/valid-v-model -->
+              <!-- TODO: 自動適用じゃなくてバリデーションしてから適用するようにする -->
+              <form-input
+                v-model="(val[name as keyof typeof val] as string)"
+                use-change-event
+                on-secondary
+                :class="$style.input"
+              />
+              <!-- eslint-enable vue/valid-v-model --->
             </div>
           </div>
-        </template>
-        <p v-else>カスタムテーマが選択されていません</p>
-      </div>
+        </div>
+      </template>
+      <p v-else>カスタムテーマが選択されていません</p>
+    </div>
+    <div :class="$style.resetButtonContainer">
+      <form-button
+        v-if="state.type === 'custom'"
+        type="tertiary"
+        label="ライトにリセット"
+        @click="resetToLight"
+      />
+      <form-button
+        v-if="state.type === 'custom'"
+        type="tertiary"
+        label="ダークにリセット"
+        @click="resetToDark"
+      />
     </div>
   </section>
 </template>
 
 <script lang="ts" setup>
 import EditTheme from '/@/components/Settings/ThemeTab/EditTheme.vue'
+import FormButton from '/@/components/UI/FormButton.vue'
 import FormRadio from '/@/components/UI/FormRadio.vue'
 import FormInput from '/@/components/UI/FormInput.vue'
 import { reactive } from 'vue'
@@ -83,6 +95,13 @@ const state = reactive(useThemeSettings())
 const changeTheme = (theme: Theme) => {
   state.custom = theme
 }
+
+const resetToLight = () => {
+  changeTheme(structuredClone(window.defaultLightTheme))
+}
+const resetToDark = () => {
+  changeTheme(structuredClone(window.defaultDarkTheme))
+}
 </script>
 
 <style lang="scss" module>
@@ -126,4 +145,8 @@ const changeTheme = (theme: Theme) => {
     margin-left: auto;
   }
 }
+.resetButtonContainer {
+  display: flex;
+  gap: 1rem;
+}
 </style>