byj66

参考一下我的开源项目 oneimg 文字转成图片工具，核心也是一个可以切换主题模板的系统。

开源地址： https://github.com/byodian/oneimg
预览地址： https://oneimgai.com/

本项目使用 css-in-js 方案(tss-react 工具 https://www.tss-react.dev ）在运行时动态生成样式主题。同时也可以结合参考 Matreial UI （ https://mui.com/material-ui/customization/theming/#createtheme-options-args-theme ）的主题思路。

-------------------------
项目结构：

1. 基础模板
https://github.com/byodian/oneimg/tree/main/src/components/preview/styles

自定义的模板（模板以及主题变量）
https://github.com/byodian/oneimg/tree/main/src/theme


生成模板样式、主题自定义变量的工具函数
https://github.com/byodian/oneimg/blob/main/src/lib/template.ts

- 根据配置生成 CSS 变量：generateThemeVariables
- 生成 CSS 样式：createStyle

3. 在项目中使用动态生成的样式
- CSS 变量作为全局样式使用
https://github.com/byodian/oneimg/blob/main/src/app/page.tsx

<GlobalStyles styles={{ ':root': cssVariables }} />

- 使用 CSS 样式
https://github.com/byodian/oneimg/blob/main/src/components/preview/card.tsx

--------------------

如果你想支持 RSC ，可以考虑 zero runtime 解决方案，像 https://panda-css.com 和 https://vanilla-extract.style

@hanaTsuk1 哈哈，也可以的，开启监听 Stars 事件

@vsitebon 是可以的，也可以把提醒周期做成配置项，根据需求自己定多久提醒一次。

@LeslieLeung 好的，感谢。

想玩一下 cloudflare worker ，Github action 我也试一下

@shzbkzo 厉害。这个项目只是刚开始迭代，这些问题都可以解决。

长期更新个人使用的 dotfiles 配置，做一些开源小工具

https://github.com/byodian
文字转图片： https://github.com/byodian/oneimg

CSS 一个难点在有很多属性要记。多看几本书，MDN 经常看看。
一些参考资料
1. MDN - https://developer.mozilla.org/en-US/docs/Web/CSS
2. CSS roadmap - https://roadmap.sh/r/css-6nqag
3. 深入研究 CSS 的英文博主： https://ishadeed.com/

@nihaojob 文字转图片 https://github.com/byodian/oneimg