顶栏内元素的浅色／深色自动切换 #843
Open
顶栏内元素的浅色／深色自动切换 #843
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
了解。
但此 PR 目前存在几个问题：
1. 没有对深色模式的支持。
2. 在文章页面中需要额外的判断。背景与顶栏内元素颜色相同，当滑动一段距离后才能借用 .yya 和 .make-it-black 来实现变色。
及一个需要优化的部分：
可以对 .yya 元素添加 backdrop-filter: blur(20px) 或是 增加顶栏的不透明度，使顶栏内元素与整体呈现更好的对比。
我并不知道你们这部分是用 TypeScript 来构建的，以下是完整的 JavaScript 代码，方便还请改写：
```
const e = document.querySelector(".site-header")
, t = document.querySelector(".skin-menu")
, n = document.querySelector("#changskin")
, o = document.querySelector("#moblieGoTop")
, h = document.querySelector(".openNav")
, r = t=>{
t > 0 ? e.classList.add("yya") : e.classList.remove("yya");
t > 0 ? h.classList.add("make-it-black") : h.classList.r ("make-it-black");
const r = t > 20 ? "scale(1)" : "scale(0)";
o.style.transform = r,
n.style.transform = r
}
;
```
祝好
PolarisS
获取Outlook for Android<https://aka.ms/AAb9ysg>
…________________________________
From: KotoriK ***@***.***>
Sent: Thursday, February 1, 2024 9:33:04 AM
To: mirai-mamori/Sakurairo ***@***.***>
Cc: PolarisSdesu ***@***.***>; Author ***@***.***>
Subject: Re: [mirai-mamori/Sakurairo] 顶栏内元素的浅色／深色自动切换 (PR #843)
JS的改动请推到源码的对应位置
https://github.com/Fuukei/Sakurairo_Scripts/blob/a329d8cb5f1fc3151b700d1c0d61ed7c368306c3/src/app/scroll_handler.ts#L3-L19
―
Reply to this email directly, view it on GitHub<#843 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AODGFLQWYQLNFS3UIEUHYGTYRLWFBAVCNFSM6AAAAABCSKRC52VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRQGMYTINBVHE>.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
|
@KotoriK 快完善一下 |
|
这个 PR 已经 45 天没有任何活动了，将被标记为过时 stale 。 删除 stale 的标签或评论，否则将在 10 天内关闭。 |
|
@KotoriK gkd |
This was referenced May 8, 2024
robert1chi
requested changes
May 9, 2024
|
这应该`只对纯白的 Svg Logo` 生效。对于普通的 Png，这会使整个图片反色。
建议：可在 Dashboard 做一个是否反色的开关。
获取Outlook for Android<https://aka.ms/AAb9ysg>
…________________________________
From: PicoAoi ***@***.***>
Sent: Thursday, May 9, 2024 10:06:22 PM
To: mirai-mamori/Sakurairo ***@***.***>
Cc: PolarisSdesu ***@***.***>; Author ***@***.***>
Subject: Re: [mirai-mamori/Sakurairo] 顶栏内元素的浅色／深色自动切换 (PR #843)
@robert1chi requested changes on this pull request.
style.css，10838~10845引起png颜色反转
―
Reply to this email directly, view it on GitHub<#843 (review)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AODGFLWUYUNNS3C55HHML2DZBN7F5AVCNFSM6AAAAABCSKRC52VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDANBYGA2DKNZYGU>.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
|
确实，计划再往后一个版本加开关 |
|
追加：
Logo 文件并不一定必须是 svg，纯白的 png 甚至 jpg 等任意格式也是没有问题的。
获取Outlook for Android<https://aka.ms/AAb9ysg>
…________________________________
From: Yoru Shuohoshi ***@***.***>
Sent: Thursday, May 9, 2024 10:09:05 PM
To: mirai-mamori/Sakurairo ***@***.***>; mirai-mamori/Sakurairo ***@***.***>
Cc: Author ***@***.***>
Subject: Re: [mirai-mamori/Sakurairo] 顶栏内元素的浅色／深色自动切换 (PR #843)
这应该`只对纯白的 Svg Logo` 生效。对于普通的 Png，这会使整个图片反色。
建议：可在 Dashboard 做一个是否反色的开关。
获取Outlook for Android<https://aka.ms/AAb9ysg>
________________________________
From: PicoAoi ***@***.***>
Sent: Thursday, May 9, 2024 10:06:22 PM
To: mirai-mamori/Sakurairo ***@***.***>
Cc: PolarisSdesu ***@***.***>; Author ***@***.***>
Subject: Re: [mirai-mamori/Sakurairo] 顶栏内元素的浅色／深色自动切换 (PR #843)
@robert1chi requested changes on this pull request.
style.css，10838~10845引起png颜色反转
―
Reply to this email directly, view it on GitHub<#843 (review)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AODGFLWUYUNNS3C55HHML2DZBN7F5AVCNFSM6AAAAABCSKRC52VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDANBYGA2DKNZYGU>.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
|
css直接反转topbar的img有点太暴力了，这个功能交给用户选择吧 |
|
所以你主题什么时候支持用 svg 当 Logo 啊啊啊啊啊啊（
我之前是直接改 wordpress 源文件的（
获取Outlook for Android<https://aka.ms/AAb9ysg>
…________________________________
From: Yoru Shuohoshi ***@***.***>
Sent: Thursday, May 9, 2024 10:11:45 PM
To: mirai-mamori/Sakurairo ***@***.***>; mirai-mamori/Sakurairo ***@***.***>
Cc: Author ***@***.***>
Subject: Re: [mirai-mamori/Sakurairo] 顶栏内元素的浅色／深色自动切换 (PR #843)
追加：
Logo 文件并不一定必须是 svg，纯白的 png 甚至 jpg 等任意格式也是没有问题的。
获取Outlook for Android<https://aka.ms/AAb9ysg>
________________________________
From: Yoru Shuohoshi ***@***.***>
Sent: Thursday, May 9, 2024 10:09:05 PM
To: mirai-mamori/Sakurairo ***@***.***>; mirai-mamori/Sakurairo ***@***.***>
Cc: Author ***@***.***>
Subject: Re: [mirai-mamori/Sakurairo] 顶栏内元素的浅色／深色自动切换 (PR #843)
这应该`只对纯白的 Svg Logo` 生效。对于普通的 Png，这会使整个图片反色。
建议：可在 Dashboard 做一个是否反色的开关。
获取Outlook for Android<https://aka.ms/AAb9ysg>
________________________________
From: PicoAoi ***@***.***>
Sent: Thursday, May 9, 2024 10:06:22 PM
To: mirai-mamori/Sakurairo ***@***.***>
Cc: PolarisSdesu ***@***.***>; Author ***@***.***>
Subject: Re: [mirai-mamori/Sakurairo] 顶栏内元素的浅色／深色自动切换 (PR #843)
@robert1chi requested changes on this pull request.
style.css，10838~10845引起png颜色反转
―
Reply to this email directly, view it on GitHub<#843 (review)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AODGFLWUYUNNS3C55HHML2DZBN7F5AVCNFSM6AAAAABCSKRC52VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDANBYGA2DKNZYGU>.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
|
对的，我应该在讨论区提到过。
获取Outlook for Android<https://aka.ms/AAb9ysg>
…________________________________
From: PicoAoi ***@***.***>
Sent: Thursday, May 9, 2024 10:13:40 PM
To: mirai-mamori/Sakurairo ***@***.***>
Cc: PolarisSdesu ***@***.***>; Author ***@***.***>
Subject: Re: [mirai-mamori/Sakurairo] 顶栏内元素的浅色／深色自动切换 (PR #843)
css直接反转topbar的img有点太暴力了，这个功能交给用户选择吧
―
Reply to this email directly, view it on GitHub<#843 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AODGFLRGDJHJQWXXPQCWGUTZBOABJAVCNFSM6AAAAABCSKRC52VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBSG42DINBYGU>.
You are receiving this because you authored the thread.Message ID: ***@***.***>
|
|
svg支持只要在function.php下面添加add_filter就行，但是考虑到XSS风险，需要解决安全问题后才能支持 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
更新 ./style.css 及 ./js/app.js，使 topbar 根据 .yya 和自定义的 .make-it-black 样式的出现自动切换顶栏内元素的浅色／深色（尚未适配深色模式主题）。
Before：
After：（.yya 和自定义的 .make-it-black 样式出现时）
