TypechoJoeTheme

尘遇 logo

当我遇上你
排行榜
统计

Joe主题自定义搭配色教程

醉书生站长
6个月前
4 评论
304 阅读
检测收录...
05/14
本文最后更新于2021年05月14日,已超过208天没有更新,若内容或图片失效,请留言反馈。

打开主题外观设置 - 全局设置 - 自定义CSS,填写以下内容:

body {
    --theme: #409eff;
}

第二步
随便百度一个颜色网站,例如:https://www.5tu.cn/colors/yansebiao.html

复制自己喜欢的颜色色彩值,例如珊瑚色:#f8aba6。接着替换掉上面填写的颜色即可,上面的代码就如下所示:

body {
    --theme: #f8aba6;
}

接着保存,去前台刷新就能看见变化了。

完整版内容
首先打开主题外观设置 - 全局设置 - 自定义CSS,填写以下内容:

body {
    --theme: #409eff;
    --background: #fff;
    --main: #303133;
    --routine: #606266;
    --minor: #909399;
    --seat: #c0c4cc;
    --classA: #dcdfe6;
    --classB: #e4e7ed;
    --classC: #ebeef5;
    --classD: #f2f6fc;
    --radius-wrap: 8px;
    --radius-inner: 4px;
    --text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    --box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
}

首先随便拿上面的一个属性进行介绍。

例如:--theme: #409eff;
--theme 这个不能修改,固定的主题调用语法。
--theme 冒号后面的是颜色的色彩值,这个色彩值可以用常见的颜色格式。例如 #ff6800、rgba(0,0,0,1) 等等都可以
明白上面的意思后,接下来对上面的每个属性做一个描述
--theme
顾名思义,主题色的意思,用于修改整个网站的主题色彩
--background
这个介绍不太好描述,用一个图形容下,比如下面这张图,他的背景色就是用的这个属性值(白色),如果想变成透明的话,可以填写 rgba 值,例如:rgba(255,255,255,0.5) 半透明
--main
这个是文字的颜色,颜色最深的
--routine
这个是文字的颜色,颜色稍微次于上面那个
--minor
这个是文字的颜色,颜色稍微次于上面那个
--seat
这个是文字的颜色,颜色稍微次于上面那个
--classA
这个主要用于横线、分割线用的颜色,颜色最深的
--classB
这个主要用于横线、分割线用的颜色,颜色稍微次于上面那个
--classC
这个主要用于横线、分割线用的颜色,颜色稍微次于上面那个
--classD
这个主要用于横线、分割线用的颜色,颜色稍微次于上面那个
--radius-wrap
这个主要用外层包裹的圆角度数的,如果不需要圆角,可以写0,例如
--radius-inner
这个主要用里层包裹的圆角度数的,如果不需要圆角,可以写0
--text-shadow
这个是文章标题的字体阴影,这个只在文章详情页用到,改不改区别不大
--box-shadow
这个是阴影,这个弄得好,网站炫酷的一批,例如拟态等都是通过这个实现的

本文共568个字数,您已阅读:平均阅读时长≈2分钟。
朗读
点赞
1
赞赏
海报
人生
欢迎
要时间嘉许,等春风得意,我正好遇上你!

微信/QQ/支付宝三合一收款码

微信
QQ
支付宝
打开微信/QQ/支付宝扫一扫,即可进行扫码打赏!
版权属于:

尘遇

最后修改:

2021 年 05 月 14 日 01 : 29 PM

本文链接:

https://chenyu.me/1384.html(转载时请注明本文出处及文章链接)

已有 4 条评论
  1. 新一举人 作者
    Windows 10 · Google Chrome
    沙发

    格子背景有时间出个教程吧

    2021-11-24 18:24 回复
    1. GGHZT贡士 作者
      Windows 10 · Google Chrome
      @新一

      臣附议

      2021-11-25 11:35 回复
      1. 醉书生榜眼站长 作者
        Windows 10 · Google Chrome
        @GGHZT

        你们后台有直接设置背景图片的啊

        2021-11-25 15:04 回复
        1. GGHZT贡士 作者
          Windows 10 · Google Chrome
          @醉书生

          你这个背景图片与众不同 发一发呗

          2021-11-25 18:16 回复

光阴者,百代之过客

今日已经过去小时
这周已经过去
本月已经过去
今年已经过去个月

最新回复

  1. 小斌秀才
    2021-12-07
  2. GGHZT贡士
    2021-12-06
  3. 米奇秀才
    2021-12-06
  4. GGHZT贡士
    2021-12-04

    {!{data:image/webp;base64,UklGRpIEAABXRUJQVlA4WAoAAAAwAAAAtQMAKwEASUNDUBgCAAAAAAIYAAAAAAIQAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANkFMUEgbAAAAAQcQEREQkCT9/09G9D/jP//5z3/+85///F9vAFZQOCAwAgAAkEAAnQEqtgMsAT9xuNlltK8rpyAIApAuCWlu4XdhG0AJ7APfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkPfbJyHvtk5D32ych77ZOQ99snIe+2TkN4AAP7/rR4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=}!}

  5. GGHZT贡士
    2021-11-30