-
Notifications
You must be signed in to change notification settings - Fork 40
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
ダークカスタムテーマを作りました。 #4342
base: master
Are you sure you want to change the base?
ダークカスタムテーマを作りました。 #4342
Conversation
Preview (prod) → https://4342-prod.traq-preview.trapti.tech/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
プルリクありがとうございます!
良かったなと思う点や気になった点などいくつかコメントしました。
確認してもらえると嬉しいです!
src/views/Settings/ThemeTab.vue
Outdated
@@ -37,6 +37,16 @@ | |||
@change-theme="changeTheme" | |||
/> | |||
</div> | |||
<button |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
このままだと若干ボタンだとわかりにくいので、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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
あと、これは個人的な意見ですが、リセットボタンは下にあったほうがしっくり来るような気がしてます。
余裕があったら、上に置くパターンと下に置くパターン両方試してみて、どっちがしっくりくるか自分の感覚でいいので判断してみると良いと思います!
迷ったらSysAd Designチームに聞いてみてもいいと思います!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
分かりました
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
このクラスは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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ここきちんとstructuredClone
使ってリセットされるようになっててめちゃくちゃいいと思います!
カスタムテーマをダークから制作できるようにしました。close #509