顶栏内元素的浅色／深色自动切换

PolarisSdesu commented 7 months ago

更新 ./style.css 及 ./js/app.js，使 topbar 根据 .yya 和自定义的 .make-it-black 样式的出现自动切换顶栏内元素的浅色／深色（尚未适配深色模式主题）。

Before：

After：（.yya 和自定义的 .make-it-black 样式出现时）

KotoriK commented 7 months ago

JS的改动请推到源码的对应位置

https://github.com/Fuukei/Sakurairo_Scripts/blob/a329d8cb5f1fc3151b700d1c0d61ed7c368306c3/src/app/scroll_handler.ts#L3-L19

PolarisSdesu commented 7 months ago

了解。

但此 PR 目前存在几个问题：

没有对深色模式的支持。
在文章页面中需要额外的判断。背景与顶栏内元素颜色相同，当滑动一段距离后才能借用 .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 Androidhttps://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 GitHubhttps://github.com/mirai-mamori/Sakurairo/pull/843#issuecomment-1920314459, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AODGFLQWYQLNFS3UIEUHYGTYRLWFBAVCNFSM6AAAAABCSKRC52VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMYTSMRQGMYTINBVHE. You are receiving this because you authored the thread.Message ID: @.***>

mirai-mamori commented 7 months ago

@KotoriK 快完善一下

github-actions[bot] commented 6 months ago

这个 PR 已经 45 天没有任何活动了，将被标记为过时 stale 。删除 stale 的标签或评论，否则将在 10 天内关闭。

mirai-mamori commented 5 months ago

@KotoriK gkd

PolarisSdesu commented 4 months ago

这应该只对纯白的 Svg Logo 生效。对于普通的 Png，这会使整个图片反色。建议：可在 Dashboard 做一个是否反色的开关。

获取Outlook for Androidhttps://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 GitHubhttps://github.com/mirai-mamori/Sakurairo/pull/843#pullrequestreview-2048045785, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AODGFLWUYUNNS3C55HHML2DZBN7F5AVCNFSM6AAAAABCSKRC52VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDANBYGA2DKNZYGU. You are receiving this because you authored the thread.Message ID: @.***>

robert1chi commented 4 months ago

确实，计划再往后一个版本加开关

PolarisSdesu commented 4 months ago

追加： Logo 文件并不一定必须是 svg，纯白的 png 甚至 jpg 等任意格式也是没有问题的。

获取Outlook for Androidhttps://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 Androidhttps://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 GitHubhttps://github.com/mirai-mamori/Sakurairo/pull/843#pullrequestreview-2048045785, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AODGFLWUYUNNS3C55HHML2DZBN7F5AVCNFSM6AAAAABCSKRC52VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDANBYGA2DKNZYGU. You are receiving this because you authored the thread.Message ID: @.***>

robert1chi commented 4 months ago

css直接反转topbar的img有点太暴力了，这个功能交给用户选择吧

PolarisSdesu commented 4 months ago

所以你主题什么时候支持用 svg 当 Logo 啊啊啊啊啊啊（我之前是直接改 wordpress 源文件的（

获取Outlook for Androidhttps://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 Androidhttps://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 Androidhttps://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 GitHubhttps://github.com/mirai-mamori/Sakurairo/pull/843#pullrequestreview-2048045785, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AODGFLWUYUNNS3C55HHML2DZBN7F5AVCNFSM6AAAAABCSKRC52VHI2DSMVQWIX3LMV43YUDVNRWFEZLROVSXG5CSMV3GSZLXHMZDANBYGA2DKNZYGU. You are receiving this because you authored the thread.Message ID: @.***>

PolarisSdesu commented 4 months ago

对的，我应该在讨论区提到过。

获取Outlook for Androidhttps://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 GitHubhttps://github.com/mirai-mamori/Sakurairo/pull/843#issuecomment-2102744485, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AODGFLRGDJHJQWXXPQCWGUTZBOABJAVCNFSM6AAAAABCSKRC52VHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDCMBSG42DINBYGU. You are receiving this because you authored the thread.Message ID: @.***>

robert1chi commented 4 months ago

svg支持只要在function.php下面添加add_filter就行，但是考虑到XSS风险，需要解决安全问题后才能支持

github-actions[bot] commented 2 months ago

这个 PR 已经 45 天没有任何活动了，将被标记为过时 stale 。删除 stale 的标签或评论，否则将在 10 天内关闭。

github-actions[bot] commented 1 month ago

这个 PR 已经 45 天没有任何活动了，将被标记为过时 stale 。删除 stale 的标签或评论，否则将在 10 天内关闭。

github-actions[bot] commented 3 weeks ago

此 PR 由于被标记为 stale 且超过 10 天没有活动，已自动关闭。

mirai-mamori / Sakurairo

顶栏内元素的浅色／深色自动切换 #843