自定义主题
TinyLayer 允许开发者根据项目的实际情况自定义弹窗的主题样式，只需在 :root 下重新设置相应的样式变量即可。
通用变量
--tinylayer-animation-duration: 280ms;--tinylayer-public-wrapper-radius: 4px;--tinylayer-public-button-radius: 4px;--tinylayer-prompt-input-radius: 4px;--tinylayer-modal-content-padding: 15px;--tinylayer-modal-header-footer-padding: 15px;
颜色变量（浅色模式 / 深色模式）
--tinylayer-theme-color: #1588fc / #0e6bc8;--tinylayer-info-icon-color: #1588fc / #0e6bc8;--tinylayer-success-icon-color: #24d472 / #13b25a;--tinylayer-warning-icon-color: #f8a528 / #e28d0c;--tinylayer-error-icon-color: #f43f26 / #e22a10;--tinylayer-loading-background: rgba(255, 255, 255, .95) / rgba(0, 0, 0, .85);--tinylayer-public-mask-background: rgba(0, 0, 0, .7) / rgba(0, 0, 0, .8);--tinylayer-public-wrapper-background: #fff / #1e1d1d;--tinylayer-public-title-color: #000 / #ededed;--tinylayer-ok-button-color: #fff / #efeaea;--tinylayer-cancel-button-color: #707070 / #c3c3c5;--tinylayer-cancel-button-background: #fff / transparent;--tinylayer-cancel-button-border-color: #d0d0d0 / #5a5a5a;;--tinylayer-alert-confirm-content-color: #2f2f2f / #dcdcdd;--tinylayer-prompt-input-background: #fff / #212221;--tinylayer-prompt-input-border-color: #e0e0e0 / #4f4d4d;--tinylayer-prompt-input-color: #3a3b3b / #c2c3c3;--tinylayer-prompt-error-color: #f43f26 / #e22a10;--tinylayer-prompt-input-tip-color: #6c6c70 / #a7a7a7;--tinylayer-prompt-input-disabled-background: #f1f1f1 / #3e3e3e;--tinylayer-modal-line-color: #6c6c70 / #a7a7a7;--tinylayer-modal-content-color: #2f2f2f / #dcdcdd;--tinylayer-modal-content-loading-background: rgba(255, 255, 255, .95) / rgba(8, 8, 8, .95);
注意：
某些时候，在 :root 下重写上述样式变量可能会出现不生效的情况，此时只需在相应样式后面加上 !important 即可。
深色与浅色模式切换
TinyLayer 可以根据当前操作系统的色彩模式（深色 / 浅色）实时调整弹窗的颜色，但仅支持系统级的色彩模式切换。如果开发者使用了自己设计的基于页面级的色彩切换功能，默认情况下，TinyLayer 是检测不到其变化的。此时需要开发者手动在 <html> 上增加或删除 dark 类，TinyLayer 内部做了特别处理，当 <html class="dark"> 时，将自动调整为深色模式，反之如果没有 dark 类则为浅色模式。