Root Zanli
Home
Console
Upload
information
Create File
Create Folder
About
Tools
:
/
home
/
o5t6x7pgljbm
/
public_html
/
intuitionexchange.com
/
docs
/
Filename :
global-colors.html
back
Copy
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Silicon Docs | Global colors</title> <!-- SEO Meta Tags --> <meta name="description" content="Silicon - Multipurpose Technology Bootstrap Template"> <meta name="keywords" content="bootstrap, business, creative agency, mobile app showcase, saas, fintech, finance, online courses, software, medical, conference landing, services, e-commerce, shopping cart, multipurpose, shop, ui kit, marketing, seo, landing, blog, portfolio, html5, css3, javascript, gallery, slider, touch, creative"> <meta name="author" content="Createx Studio"> <!-- Viewport --> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Favicon and Touch Icons --> <link rel="apple-touch-icon" sizes="180x180" href="../assets/favicon/apple-touch-icon.png"> <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon/favicon-16x16.png"> <link rel="manifest" href="../assets/favicon/site.webmanifest"> <link rel="mask-icon" href="../assets/favicon/safari-pinned-tab.svg" color="#6366f1"> <link rel="shortcut icon" href="../assets/favicon/favicon.ico"> <meta name="msapplication-TileColor" content="#080032"> <meta name="msapplication-config" content="../assets/favicon/browserconfig.xml"> <meta name="theme-color" content="#ffffff"> <!-- Vendor Styles --> <link rel="stylesheet" media="screen" href="../assets/vendor/boxicons/css/boxicons.min.css"/> <!-- Main Theme Styles + Bootstrap --> <link rel="stylesheet" media="screen" href="../assets/css/theme.min.css"> <!-- Theme mode --> <script> let mode = window.localStorage.getItem('mode'), root = document.getElementsByTagName('html')[0]; if (mode !== null && mode === 'dark') { root.classList.add('dark-mode'); } else { root.classList.remove('dark-mode'); } </script> </head> <!-- Body --> <body> <!-- Navbar --> <header class="header navbar navbar-expand bg-light border-bottom border-light shadow fixed-top" data-scroll-header> <div class="container-fluid pe-lg-4"> <div class="d-flex align-items-center"> <a href="getting-started.html" class="navbar-brand flex-shrink-0 py-1 py-lg-2"> <img src="../assets/img/logo.svg" width="47" alt="Silicon"> Silicon </a> <span class="badge bg-success">Docs</span> </div> <div class="d-flex align-items-center w-100"> <ul class="navbar-nav d-none d-lg-flex" style="padding-left: 11.75rem;"> <li class="nav-item"> <a href="../index.html" class="nav-link"> <i class="bx bx-desktop opacity-70 fs-lg me-1"></i> Live preview </a> </li> <li class="nav-item"> <a href="../components/typography.html" class="nav-link"> <i class="bx bx-layer opacity-70 fs-lg me-1"></i> UI Kit (Components) </a> </li> </ul> <button type="button" class="navbar-toggler d-block d-lg-none ms-auto me-4" data-bs-toggle="offcanvas" data-bs-target="#docsNav" aria-controls="docsNav" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="form-check form-switch mode-switch pe-lg-1 ms-lg-auto" data-bs-toggle="mode"> <input type="checkbox" class="form-check-input" id="theme-mode"> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Light</label> <label class="form-check-label d-none d-sm-block d-lg-none d-xl-block" for="theme-mode">Dark</label> </div> <a href="https://themes.getbootstrap.com/product/silicon-business-technology-template-ui-kit/" class="btn btn-primary btn-sm fs-sm rounded ms-4 d-none d-lg-inline-flex" target="_blank" rel="noopener"> <i class="bx bx-cart fs-5 lh-1 me-1"></i> Buy now </a> </div> </div> </header> <!-- Main sidebar navigation --> <aside class="dark-mode"> <div id="docsNav" class="offcanvas-lg offcanvas-start d-flex flex-column position-fixed top-0 start-0 vh-100 bg-dark border-end-lg" style="width: 21rem; z-index: 1045;"> <div class="offcanvas-header d-none d-lg-flex justify-content-start"> <a href="getting-started.html" class="navbar-brand text-dark d-none d-lg-flex py-0"> <img src="../assets/img/logo.svg" width="47" alt="Silicon"> Silicon </a> <span class="badge bg-success d-none d-lg-inline-block">Docs</span> </div> <div class="offcanvas-header d-block d-lg-none border-bottom"> <div class="d-flex align-items-center justify-content-between mb-3"> <h5 class="d-lg-none mb-0">Menu</h5> <button type="button" class="btn-close d-lg-none" data-bs-dismiss="offcanvas" data-bs-target="#docsNav"></button> </div> <div class="list-group list-group-flush mx-n4"> <a href="../index.html" class="list-group-item list-group-item-action d-flex align-items-center border-0 py-2 px-4"> <i class="bx bx-desktop fs-lg opacity-80 me-2"></i> Preview </a> <a href="../components/typography.html" class="list-group-item list-group-item-action d-flex align-items-center border-0 py-2 px-4"> <i class="bx bx-layer fs-lg opacity-80 me-2"></i> UI Kit (Components) </a> </div> </div> <div class="offcanvas-body p-4"> <div class="swiper-wrapper"> <div class="swiper-slide h-auto"> <h3 class="fs-lg">Contents</h3> <div class="list-group list-group-flush mx-n4 pb-2"> <a href="getting-started.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Getting started</a> <a href="dev-setup.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Dev environment setup</a> <a href="working-with-gulp.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Working with Gulp</a> <a href="project-structure.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Project structure</a> <a href="install-vendor-plugin.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Installing Vendor plugins with Npm and Gulp</a> <a href="using-scss.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Using Sass (Scss) preprocessor</a> <a href="autoprefixer.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Browser support</a> <a href="theme-mode.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Theme mode</a> <a href="global-colors.html" class="list-group-item list-group-item-action border-0 py-2 px-4 active">Global colors</a> <a href="components.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Components</a> <a href="utilities.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Utility classes</a> <a href="ui-icons.html" class="list-group-item list-group-item-action border-0 py-2 px-4">UI icons (Icon font)</a> <a href="mailchimp.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Mailchimp subscription form</a> <a href="credits.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Sources and credits</a> <a href="changelog.html" class="list-group-item list-group-item-action border-0 py-2 px-4">Changelog</a> </div> </div> </div> <div class="swiper-scrollbar end-0"></div> </div> <div class="offcanvas-header border-top"> <a href="https://themes.getbootstrap.com/product/silicon-business-technology-template-ui-kit/" class="btn btn-primary w-100" target="_blank" rel="noopener"> <i class="bx bx-cart fs-4 lh-1 me-1"></i> Buy now </a> </div> </div> </aside> <!-- Page container --> <main class="docs-container pt-5 pb-3 pb-lg-4"> <div class="container-fluid px-xxl-5 px-lg-4 pt-4 pt-lg-5 pb-4"> <!-- Page title --> <h1 class="ps-lg-2 ps-xxl-0 mt-2 mt-lg-0 pt-4 pb-2 mb-3 mb-xl-4">Global colors</h1> <p class="fw-semibold"><u>There are 2 options to customize Silicon global colors:</u></p> <ol> <li>Customize global colors via Sass variables</li> <li>Customize global colors via CSS Custom properties (variables)</li> </ol> <h2 class="h3 pt-3">Customize global colors via Sass variables</h2> <p>In case you want to create your own color scheme - the fastest and painless way to do that is via Sass variables.</p> <p>Simply copy necessary variable from <code>Silicon/assets/scss/_variables.scss</code> file and paste to <code>Silicon/assets/scss/_user-variables.scss</code>, then compile new <code>theme.min.css</code> file either using <span class="fs-semibold">Visual Studio Code Sass Compiler</span> or <span class="fs-semibold">Gulp</span>. Check <a href="using-scss.html" class="fw-semibold">Using Sass (Scss)</a> and / ors <a href="working-with-gulp.html" class="fw-semibold">Working with Gulp</a> sections for instructions.</p> <p class="mb-4"> <u>Blelow is the screenshot of the part of Sass variables file responsible for global colors:</u> </p> <img class="d-block img-thumbnail mb-5" src="../assets/img/docs/sass-variables.png" alt="Sass Variables"> <h2 class="h3">Customize global colors via CSS custom properties (variables)</h2> <p>Since <span class="fw-semibold">v1.2.0</span> Silicon offers <span class="fw-semibold">CSS Custom Properties (variables)</span> for every component as well as global variables which you can customize. These varibles cover almost every style from sizes, spacing to colors. The easiest way to learn what variables are available for certain component is to highlight the target component with browser inspector. You can also open the component <code>.scss</code> file (inside <code>assets/scss/components</code> folder) with your editor to learn about available CSS variables. Most of the time they are listed at the top level (parent wrapper). Refer to the screenshot from browser inspector below:</p> <img class="d-block img-thumbnail mb-4" src="../assets/img/docs/css-variables.png" alt="CSS Variables"> </div> </main> <!-- Back to top button --> <a href="#top" class="btn-scroll-top" data-scroll> <span class="btn-scroll-top-tooltip text-muted fs-sm me-2">Top</span> <i class="btn-scroll-top-icon bx bx-chevron-up"></i> </a> <!-- Vendor Scripts --> <script src="../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script> <script src="../assets/vendor/smooth-scroll/dist/smooth-scroll.polyfills.min.js"></script> <!-- Main Theme Script --> <script src="../assets/js/theme.min.js"></script> </body> </html>