raychonote如何更改颜色主题或设计,如背景颜色

关于raychonote一个免费创建博客网站和文档的免费软件,大家可以参考raychonote系列教程

使用该软件创建的网站的主题颜色为蓝绿色(颜色代码),如下所示。#70acb1

image-20211210202445503

模板 () 和样式表 () 读取外部文件,因此任何具有编程知识的人都可以通过更改该文件来自由创建布局。nunjucks``css

下面介绍如何为不知情的人更改网站的主题颜色。css

打开 css 文件

当您打开站点的工作文件夹时,您将看到以下文件夹配置。

其中的文件夹是定义网站颜色和设计的文件。css

由于该文件定义了颜色,因此它将在文本编辑器中打开。variables.css

  • 我的博客(您输入的网站名称)

    • css

      • 可变.css ←打开此文件

    • images

    • pages

    • preview

    • static

    • system

    • templates

    • config.json

    • markdown.json

我认为你可以确认以下内容。

--primary-color是用于网站标题、页脚背景颜色等的主颜色。

 :root {
   --red: #d95c5c;
   --orange: #e07b53;
   --green: #5bbd72;
   --blue: #3b83c0;
   --primary-color: #70acb1;
   --positive: color-mod(var(--green) alpha(20%));
   --negative: color-mod(var(--red) alpha(20%));
   --mark: color-mod(#ff0 alpha(20%));
   --text: #24292e;
   --light_text: #fef4e9;
   --link: #0366d6;
 }

根据您的计算机或文本编辑器环境,内容可能显示为一行,而不是换行。

在这种情况下,我们建议您在以下编程编辑器中打开它:

  • 樱花编辑器

  • Visual Studio Code

  • Atom

  • Sublime Text

 --primary-color: #5654a2;`表示颜色的部分的值。`#5654a2

它以十六进制颜色代码的形式指定。

以下页面是有帮助的,因为各种颜色被放在一起。

https://www.colordic.org/

尝试将部分更改为(紫色)以覆盖文件。#5654a2``#5654a2

 :root {
   --red: #d95c5c;
   --orange: #e07b53;
   --green: #5bbd72;
   --blue: #3b83c0;
   --primary-color: #5654a2;
   --positive: color-mod(var(--green) alpha(20%));
   --negative: color-mod(var(--red) alpha(20%));
   --mark: color-mod(#ff0 alpha(20%));
   --text: #24292e;
   --light_text: #fef4e9;
   --link: #0366d6;
 }

在预览中,您可以看到它已更改为:

image-20211210202554739

修改样式表 () 后,您可以随意更改网站的设计,例如,在标题中显示您最喜爱的照片或副标题。css

© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发

请登录后发表评论