Made Article View match system accent color
This commit is contained in:
parent
99820c1c2f
commit
0e3ee19e3a
|
@ -13,29 +13,27 @@ body {
|
||||||
color-scheme: light dark;
|
color-scheme: light dark;
|
||||||
font: -apple-system-body;
|
font: -apple-system-body;
|
||||||
font-size: [[font-size]]px;
|
font-size: [[font-size]]px;
|
||||||
--primary-accent-color: #086AEE;
|
--accent-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], .75);
|
||||||
--secondary-accent-color: #086AEE;
|
--block-quote-border-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], .50);
|
||||||
--block-quote-border-color: rgba(8, 106, 238, 0.75);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(prefers-color-scheme: dark) {
|
@media(prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
--primary-accent-color: #2D80F1;
|
--accent-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], .75);
|
||||||
--secondary-accent-color: #5E9EF4;
|
--block-quote-border-color: rgba([[accent-r]], [[accent-g]], [[accent-b]], .50);
|
||||||
--block-quote-border-color: rgba(94, 158, 244, 0.75);
|
|
||||||
--header-table-border-color: rgba(255, 255, 255, 0.2);
|
--header-table-border-color: rgba(255, 255, 255, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
body a, body a:link, body a:visited {
|
body a, body a:link, body a:visited {
|
||||||
color: var(--secondary-accent-color);
|
color: var(--accent-color);
|
||||||
}
|
}
|
||||||
body .header {
|
body .header {
|
||||||
font: -apple-system-body;
|
font: -apple-system-body;
|
||||||
font-size: [[font-size]]px;
|
font-size: [[font-size]]px;
|
||||||
}
|
}
|
||||||
body .header a:link, body .header a:visited {
|
body .header a:link, body .header a:visited {
|
||||||
color: var(--primary-accent-color);
|
color: var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar img {
|
.avatar img {
|
||||||
|
@ -43,12 +41,12 @@ body .header a:link, body .header a:visited {
|
||||||
}
|
}
|
||||||
|
|
||||||
pre {
|
pre {
|
||||||
border: 1px solid var(--secondary-accent-color);
|
border: 1px solid var(--accent-color);
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nnw-overflow table {
|
.nnw-overflow table {
|
||||||
border: 1px solid var(--secondary-accent-color);
|
border: 1px solid var(--accent-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.activityIndicatorWrap {
|
.activityIndicatorWrap {
|
||||||
|
|
|
@ -253,11 +253,24 @@ private extension ArticleRenderer {
|
||||||
var d = [String: String]()
|
var d = [String: String]()
|
||||||
let bodyFont = UIFont.preferredFont(forTextStyle: .body)
|
let bodyFont = UIFont.preferredFont(forTextStyle: .body)
|
||||||
d["font-size"] = String(describing: bodyFont.pointSize)
|
d["font-size"] = String(describing: bodyFont.pointSize)
|
||||||
|
|
||||||
|
if let components = UIColor(named: "AccentColor")?.cgColor.components {
|
||||||
|
d["accent-r"] = String(Int(round(components[0] * 0xFF)))
|
||||||
|
d["accent-g"] = String(Int(round(components[1] * 0xFF)))
|
||||||
|
d["accent-b"] = String(Int(round(components[2] * 0xFF)))
|
||||||
|
}
|
||||||
|
|
||||||
return d
|
return d
|
||||||
}
|
}
|
||||||
#else
|
#else
|
||||||
func styleSubstitutions() -> [String: String] {
|
func styleSubstitutions() -> [String: String] {
|
||||||
var d = [String: String]()
|
var d = [String: String]()
|
||||||
|
|
||||||
|
if #available(macOS 10.16, *) {
|
||||||
|
let bodyFont = NSFont.preferredFont(forTextStyle: .body)
|
||||||
|
d["font-size"] = String(describing: Int(round(bodyFont.pointSize * 1.33)))
|
||||||
|
}
|
||||||
|
|
||||||
guard let linkColor = NSColor.controlAccentColor.usingColorSpace(.deviceRGB) else {
|
guard let linkColor = NSColor.controlAccentColor.usingColorSpace(.deviceRGB) else {
|
||||||
return d
|
return d
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue