如何设置白天和黑夜主题下的文本、链接颜色？

DEROOCE commented 3 years ago

我试图修改全局的文本和链接的颜色，但后来发现这样修改会导致白天和黑夜主题的颜色都发生了变化。例如我将文本的颜色调深，则转换到黑夜模式就是一片漆黑:joy: 想请问如何单独修改白天和黑夜的文本、链接的颜色呢？

CoelacanthusHex commented 3 years ago

使用 CSS 的 var 变量功能（以两个下划线开头）

a {
    color: var(--link-color);
}

然后利用 prefer color scheme 选择亮暗

@media (prefers-color-scheme: dark) {
  --link-color: white;
}

@media (prefers-color-scheme: light) {
  --link-color: black;
}

From: Jacob Chen @.> Sent: Sunday, March 14, 2021 10:00:30 PM To: reuixiy/hugo-theme-meme @.> Cc: Subscribed @.***> Subject: [reuixiy/hugo-theme-meme] 如何设置白天和黑夜主题下的文本、链接颜色？ (#318)

我试图修改全局的文本和链接的颜色，但后来发现这样修改会导致白天和黑夜主题的颜色都发生了变化。例如我将文本的颜色调深，则转换到黑夜模式就是一片漆黑😂 想请问如何单独修改白天和黑夜的文本、链接的颜色呢？

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/reuixiy/hugo-theme-meme/issues/318, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AKIR3TPNZBH5SWYZMFXI4HTTDS6P5ANCNFSM4ZFACM6Q.

DEROOCE commented 3 years ago

使用 CSS 的 var 变量功能（以两个下划线开头） css a { color: var(--link-color); } 然后利用 prefer color scheme 选择亮暗 css @media (prefers-color-scheme: dark) { --link-color: white; } @media (prefers-color-scheme: light) { --link-color: black; } … ____ From: Jacob Chen @.> Sent: Sunday, March 14, 2021 10:00:30 PM To: reuixiy/hugo-theme-meme @.> Cc: Subscribed @.***> Subject: [reuixiy/hugo-theme-meme] 如何设置白天和黑夜主题下的文本、链接颜色？ (#318) 我试图修改全局的文本和链接的颜色，但后来发现这样修改会导致白天和黑夜主题的颜色都发生了变化。例如我将文本的颜色调深，则转换到黑夜模式就是一片漆黑😂 想请问如何单独修改白天和黑夜的文本、链接的颜色呢？ — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub<#318>, or unsubscribehttps://github.com/notifications/unsubscribe-auth/AKIR3TPNZBH5SWYZMFXI4HTTDS6P5ANCNFSM4ZFACM6Q.

我尝试使用该方法修改_custom.scss文件，结果好像并不能改变两种背景下的链接颜色。此外，我尝试了一下另一种方法：

a {
    color: black;
}

[data-theme="dark"] a {
    color: white;
}

结果奏效了... 不知道这是什么原理

reuixiy / hugo-theme-meme

如何设置白天和黑夜主题下的文本、链接颜色？ #318