英文:
Toggle dark / light mode in Hugo theme Coder to affect SVG image and Mermaid diagram
问题
我使用 Hugo 主题 Coder，其中在 hugo.toml 文件中有一个选项 hideColorSchemeToggle，通过点击图标，非常方便地在深色模式和浅色模式之间切换。
我希望 SVG 图像和 Mermaid 图表在模式切换时也能随之更改。然后，在阅读和询问之后，我尝试复制位于文件夹 themes\hugo-coder\assets\scss 中的文件 _content_dark.scss 到文件夹 assets\scss 并对其进行修改。
在文件末尾，原始内容如下：
body.colorscheme-dark {
@include content_dark();
}
稍后更改为：
body.colorscheme-dark {
@include content_dark();
svg {
filter: invert(1);
}
.mermaid {
filter: invert(0);
}
}
它确实起作用。我可以在深色模式和浅色模式之间切换时使SVG图像和Mermaid图表发生变化。
问题是，这种方式是否安全？还有没有更好的方法来实现这一点？如果我想要除了 filter: invert(n) 支持的颜色变化之外的不同颜色变化呢？我只是担心结果只是巧合，并且在其他主题中可能会有所不同，因为我不太了解它是如何工作的。
英文:
I use Hugo theme Coder, which has option hideColorSchemeToggle in the hugo.toml file, which makes it very convenient to toggle between dark and light mode by only clicking the icon.
I want that SVG image and Mermaid diagram also change as the mode is changed. Then, after reading and asking around, I try to copy the file _content_dark.scss located in the folder themes\hugo-coder\assets\scss to folder assets\scss and modify it.
Near end of the file, the original content is as follow
body.colorscheme-dark {
@include content_dark();
}
which is later changed to
body.colorscheme-dark {
@include content_dark();
svg {
filter: invert(1);
}
.mermaid {
filter: invert(0);
}
}
And it does work. I can have SVG image and Mermaid diagram to change as I toggle between dark and light mode.
The question is, whether this way safe? Or is there any better way to achieve this? And what if I want to have different color variations beside supported by filter: invert(n)? I am just worry that the results are only coincidence and will be different in other theme, since I do not really understand how it works.
答案1
得分: 1
修改_content_dark.scss文件如上所述，可以被视为“相对安全”，因为它使用标准的CSS来根据主题调整样式。
然而，如果您修改主题内部的文件，这些更改在将来更新主题时可能会被覆盖。为了避免这种情况，建议创建一个自定义CSS文件并将其包含在您的网站中，而不是直接修改主题的文件。
这意味着创建一个新的CSS文件，您可以在其中放置自定义样式。这个文件应该位于您的Hugo网站的assets目录中。例如，在assets/css目录中创建一个名为custom.css的文件（如果不存在，您可能需要创建css目录）。
编辑custom.css文件，并添加您想要应用于您的网站的自定义样式。例如，您可以为深色模式添加自定义样式：
body.colorscheme-dark svg {
filter: invert(1);
}
然后，您需要告诉Hugo使用您的自定义CSS文件：编辑Hugo用于生成您的网站的HTML模板文件。一种方法是在您的网站的layouts/partials目录中创建一个名为head.html的文件（如果不存在，则创建这些目录）。
在head.html中，添加以下代码以链接您的自定义CSS文件：
<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">
在通常位于layouts/_default/baseof.html的主要布局文件中，您需要包含您刚刚创建的head.html局部文件。在baseof.html文件的<head>部分中，通过在<head>标签内添加以下代码来包含您的局部文件：
{{ partial "head.html" . }}
最后，从命令行运行hugo server来构建您的网站并启动开发服务器。在Web浏览器中访问您的网站，以确保您的自定义样式被正确应用。
这样，您就不会直接修改主题的文件，而您的自定义样式会保持分离。这降低了在更新主题时意外覆盖您的更改的可能性，也更容易管理您的自定义内容。
此外，filter: invert(1)方法有点“粗糙”。它反转了所有颜色，这可能并不总是得到您想要的结果。如果您想要更多控制深色模式中使用的特定颜色，您可能需要采用不同的方法。
为了更好地控制颜色变化，您可以考虑使用CSS自定义属性（变量）或更有针对性的CSS规则。以下是使用CSS自定义属性的示例：
body.colorscheme-dark {
--primary-color: #your-dark-mode-color;
--secondary-color: #another-dark-mode-color;
// ...更多自定义属性
}
svg {
fill: var(--primary-color);
}
此示例为深色模式中的主要颜色和次要颜色设置了自定义属性，然后使用这些属性来设置SVG元素的填充颜色。这使您能够更精细地控制深色模式中使用的颜色，而不仅仅是反转它们。
英文:
Modifying the _content_dark.scss file as described can be considered "relatively safe" in the sense that it uses standard CSS to adjust the styles based on the theme.
However,if you modify files within the theme itself, these changes could be overwritten if you update the theme in the future. To avoid this, it is recommended to create a custom CSS file and include it in your site instead of modifying the theme's files directly.
That means creating a new CSS file where you can place your custom styles. This file should be located within the assets directory of your Hugo site. For example, create a file named custom.css within the assets/css directory (you might need to create the css directory if it does not exist).
Edit the custom.css file and add the custom styles you want to apply to your site. For example, you can add custom styles for dark mode:
body.colorscheme-dark svg {
filter: invert(1);
}
You then need to tell Hugo to use your custom CSS file: edit the HTML template files that Hugo uses to generate your site. One way to do this is to create a file called head.html in the layouts/partials directory of your site (create the directories if they do not exist).
Within head.html, add the following code to link your custom CSS file:
<link rel="stylesheet" href="{{ "css/custom.css" | absURL }}">
In the main layout file, which is usually located in layouts/_default/baseof.html, you need to include the head.html partial you just created. Find the <head> section of your baseof.html file and include your partial by adding the following code inside the <head> tags:
{{ partial "head.html" . }}
finally, run hugo server from the command line to build your site and start the development server. Visit your site in a web browser to make sure that your custom styles are being applied correctly.
This way, you are not modifying the theme's files directly, and your custom styles are kept separate. This makes it less likely that your changes will be accidentally overwritten if you update the theme, and it also makes it easier to manage your customizations.
Additionally, the filter: invert(1) method is a bit of a "blunt instrument". It inverts all the colors, which might not always give you the results you want. If you want more control over the specific colors used in dark mode, you might want to use a different approach.
For more control over color variations, you might consider using CSS Custom Properties (variables) or more targeted CSS rules. Here is an example using CSS Custom Properties:
body.colorscheme-dark {
--primary-color: #your-dark-mode-color;
--secondary-color: #another-dark-mode-color;
// ... more custom properties
}
svg {
fill: var(--primary-color);
}
This example sets custom properties for the primary and secondary colors in dark mode, and then uses those properties to set the fill color of the SVG elements. This gives you more fine-grained control over the colors used in dark mode, rather than just inverting them.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论