登录 注册

求帮忙修改一份夜间主题的十三种字体颜色搭配

我在论坛里找到的配色方案大多都是适配白天亮色模式，希望有一份适合夜间模式的配色方案。

以下是我自己用插件“配色方案”所修改的十三种字体颜色搭配，搞了两天，还有些非常丑，心浮气躁不知道怎么搭配了。

我的需求是，请根据我给的方案进行一些修改：

十三种字体

  1. 十三种颜色和背景，优先满足于其组合起来的视觉效果，适合于夜间模式（不刺眼），视觉上清晰易显——因为主要应用于数据库
  2. 十三种字体颜色，由浅到深排列（强迫症）
  3. 十三种背景颜色，没有颜色排列需求（不常用）但尽量避免黄色和紫色（不喜欢这两种颜色）

可以参考我给的图 + 我目前自定的 css 配色方案修改。（心态崩了，已经卡死）

3.PNG

4.PNG

以下是用作参考，用来修改的示意图

2.PNG

意思是修改这十三种字体颜色的搭配组合，写一个可以导入“配色方案”插件的 css。

1.PNG

这是我原先设想的方案

字体：相近 对比 相近 对比 深白
背景：红 绿 蓝 | 红绿蓝 | 青橙紫 | 青橙紫 | 浅白

这是我收集的配色网站，感觉挺有用，只是不知道怎么用

常用配色表 | CSS 可视化 (bqrdh.com)
传统色 | CSS 可视化 (bqrdh.com)

以下是我目前的配色方案

这十三种背景颜色中，有些涉及到了“透明度”，对此没有太大要求，重点是满足十三种“组合”的视觉清晰，最好还有美观。（不喜欢杀马特，不喜欢荧光体）

诚挚希望大佬出手帮忙修改。

{
	"name": "export",
	"light": {
		"font-background12": {
			"border-top-left-radius": "5px",
			"border-top-right-radius": "5px",
			"border-bottom-right-radius": "5px",
			"border-bottom-left-radius": "5px",
			"border-top-color": "rgba(255, 255, 255, 0.1)",
			"border-right-color": "rgba(255, 255, 255, 0.1)",
			"border-bottom-color": "rgba(255, 255, 255, 0.1)",
			"border-left-color": "rgba(255, 255, 255, 0.1)",
			"border-top-width": "1px",
			"border-right-width": "1px",
			"border-bottom-width": "1px",
			"border-left-width": "1px",
			"border-top-style": "groove",
			"border-right-style": "groove",
			"border-bottom-style": "groove",
			"border-left-style": "groove",
			"background-color": "rgba(240, 50, 230, 0.8)"
		},
		"font-background10": {
			"border-top-left-radius": "5px",
			"border-top-right-radius": "5px",
			"border-bottom-right-radius": "5px",
			"border-bottom-left-radius": "5px",
			"border-top-color": "rgba(255, 255, 255, 0.1)",
			"border-right-color": "rgba(255, 255, 255, 0.1)",
			"border-bottom-color": "rgba(255, 255, 255, 0.1)",
			"border-left-color": "rgba(255, 255, 255, 0.1)",
			"border-top-width": "1px",
			"border-right-width": "1px",
			"border-bottom-width": "1px",
			"border-left-width": "1px",
			"border-top-style": "groove",
			"border-right-style": "groove",
			"border-bottom-style": "groove",
			"border-left-style": "groove",
			"background-color": "rgba(66, 212, 244, 0.8)"
		},
		"font-background7": {
			"border-top-left-radius": "5px",
			"border-top-right-radius": "5px",
			"border-bottom-right-radius": "5px",
			"border-bottom-left-radius": "5px",
			"border-top-color": "rgba(255, 255, 255, 0.1)",
			"border-right-color": "rgba(255, 255, 255, 0.1)",
			"border-bottom-color": "rgba(255, 255, 255, 0.1)",
			"border-left-color": "rgba(255, 255, 255, 0.1)",
			"border-top-width": "1px",
			"border-right-width": "1px",
			"border-bottom-width": "1px",
			"border-left-width": "1px",
			"border-top-style": "groove",
			"border-right-style": "groove",
			"border-bottom-style": "groove",
			"border-left-style": "groove",
			"background-color": "rgba(245, 130, 49, 0.8)"
		},
		"font-background3": {
			"border-top-left-radius": "5px",
			"border-top-right-radius": "5px",
			"border-bottom-right-radius": "5px",
			"border-bottom-left-radius": "5px",
			"border-top-color": "rgba(255, 255, 255, 0.1)",
			"border-right-color": "rgba(255, 255, 255, 0.1)",
			"border-bottom-color": "rgba(255, 255, 255, 0.1)",
			"border-left-color": "rgba(255, 255, 255, 0.1)",
			"border-top-width": "1px",
			"border-right-width": "1px",
			"border-bottom-width": "1px",
			"border-left-width": "1px",
			"border-top-style": "groove",
			"border-right-style": "groove",
			"border-bottom-style": "groove",
			"border-left-style": "groove",
			"background-color": "rgba(70, 153, 144, 0.8)"
		},
		"font-background1": {
			"border-top-left-radius": "5px",
			"border-top-right-radius": "5px",
			"border-bottom-right-radius": "5px",
			"border-bottom-left-radius": "5px",
			"border-top-color": "rgba(255, 255, 255, 0.1)",
			"border-right-color": "rgba(255, 255, 255, 0.1)",
			"border-bottom-color": "rgba(255, 255, 255, 0.1)",
			"border-left-color": "rgba(255, 255, 255, 0.1)",
			"border-top-width": "1px",
			"border-right-width": "1px",
			"border-bottom-width": "1px",
			"border-left-width": "1px",
			"border-top-style": "groove",
			"border-right-style": "groove",
			"border-bottom-style": "groove",
			"border-left-style": "groove",
			"background-color": "rgba(128, 0, 0, 0.8)"
		},
		"font-background2": {
			"border-top-left-radius": "5px",
			"border-top-right-radius": "5px",
			"border-bottom-right-radius": "5px",
			"border-bottom-left-radius": "5px",
			"border-top-color": "rgba(255, 255, 255, 0.1)",
			"border-right-color": "rgba(255, 255, 255, 0.1)",
			"border-bottom-color": "rgba(255, 255, 255, 0.1)",
			"border-left-color": "rgba(255, 255, 255, 0.1)",
			"border-top-width": "1px",
			"border-right-width": "1px",
			"border-bottom-width": "1px",
			"border-left-width": "1px",
			"border-top-style": "groove",
			"border-right-style": "groove",
			"border-bottom-style": "groove",
			"border-left-style": "groove",
			"background-color": "rgba(154, 99, 36, 0.8)"
		},
		"font-background4": {
			"border-top-left-radius": "5px",
			"border-top-right-radius": "5px",
			"border-bottom-right-radius": "5px",
			"border-bottom-left-radius": "5px",
			"border-top-color": "rgba(255, 255, 255, 0.1)",
			"border-right-color": "rgba(255, 255, 255, 0.1)",
			"border-bottom-color": "rgba(255, 255, 255, 0.1)",
			"border-left-color": "rgba(255, 255, 255, 0.1)",
			"border-top-width": "1px",
			"border-right-width": "1px",
			"border-bottom-width": "1px",
			"border-left-width": "1px",
			"border-top-style": "groove",
			"border-right-style": "groove",
			"border-bottom-style": "groove",
			"border-left-style": "groove",
			"background-color": "rgba(0, 0, 117, 0.5)"
		},
		"font-background5": {
			"border-top-left-radius": "5px",
			"border-top-right-radius": "5px",
			"border-bottom-right-radius": "5px",
			"border-bottom-left-radius": "5px",
			"border-top-color": "rgba(255, 255, 255, 0.1)",
			"border-right-color": "rgba(255, 255, 255, 0.1)",
			"border-bottom-color": "rgba(255, 255, 255, 0.1)",
			"border-left-color": "rgba(255, 255, 255, 0.1)",
			"border-top-width": "1px",
			"border-right-width": "1px",
			"border-bottom-width": "1px",
			"border-left-width": "1px",
			"border-top-style": "groove",
			"border-right-style": "groove",
			"border-bottom-style": "groove",
			"border-left-style": "groove",
			"background-color": "rgba(0, 0, 0, 0.4)"
		},
		"font-background6": {
			"border-top-left-radius": "5px",
			"border-top-right-radius": "5px",
			"border-bottom-right-radius": "5px",
			"border-bottom-left-radius": "5px",
			"border-top-color": "rgba(255, 255, 255, 0.1)",
			"border-right-color": "rgba(255, 255, 255, 0.1)",
			"border-bottom-color": "rgba(255, 255, 255, 0.1)",
			"border-left-color": "rgba(255, 255, 255, 0.1)",
			"border-top-width": "1px",
			"border-right-width": "1px",
			"border-bottom-width": "1px",
			"border-left-width": "1px",
			"border-top-style": "groove",
			"border-right-style": "groove",
			"border-bottom-style": "groove",
			"border-left-style": "groove",
			"background-color": "rgba(230, 25, 75, 0.8)"
		},
		"font-background8": {
			"border-top-left-radius": "5px",
			"border-top-right-radius": "5px",
			"border-bottom-right-radius": "5px",
			"border-bottom-left-radius": "5px",
			"border-top-color": "rgba(255, 255, 255, 0.1)",
			"border-right-color": "rgba(255, 255, 255, 0.1)",
			"border-bottom-color": "rgba(255, 255, 255, 0.1)",
			"border-left-color": "rgba(255, 255, 255, 0.1)",
			"border-top-width": "1px",
			"border-right-width": "1px",
			"border-bottom-width": "1px",
			"border-left-width": "1px",
			"border-top-style": "groove",
			"border-right-style": "groove",
			"border-bottom-style": "groove",
			"border-left-style": "groove",
			"background-color": "rgba(255, 225, 25, 0.8)"
		},
		"font-background9": {
			"border-top-left-radius": "5px",
			"border-top-right-radius": "5px",
			"border-bottom-right-radius": "5px",
			"border-bottom-left-radius": "5px",
			"border-top-color": "rgba(255, 255, 255, 0.1)",
			"border-right-color": "rgba(255, 255, 255, 0.1)",
			"border-bottom-color": "rgba(255, 255, 255, 0.1)",
			"border-left-color": "rgba(255, 255, 255, 0.1)",
			"border-top-width": "1px",
			"border-right-width": "1px",
			"border-bottom-width": "1px",
			"border-left-width": "1px",
			"border-top-style": "groove",
			"border-right-style": "groove",
			"border-bottom-style": "groove",
			"border-left-style": "groove",
			"background-color": "rgba(60, 180, 75, 0.8)"
		},
		"font-background11": {
			"border-top-left-radius": "5px",
			"border-top-right-radius": "5px",
			"border-bottom-right-radius": "5px",
			"border-bottom-left-radius": "5px",
			"border-top-color": "rgba(255, 255, 255, 0.1)",
			"border-right-color": "rgba(255, 255, 255, 0.1)",
			"border-bottom-color": "rgba(255, 255, 255, 0.1)",
			"border-left-color": "rgba(255, 255, 255, 0.1)",
			"border-top-width": "1px",
			"border-right-width": "1px",
			"border-bottom-width": "1px",
			"border-left-width": "1px",
			"border-top-style": "groove",
			"border-right-style": "groove",
			"border-bottom-style": "groove",
			"border-left-style": "groove",
			"background-color": "rgba(67, 99, 216, 0.88)"
		},
		"font-background13": {
			"border-top-left-radius": "5px",
			"border-top-right-radius": "5px",
			"border-bottom-right-radius": "5px",
			"border-bottom-left-radius": "5px",
			"border-top-color": "rgba(255, 255, 255, 0.1)",
			"border-right-color": "rgba(255, 255, 255, 0.1)",
			"border-bottom-color": "rgba(255, 255, 255, 0.1)",
			"border-left-color": "rgba(255, 255, 255, 0.1)",
			"border-top-width": "1px",
			"border-right-width": "1px",
			"border-bottom-width": "1px",
			"border-left-width": "1px",
			"border-top-style": "groove",
			"border-right-style": "groove",
			"border-bottom-style": "groove",
			"border-left-style": "groove",
			"background-color": "rgba(169, 169, 169, 0.44)"
		}
	},
	"dark": {
		"font-background10": {
			"background-color": "rgba(255, 165, 0, 0.5)"
		},
		"font-background8": {
			"background-color": "rgba(255, 192, 203, 0.2)"
		},
		"font-background13": {
			"background-color": "rgba(0, 139, 139, 0.7)"
		},
		"font-background7": {
			"background-color": "rgba(255, 192, 203, 0.6)"
		},
		"font-background5": {
			"background-color": "rgba(255, 255, 0, 0.3)"
		},
		"font-background3": {
			"background-color": "rgba(0, 206, 206, 0.3)"
		},
		"font-background1": {
			"background-color": "rgb(255, 192, 203)"
		},
		"font-color12": {
			"color": "rgb(235, 145, 0)"
		},
		"font-color10": {
			"color": "rgb(255, 228, 181)"
		},
		"font-color8": {
			"color": "rgb(235, 145, 0)"
		},
		"font-color5": {
			"color": "rgb(255, 255, 0)"
		},
		"font-color3": {
			"color": "rgb(0, 250, 154)"
		},
		"font-color1": {
			"color": "rgb(64, 48, 50)"
		},
		"font-color2": {
			"color": "rgb(238, 238, 238)"
		},
		"font-color4": {
			"color": "rgb(255, 182, 193)"
		},
		"font-color6": {
			"color": "rgb(102, 171, 255)"
		},
		"font-color7": {
			"color": "rgb(230, 230, 250)"
		},
		"font-color9": {
			"color": "rgb(235, 145, 0)"
		},
		"font-color11": {
			"color": "rgb(218, 165, 32)"
		},
		"font-color13": {
			"color": "rgb(235, 145, 0)"
		},
		"font-background2": {
			"background-color": "rgb(28, 73, 89)"
		},
		"font-background4": {
			"background-color": "rgba(255, 99, 71, 0.3)"
		},
		"font-background6": {
			"background-color": "rgba(102, 171, 255, 0.2)"
		},
		"font-background11": {
			"background-color": "rgba(0, 100, 0, 0.4)"
		}
	}
}
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统，支持完全离线使用，同时也支持端到端加密同步。

    融合块、大纲和双向链接，重构你的思维。

    21014 引用 • 82591 回帖
  • Q&A

    提问之前请先看《提问的智慧》，好的问题比好的答案更有价值。

    7452 引用 • 33867 回帖 • 198 关注
30 悬赏
22 21 1

相关帖子

回帖
求帮忙修改一份夜间主题的十三种字体颜色搭配

欢迎来到这里！

我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。

注册 关于
请输入回帖内容 ...
Floria233
回帖
41
 帖子
11
 积分
481