Set CSS value in HTML to reflect current theme
还没有人认领这个 Issue。
评估
- 难度
- 3/5
- 预计耗时
- 1-2 天
- 新手友好度
- 35/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- css, javascript
调研方向
首先跟踪主题选择器和 activateTheme() 函数，了解所选主题如何应用于页面。向相关页面容器添加可靠的深色模式标记，然后确认 SVG 样式可以区分由选择器选中的深色模式、浅色模式和浏览器偏好设置的深色模式。
由索引模型根据 Issue 内容生成。
描述
See this page, where the anchor points to an SVG. If you ensure that there's no theme in local storage for this page, then if the browser settings are used to switch between dark and light modes (I'm using Firefox), the SVG is styled appropriately to display correctly. However, if I use the theme selector on the page to select dark mode when the browser is set to light mode, the SVG does not display correctly.
The reason is that I style for light mode and use a media query to override some styles, using @media (prefers-color-scheme: dark). However, when the theme selector is used to select dark mode, then some dark-mode CSS is pulled in using the activateTheme() JS function, but from what I can tell this leaves no trace in the markup that we're now in dark mode. If there were e.g. a dark-theme class added to the <body> tag when the page is in dark mode, then I could duplicate the styling using an appropriate selector. My complete styling of the SVG is:
svg {
background-color: transparent !important;
}
line {
stroke: #000000;
fill: none;
stroke-opacity: 1;
}
polygon, rect {
fill: none;
stroke: #000000;
fill-opacity: 1;
stroke-opacity: 1;
}
polygon.filled {
fill: #ff0000;
}
polyline {
fill: none;
stroke-opacity: 1;
stroke: #000000;
}
text {
fill: #000000;
fill-opacity: 1;
stroke: none;
font-family: sans-serif;
font-style: normal;
font-weight: normal;
text-anchor: start;
}
@media (prefers-color-scheme: dark) { /* could duplicate this styling if body.dark-theme */
polygon, rect, polyline, line {
stroke: #ffffff;
}
text {
fill: #ffffff;
}
}
If there is another approach I could use to achieve the desired result (proper styling of the SVG in all cases), please let me know. Otherwise, would you consider adding dark-theme class to the body or other container tag so that I could try and achieve the desired result? Or have I missed somewhere where such a class has been added?
- 主要语言
- CSS
- 星标
- 90
- 派生
- 78
- 平均合并
- 2 天 19 小时
- 30 天内合并 PR
- 4
贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
python/python-docs-theme 的其他 Issue
-
bug help wanted
难度 2/5 1-3 小时 新手友好度 68/100
python/python-docs-theme#289 · 7 条评论 · 2 个 reaction ·
-
难度 2/5 1-3 小时 新手友好度 68/100
python/python-docs-theme#217 · 7 条评论 · 1 个 reaction ·
-
难度 3/5 1-2 天 新手友好度 55/100
python/python-docs-theme#311 · 5 条评论 ·
-
enhancement github_actions
python/python-docs-theme#260 · 6 条评论 · 已指派 1 人 ·
-
难度 4/5 3-5 天 新手友好度 35/100
python/python-docs-theme#245 · 3 条评论 ·
查看 python/python-docs-theme 的全部 Issue
相似的 Issue
-
triage
难度 1/5 1-3 小时 新手友好度 88/100
-
enhancement
难度 2/5 1-3 小时 新手友好度 72/100
-
feature pydanty:is-working
难度 1/5 1 小时以内 新手友好度 88/100
pydantic/pydantic-ai#8647 ·
-
难度 2/5 1-3 小时 新手友好度 68/100
-
:watch: Not Triaged dotnet-fsharp/svc
难度 1/5 1 小时以内 新手友好度 90/100