Skip to content
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

Merged
merged 6 commits into from
Oct 26, 2024
Merged

Conversation

shushuya0210
Copy link

@shushuya0210 shushuya0210 commented Jul 4, 2024

カスタムテーマをダークから制作できるようにしました。close #509

Copy link

github-actions bot commented Jul 4, 2024

Copy link
Contributor

@nokhnaton nokhnaton left a 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 Show resolved Hide resolved
@@ -37,6 +37,16 @@
@change-theme="changeTheme"
/>
</div>
<button
v-if="state.type === 'custom'"
:class="$style.form"
Copy link
Contributor

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

src/views/Settings/ThemeTab.vue Show resolved Hide resolved
Copy link
Contributor

@nokhnaton nokhnaton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

良さそうです!

@nokhnaton nokhnaton merged commit c0731fa into master Oct 26, 2024
10 checks passed
@nokhnaton nokhnaton deleted the CustomTheme.vue branch October 26, 2024 12:54
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

選択中のテーマをベースにカスタムテーマをつくる
2 participants