Stretchly 用 HTML 定制休息提醒界面三步改完一次学会【免费下载链接】stretchlyThe break time reminder app项目地址: https://gitcode.com/gh_mirrors/st/stretchly每次 Stretchly 弹出休息提醒看到的都是同一套深色背景和一行字。作为一款支持 HTML 自定义的开源休息提醒工具Stretchly 的每个界面其实都是普通的 HTML 页面用 HTML 定制加少量 CSS 就能换文案、换配色甚至让界面跟着剩余时间动。这篇带你从文件位置改到效果验证一次走完。默认的休息提醒页太单调其实可以直接改如果每次弹出的提醒页文案都让你觉得套路化或者团队想让休息界面统一成品牌色先理解一点Stretchly 不用模板引擎生成界面。微休息、长休息、设置各对应一个独立加载的 HTML 页面配套的渲染脚本负责在休息开始时填入文案、剩余时间和按钮状态。你熟悉的打开文件、改完看效果的前端流程在这里直接适用。改之前先分清三类文件文件用途app/microbreak.html微休息页20 秒短暂休息app/break.html长休息页5 分钟完整休息app/preferences.html设置页app/css/break.css休息界面主样式app/css/commons.css各页面共用样式app/css/color-scheme.css深浅主题 CSS 变量实操一微休息页的文案只动一处打开 app/microbreak.html文案区就是这一行div classmicrobreak-idea dirauto/div具体文案由渲染脚本在休息开始时写入这个容器所以 HTML 里不需要硬编码文本也不建议硬编码。想加一句固定的提示在容器后面补一个元素即可p classmy-hint站起来伸展一下手臂/p再到 app/css/break.css 里给 .my-hint 补几行字号和定位规则。另外休息文案本身支持内嵌链接和本地图片渲染脚本会自动处理这两类内容写提示语时可以放心用。实操二休息界面换肤一行 CSS 就够 休息界面整体字号在 app/css/break.css 中定义例如微休息文案的字号是 30px。加一条优先级更高的覆盖规则整页视觉就变了.breaks :nth-child(1) .microbreak-idea { font-size: 36px; }配色则建议换到变量层面color-scheme.css 里浅色和深色两套媒体查询各定义了一组 --main-color、--main-bg-color 等变量。改变量比到处改具体色值省事两种主题还能保持一致。实操三让界面跟随剩余时间动微休息页自带两个动态元素progress 进度条和剩余时间文本 #progress-time渲染脚本每 100 毫秒刷新一次进度值。想让自己的元素跟着走两条路都行给 progress 元素加 transition让进度变化带缓动或者在脚本里读取 progress.value换算后驱动一个自定义的进度环。注意这两个元素带 aria-hidden 属性不参与读屏器朗读替换它们时要为读屏用户保留等价的文字信息。改完休息提醒界面过三道关多语言这一关界面文案走 />最小上手清单获取源码git clone https://gitcode.com/gh_mirrors/st/stretchly通读 app/microbreak.html 与 app/break.html熟悉容器结构样式只动 break.css 与 color-scheme.css 的变量不重复定义至少验证一种从右到左的语言和深浅两套主题改完重启应用确认效果想继续深入可以读一下微休息对应的渲染脚本看文案注入和进度更新的具体实现这就覆盖了休息提醒界面 HTML 定制的完整路径。【免费下载链接】stretchlyThe break time reminder app项目地址: https://gitcode.com/gh_mirrors/st/stretchly创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考