ダークカスタムテーマを作りました。 #4342
ダークカスタムテーマを作りました。 #4342
Conversation
|
Preview (prod) → https://4342-prod.traq-preview.trapti.tech/ |
src/views/Settings/ThemeTab.vue
Outdated
| @@ -37,6 +37,16 @@ | |||
| @change-theme="changeTheme" | |||
| /> | |||
| </div> | |||
| <button | |||
There was a problem hiding this comment.
このままだと若干ボタンだとわかりにくいので、FormButtonを使ってみるといいと思います!
components/UI/FormButton.vueからimportして以下のような感じでつかってあげると良いと思います!
<form-button
v-if="state.type === 'custom'"
type="tartiary"
label="ライトにリセット"
@click="resetToLight"
/>There was a problem hiding this comment.
あと、これは個人的な意見ですが、リセットボタンは下にあったほうがしっくり来るような気がしてます。
余裕があったら、上に置くパターンと下に置くパターン両方試してみて、どっちがしっくりくるか自分の感覚でいいので判断してみると良いと思います!
迷ったらSysAd Designチームに聞いてみてもいいと思います!
src/views/Settings/ThemeTab.vue
Outdated
| @@ -37,6 +37,16 @@ | |||
| @change-theme="changeTheme" | |||
| /> | |||
| </div> | |||
| <button | |||
| v-if="state.type === 'custom'" | |||
| :class="$style.form" | |||
There was a problem hiding this comment.
このクラスは2つのボタンの間を開けるために付けてると思います。ここに間を開けるのはわかりやすくなりますし、使いやすくもなるのでめちゃくちゃいい工夫だと思います!
こういうときはボタンをdivなどで囲んであげて、display: flex; gap: 1remみたいなstyleを付けてあげるのがよくある方法でより分かりやすい書き方だと思います!
イメージとしてはこんな感じです
<div :class="resetButtonContainer >
<form-button />
<form-button />
</div>
<style module>
.resetButtonContainer {
display: flex;
gap: 1rem;
}
</style>参考(完全に理解する必要はないです):
https://developer.mozilla.org/ja/docs/Web/CSS/gap#%E3%83%95%E3%83%AC%E3%83%83%E3%82%AF%E3%82%B9%E3%83%AC%E3%82%A4%E3%82%A2%E3%82%A6%E3%83%88
| @@ -83,6 +93,13 @@ const state = reactive(useThemeSettings()) | |||
| const changeTheme = (theme: Theme) => { | |||
| state.custom = theme | |||
| } | |||
|
|
|||
| const resetToLight = () => { | |||
| changeTheme(structuredClone(window.defaultLightTheme)) | |||
There was a problem hiding this comment.
ここきちんとstructuredClone使ってリセットされるようになっててめちゃくちゃいいと思います!
カスタムテーマをダークから制作できるようにしました。close #509