feat: darkmode (close #1865) #2232
Conversation
|
As KieranHunt reminds, I will check the switch license which I used in the PR. |
|
I think it's too dark 😂 |
Yes, I will make some changes |
|
@ChungZH Color is changed I am now working on prefers-color-scheme feature |
|
New outlook It's not pure back any more |
|
Cool！ |
|
This looks great! I've been looking for an dark mode solution for my university's Hacklab Website. I saw that you placed the switch in a similar location on your personal website. I would prefer the switch to be at the very end. Is there a reason you placed the switch next to the search bar? |
Good advice, I can changed it to the bottom of the page. |
|
|
| <script> | ||
| export default { | ||
| data: () => ({ | ||
| isDarkmode: { type: Boolean, default: false } |
There was a problem hiding this comment.
What's this for? It looks like props style
| $nightBgcolor ?= #1e1e1e | ||
| $nightFontcolor ?= #9e9e9e | ||
| $nightBordercolor ?= #151310 | ||
| $contentClass = '.theme-default-content' |
There was a problem hiding this comment.
Configurable?
Yes
There was a problem hiding this comment.
Well, I was asking why not use $contentClass ?= to avoid override issues
There was a problem hiding this comment.
Well, I was asking why not use
$contentClass ?=to avoid override issues
The default theme is using = instead of ?=
There was a problem hiding this comment.
BTW, it's already a pre-defined value in theme default
| @@ -0,0 +1,9 @@ | |||
| .theme-dark | |||
| // 主页 | |||
| @@ -22,3 +22,7 @@ pre.vue-container | |||
| color #808080 | |||
| font-weight light | |||
|
|
|||
|
|
|||
| .theme-dark | |||
There was a problem hiding this comment.
only theme-vue has bit-sponsor class
Anyway, good job and thanks for contribution 👍 |
|
I have completed building and testing this feature with |
|
I have opened a new PR #2301 |
Summary
What kind of change does this PR introduce? (check at least one)
If changing the UI of default theme, please provide the before/after screenshot:
Does this PR introduce a breaking change? (check one)
If yes, please describe the impact and migration path for existing applications:
The PR fulfills these requirements:
fix #xxx[,#xxx], where "xxx" is the issue number)You have tested in the following browsers: (Providing a detailed version will be better.)
If adding a new feature, the PR's description includes:
To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.
Other information:
It should fix issue #1865