这个插件仅用于快速调节块的前景色和背景色,你可以使用它装饰你的笔记。
使用方式
与思源自身的块样式按钮基本一致,只是简单增加了一些快捷功能。
二次开发
这个插件的源代码全部位于插件文件夹中,你可以自行修改开发,注意遵守相关协议即可。
注意如果你制作了修改版本的插件,需要修改 plugin.json 中各个插件名字段,避免更新时被覆盖。
有关更新
由于浏览器的代码加载机制,更新插件之后可能需要==清除缓存并硬刷新,==否则可能出错。
主要功能
应用主题前景色
与思源原生前景色功能一致,不再赘述。
应用主题背景色
与思源原生背景色功能一致,不再赘述。
应用主题卡片颜色方案
与思源原生卡片样式功能一致
通过以上功能的实现,Markdown 卡片不仅能实现与思源笔记原生卡片样式一致的效果,还能提供更高的灵活性和可操作性,为用户带来更加便捷和高效的笔记体验。
应用主题颜色排列组合
为了更快速使用,这个插件直接将所有主题颜色方案可能实现的配色列出。
点击此处应用:
自定义颜色
调色盘可以实时选择颜色,① 处的两个按钮可以选择调整目标是背景色或者前景色。
这些按钮显示了所有具有颜色或者背景色属性的块,可以右键打开原始块所在的位置。
可以通过点击图中这个按钮临时添加自定义配色,但是这些配色将在下次打开这个面板时被清除,因此建议使用块来保存配色方案。
清除块颜色
点击清除对应范围内块的颜色。
其中已经加载的块指界面上存在对应 DOM 块元素的块,可见块指已经加载且屏幕范围内可见的所有块,选中块指光标所在的块或者主动选择的所有块。
注意:为了方便颜色管理,此处==没有跳过嵌入块==
颜色判定
根据每个块的前景色自动判定并使用合适的前景色。
根据每个块的背景色自动判定并使用合适的背景色。
在支持颜色判定的色板中会有如图提示:
明度调整
默认的颜色判定算法是根据明度进行调整。
其他调整算法#todo#
后续支持设定调整算法。
智能颜色判定#todo#
使用 AI 调整块的颜色
色板和自定义色板
中国传统颜色
纯颜色系列,支持颜色判定
自定义色板
支持保存自定义色板,自定义色板保存在界面所在的设备而不是思源应用所安装的位置(经过仔细考虑之后我这样决定)。
如果你需要到处使用你的色板文件,可以尝试下面的导入导出文件选项。
导入 aco 文件
aco 文件是 Adobe Photoshop 和 Adobe Illustrator 等的颜色色板定义文件,你可以查找相关资料找到他们的位置(软件安装时就自带了一些色板,后缀名是.aco)
点击上面这个面板的文件夹按钮可以打开色板文件。
需要注意,==仅支持 RGB 格式==的色彩文件,例如你可以在这里找到 Material Design 的色板文件,使用导入功能之后就能够看到你的色彩定义了。
这个功能同样可以在这个网站的发布界面进行测试。
例如上面这个就是我下载的色板文件。
更完善的色板文件支持#todo#
这次的实现时间比较赶,之后会实现更加完善的.aco 文件支持。
下载色板
色板在调试完成之后可以下载下来相互交换。
这可能能够让你快点收集到想要的色彩。
下载的色板文件可以用于 photoshop 等软件中(当然你也可以使用它们的色彩资源)。
也可以参考少数派上的这篇文章,使用其他工具来制作色板。
创建自己的色板,适用于 PS/CSP/GIMP/Krita/Pencil2D 等软件 - 少数派 (sspai.com)
图像取色
支持从笔记内的图片提取颜色,可以使用这些图片进行尝试
目前支持的取色算法有:
取色算法
color-thief
使用 color-thief 库进行取色
kMeans-cosineSimilarityWithLightnessFix
带有明度调整的余弦距离聚类,适合需要提取更丰富颜色的情况
kMeans-euclideanDistance
简单 RGB 空间欧几里得距离聚类,适合提取少数集中色块
kMeans-euclideanDistanceHSV
HSV 空间的欧氏距离聚类,适合提取少数集中色块
MMCQ
使用 mmcq 算法,调用 mmcq.js 库实现
添加取色结果到自定义色板
在图片取色窗口的每种算法前都有一个小小的 + 号按钮,点击它可以将颜色添加到你想要的画板(目前只支持批量添加)。
注意色板的背景色,当你编辑时它的标题会有特殊的背景色。
这表示这个色板文件是当前定义的目标。
自定义取色算法#todo#
图片色彩提取部分将会移动到尚在进行中的 TEImageTools 插件中,届时将支持自定义取色算法。
导出取色色卡
取色的色卡可以导出为图片,导出效果如下方示例:
色卡生成器编写
所有的色卡使用 vue 渲染。
默认的色卡生成器位于:data\plugins\TEColors\source\UI\components\imageColorPanel\exportPreviewer\exportPreviewers
目录下。
如果你有编程技能可以帮助作者编写更多好看的生成器。
如果你需要去除色卡下方的水印,也需要编辑这些文件
另外可以在 /data/public/themeEditor/teColors/exportPreviewers/
也可以放置你自己的渲染器文件,需要注意的是它们必须是 vue3 组件。
下面是一个简单的色卡图片生成器组件,你可以将它下载到相应位置进行尝试:
生成器的编写需要一定的前端编程能力,建议如果没有相关经验不要强求,否则会很痛苦而且耽误记笔记
临时上传图片取色
图片色彩分析界面的图片容器可以拖放图片,拖放后将会自动以当前色彩配置进行分析,或者你也可以双击选择图片上传分析。
其他:
为了方便测试,发布界面上同样可以进行编辑修改,但修改结果==不会保存。==
可以在
TEColor 插件 - SiYuan - 思源笔记 v3.0.17 (ccsjhn.com)
进行尝试。
赞助我们
椽承设计正在创作一些简单的技术教程和小工具,以及设计方面内容 | 爱发电 (afdian.net)
欢迎来到这里!
我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。
注册 关于