-
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
ダークカスタムテーマを作りました。 #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 | |||
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
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.
良さそうです!
カスタムテーマをダークから制作できるようにしました。close #509