Use system accent color to tint the article view

This commit is contained in:
Maurice Parker 2020-03-20 06:41:38 -05:00
parent a0db54568e
commit 1e1fce59da
2 changed files with 25 additions and 13 deletions

View File

@ -35,14 +35,15 @@ a:hover {
:root {
--body-color: #444;
--body-background-color: -apple-system-text-background;
--accent-color: hsla(215, 99%, 43%, 1);
--accent-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], 1.0);
--accent-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], .75);
--block-quote-border-color: hsla(215, 99%, 43%, 0.75);
--header-table-border-color: rgba(0, 0, 0, 0.1);
--header-color: rgba(0, 0, 0, 0.3);
--header-link-color: rgba(0, 0, 0, 0.3);
--body-code-color: #666;
--system-message-color: #cbcbcb;
--feedlink-color: rgba(0, 0, 0, 0.6);
--article-title-color: #333;
--table-cell-border-color: lightgray;
}
@ -50,13 +51,13 @@ a:hover {
:root {
--body-color: #d2d2d2;
--body-background-color: #2d2d2d;
--accent-color: #4490e2;
--block-quote-border-color: rgba(68, 144, 226, 0.75);
--accent-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], 1.0);
--accent-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], .75);
--header-table-border-color: rgba(255, 255, 255, 0.1);
--header-color: #d2d2d2;
--header-link-color: #4490e2;
--body-code-color: #b2b2b2;
--system-message-color: #5f5f5f;
--article-title-color: #e0e0e0;
--table-cell-border-color: dimgray;
}
}
@ -76,7 +77,7 @@ body .header {
color: var(--header-color);
}
body .header a:link, body .header a:visited {
color: var(--header-link-color);
color: var(--accent-color);
}
body .articleDateline, body .articleDateLine.a:link, body .articleDateline a:visited {
color: var(--header-color);
@ -106,7 +107,8 @@ body > .systemMessage {
text-align: left;
}
.articleTitle {
.articleTitle a:link, .articleTitle a:visited {
color: var(--article-title-color);
margin-top: 26px;
}

View File

@ -112,12 +112,7 @@ private extension ArticleRenderer {
}
private var articleCSS: String {
#if os(iOS)
let style = try! MacroProcessor.renderedText(withTemplate: styleString(), substitutions: styleSubstitutions())
return style
#else
return styleString()
#endif
return try! MacroProcessor.renderedText(withTemplate: styleString(), substitutions: styleSubstitutions())
}
static var defaultStyleSheet: String = {
@ -260,6 +255,21 @@ private extension ArticleRenderer {
d["font-size"] = String(describing: bodyFont.pointSize)
return d
}
#else
func styleSubstitutions() -> [String: String] {
var d = [String: String]()
guard let linkColor = NSColor.controlAccentColor.usingColorSpace(.deviceRGB) else {
return d
}
let red = Int(round(linkColor.redComponent * 0xFF))
let green = Int(round(linkColor.greenComponent * 0xFF))
let blue = Int(round(linkColor.blueComponent * 0xFF))
d["accent-r"] = String(red)
d["accent-g"] = String(green)
d["accent-b"] = String(blue)
return d
}
#endif
}