自定义：

您可以使用 SCSS 进行主题定制，或者您可以编辑 CSS 变量。

示例：选择一个颜色！

自定义 - 图1

有两种方式可以定制您的 Pico CSS 版本：

覆盖 CSS 变量：

所有 Pico 的样式和颜色都使用 CSS 自定义属性（变量）设置。只需覆盖这些 CSS 变量，即可定制您的 Pico 版本。

  1. /* Teal Light scheme (Default) */
  2. /* Can be forced with data-theme="light" */
  3. [data-theme="light"],
  4. :root:not([data-theme="dark"]) {
  5.   --primary: #00897b;
  6.   --primary-hover: #00796b;
  7.   --primary-focus: rgba(0, 137, 123, 0.125);
  8.   --primary-inverse: #FFF;
  9. }
  11. /* Teal Dark scheme (Auto) */
  12. /* Automatically enabled if user has Dark mode enabled */
  13. @media only screen and (prefers-color-scheme: dark) {
  14.   :root:not([data-theme]) {
  15.     --primary: #00897b;
  16.     --primary-hover: #009688;
  17.     --primary-focus: rgba(0, 137, 123, 0.25);
  18.     --primary-inverse: #FFF;
  19.   }
  20. }
  22. /* Teal Dark scheme (Forced) */
  23. /* Enabled if forced with data-theme="dark" */
  24. [data-theme="dark"] {
  25.   --primary: #00897b;
  26.   --primary-hover: #009688;
  27.   --primary-focus: rgba(0, 137, 123, 0.25);
  28.   --primary-inverse: #FFF;
  29. }
  31. /* Teal (Common styles) */
  32. :root {
  33.   --form-element-active-border-color: var(--primary);
  34.   --form-element-focus-color: var(--primary-focus);
  35.   --switch-color: var(--primary-inverse);
  36.   --switch-checked-background-color: var(--primary);
  37. }

您可以在默认主题中找到所有使用的 CSS 变量，路径为：css/themes/default.css。

导入 Pico SASS 库：

我们建议通过将 SASS 源文件导入到您的项目中来定制 Pico。这样，您可以保持 Pico 的最新状态，而不会发生冲突，因为 Pico 代码和您的自定义代码是分开的。

编译 SASS 文件为 CSS，以获得定制版本的 Pico。

  1. /* Custom Teal version */
  3. // Override default variables
  4. $primary-500: #009688;
  5. $primary-600: #00897b;
  6. $primary-700: #00796b;
  8. // Import Pico
  9. @import "@picocss/pico/scss/pico";

作为替代，您还可以创建一个自定义主题，并将其与您所需的组件一起导入到项目中。

  1. /* Custom version */
  3. // Custom theme
  4. @import "path/themes/custom";
  6. // Import needed components
  7. @import "@picocss/pico/scss/pico/layout/document";
  8. @import "@picocss/pico/scss/pico/layout/sectioning";
  9. …

编译自定义的 SASS 版本允许您创建一个更轻量的版本，只包含对您有用的组件。