mirrors/picocss
1
0
Fork 0
mirror of https://github.com/picocss/pico.git synced 2025-04-22 01:26:13 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions
picocss/docs/customization.html

59 lines
11 KiB
HTML
Raw Normal View History

Docs: Toggle navigation icon default height
2021-11-02 10:49:54 +07:00
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Customization • Pico.css</title><meta name="description" content="You can customize themes with SCSS or, you can edit the CSS variables. All Pico's styles and colors are set with CSS custom properties (variables)."><link rel="shortcut icon" href="https://picocss.com/favicon.ico"><link rel="stylesheet" href="../css/pico.min.css"><link rel="stylesheet" href="css/pico.docs.min.css"><link rel="canonical" href="https://www.picocss.com/docs/customization.html"></head><body><nav class="container-fluid"><ul><li><a href="https://picocss.com" aria-label="Back home"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" height="56px"><path fill="currentColor" d="M633.43 429.23c0 118.38-49.76 184.72-138.87 184.72-53 0-92.04-25.37-108.62-67.32h-2.6v203.12H250V249.7h133.67v64.72h2.28c17.24-43.9 55.3-69.92 107-69.92 90.4 0 140.48 66.02 140.48 184.73zm-136.6 0c0-49.76-22.1-81.96-56.9-81.96s-56.9 32.2-57.24 82.28c.33 50.4 22.1 81.63 57.24 81.63 35.12 0 56.9-31.87 56.9-81.95zM682.5 547.5c0-37.32 30.18-67.5 67.5-67.5s67.5 30.18 67.5 67.5S787.32 615 750 615s-67.5-30.18-67.5-67.5z"/></svg></a></li><li>Documentation</li></ul><ul><li><a href="https://picocss.com#examples" class="secondary">Examples</a></li><li><a href="./" class="secondary">Docs</a></li><li><a href="https://github.com/picocss/pico" class="contrast" aria-label="Pico GitHub repository"><svg aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" height="16px"><path fill="currentColor" d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></a></li></ul></nav><main class="container" id="docs"><aside><nav class="closed-on-mobile"><a href="./" class="secondary" id="toggle-docs-navigation"><svg xmlns="http://www.w3.org/2000/svg" class="expand" fill="currentColor" viewBox="0 0 16 16" height="16px"><title>Expand</title><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zM7.646.146a.5.5 0 0 1 .708 0l2 2a.5.5 0 0 1-.708.708L8.5 1.707V5.5a.5.5 0 0 1-1 0V1.707L6.354 2.854a.5.5 0 1 1-.708-.708l2-2zM8 10a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 0 1 .708-.708L7.5 14.293V10.5A.5.5 0 0 1 8 10z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" class="collapse" fill="currentColor" viewBox="0 0 16 16" height="16px"><title>Collapse</title><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h13a.5.5 0 0 1 0 1h-13A.5.5 0 0 1 1 8zm7-8a.5.5 0 0 1 .5.5v3.793l1.146-1.147a.5.5 0 0 1 .708.708l-2 2a.5.5 0 0 1-.708 0l-2-2a.5.5 0 1 1 .708-.708L7.5 4.293V.5A.5.5 0 0 1 8 0zm-.5 11.707l-1.146 1.147a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0l2 2a.
Docs: separate pages
2021-10-31 21:33:19 +07:00
<b>:root</b> {
<i>--primary</i>: <u class="c600">…</u>;
}
</code></pre></footer></article><p>There are 2 ways to customize your version of Pico.css:</p><h4>Overriding CSS variables</h4><p>All Pico's styles and colors are set with <em>CSS custom properties</em> (variables). Just override the CSS variables to customize your version of Pico.</p><pre><code><em>/* <span class="name"></span>Light scheme (Default) */
/* Can be forced with data-theme="light" */</em>
<b>[data-theme=<u>"light"</u>]</b>,
Docs: code indentation
2021-11-02 10:46:55 +07:00
<b>:root:not([data-theme=<u>"dark"</u>])</b> {
Docs: separate pages
2021-10-31 21:33:19 +07:00
<i>--primary</i>: <u class="c600">…</u>;
<i>--primary-hover</i>: <u class="c700">…</u>;
<i>--primary-focus</i>: <u class="c600-outline-light">…</u>;
<i>--primary-inverse</i>: <u class="inverse">…</u>;
}
<em>/* <span class="name"></span>Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */</em>
<i>@media</i> only <b>screen</b> and <b>(prefers-color-scheme: <u>dark</u>)</b> {
<b>:root:not([data-theme=<u>"light"</u>])</b> {
<i>--primary</i>: <u class="c600">…</u>;
<i>--primary-hover</i>: <u class="c500">…</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">…</u>;
<i>--primary-inverse</i>: <u class="inverse">…</u>;
}
}
<em>/* <span class="name"></span>Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */</em>
<b>[data-theme=<u>"dark"</u>]</b> {
<i>--primary</i>: <u class="c600">…</u>;
<i>--primary-hover</i>: <u class="c500">…</u>;
<i>--primary-focus</i>: <u class="c600-outline-dark">…</u>;
<i>--primary-inverse</i>: <u class="inverse">…</u>;
}
<em>/* <span class="name"></span>(Common styles) */</em>
<b>:root</b> {
<i>--form-element-active-border-color</i>: <u>var</u>(<i>--primary</i>);
<i>--form-element-focus-color</i>: <u>var</u>(<i>--primary-focus</i>);
<i>--switch-color</i>: <u>var</u>(<i>--primary-inverse</i>);
<i>--switch-checked-background-color</i>: <u>var</u>(<i>--primary</i>);
}
</code></pre><p>You can find all the CSS variables used in the default theme here: <a href="https://github.com/picocss/pico/blob/master/css/themes/default.css">css/themes/default.css</a></p><h4>Importing Pico SASS library</h4><p>We recommend customizing Pico by importing SASS source files into your project. This way, you can keep Pico up to date without conflicts since Pico code and your custom code are separated.</p><p>Compile the SASS file to CSS to get a custom version of Pico.</p><pre><code><em>/* Custom <span class="name"> </span>version */</em>
<em>// Override default variables</em>
<i>$primary-500</i>: <u class="c500">…</u>;
<i>$primary-600</i>: <u class="c600">…</u>;
<i>$primary-700</i>: <u class="c700">…</u>;
<em>// Import full Pico source code</em>
<b>@import</b> <u>"path/pico"</u>;</code></pre><p>Alternatively, you can create a custom theme and import it into your project with the components you need.</p><pre><code><em>/* Custom <span class="name"> </span>version */</em>
<em>// Custom theme</em>
<b>@import</b> <u>"path/themes/custom"</u>;
<em>// Import needed components</em>
<b>@import</b> <u>"path/layout/document"</u>;
<b>@import</b> <u>"path/layout/sectioning"</u>;
<em>…</em>
</code></pre><p>Compiling a custom SASS version allows you to create a lighter version with only the components that are useful to you. Example here: <a href="https://github.com/picocss/pico/blob/master/scss/pico.slim.scss">scss/pico.slim.scss</a>.</p></section><footer><hr><p><small>Code licensed <a href="https://github.com/picocss/pico/blob/master/LICENSE.md" class="secondary">MIT</a></small></p></footer></div></main><script src="js/commons.min.js"></script><script src="js/customization.min.js"></script></body></html>
Reference in a new issue Copy permalink