| In general, the UI can be found in the <code>ui</code> folder of the source code.</p><p>Perform the following steps to build the UI;</p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Install all necessary packages</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token function" style="color:rgb(130, 170, 255)">npm</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">install</span><span class="token plain"> </span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Start the UI for development purposes</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token function" style="color:rgb(130, 170, 255)">npm</span><span class="token plain"> run start</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"># Build the StreamPipes UI</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token function" style="color:rgb(130, 170, 255)">npm</span><span class="token plain"> run build </span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="customizable-assets">Customizable assets<a href="#customizable-assets" class="hash-link" aria-label="Direct link to Customizable assets" title="Direct link to Customizable assets"></a></h2><p>The following assets can be provided in a customized theme:</p><ul><li><strong>Logo</strong> This is the main logo image, which is shown e.g., on the login page.</li><li><strong>Navigation Logo</strong> This is the logo which appears in the top navigation bar after successful login</li><li><strong>Favicon</strong> The favicon is shown in the browser navbar. It is also used as the loading animation in StreamPipes.</li><li><strong>String constants</strong> Customizable strings, e.g., when you want to use another application name than <strong>Apache StreamPipes</strong>.</li><li><strong>Theme variables</strong> An scss file which defines custom colors and layouts.</li></ul><h2 class="anchor anchorWithStickyNavbar_LWe7" id="customize-constants">Customize constants<a href="#customize-constants" class="hash-link" aria-label="Direct link to Customize constants" title="Direct link to Customize constants"></a></h2><p>To customize constants, you can create a custom file <code>app.constants.ts</code> and modify the content based on the template below:</p><div class="language-javascript codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-javascript codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword module" style="font-style:italic">import</span><span class="token plain"> </span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token imports maybe-class-name">Injectable</span><span class="token imports punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"> </span><span class="token keyword module" style="font-style:italic">from</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'@angular/core'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain">@</span><span class="token function maybe-class-name" style="color:rgb(130, 170, 255)">Injectable</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token keyword module" style="font-style:italic">export</span><span class="token plain"> </span><span class="token keyword" style="font-style:italic">class</span><span class="token plain"> </span><span class="token class-name" style="color:rgb(255, 203, 107)">AppConstants</span><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token keyword" style="font-style:italic">public</span><span class="token plain"> readonly </span><span class="token constant" style="color:rgb(130, 170, 255)">APP_NAME</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">"Apache StreamPipes"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token keyword" style="font-style:italic">public</span><span class="token plain"> readonly </span><span class="token constant" style="color:rgb(130, 170, 255)">APP_TITLE</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">'Apache StreamPipes'</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token keyword" style="font-style:italic">public</span><span class="token plain"> readonly </span><span class="token constant" style="color:rgb(130, 170, 255)">EMAIL</span><span class="token plain"> </span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain"> </span><span class="token string" style="color:rgb(195, 232, 141)">"admin@streampipes.apache.org"</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="customize-theme">Customize theme<a href="#customize-theme" class="hash-link" aria-label="Direct link to Customize theme" title="Direct link to Customize theme"></a></h2><p>To customize the theme, we provide a file named <code>variables.scss</code> which can be overridden with default color and style settings.</p><p>See the example below:</p><div class="language-scss codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-scss codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic">/*!</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> * Licensed to the Apache Software Foundation (ASF) under one or more</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> * contributor license agreements. See the NOTICE file distributed with</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> * this work for additional information regarding copyright ownership.</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> * The ASF licenses this file to You under the Apache License, Version 2.0</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> * (the "License"); you may not use this file except in compliance with</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> * the License. You may obtain a copy of the License at</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> *</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> * http://www.apache.org/licenses/LICENSE-2.0</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> *</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> * Unless required by applicable law or agreed to in writing, software</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> * distributed under the License is distributed on an "AS IS" BASIS,</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> * See the License for the specific language governing permissions and</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> * limitations under the License.</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> *</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token comment" style="color:rgb(105, 112, 152);font-style:italic"> */</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token property variable" style="color:rgb(191, 199, 213)">$sp-color-primary</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgb</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">57</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">181</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">74</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token property variable" style="color:rgb(191, 199, 213)">$sp-color-primary-600</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#06c12a</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token property variable" style="color:rgb(191, 199, 213)">$sp-color-accent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#1b1464</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token property variable" style="color:rgb(191, 199, 213)">$sp-color-accent-light-blue</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgb</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">59</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">92</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">149</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token property variable" style="color:rgb(191, 199, 213)">$sp-color-accent-light</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgb</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">156</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">156</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">156</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token property variable" style="color:rgb(191, 199, 213)">$sp-color-accent-light-transparent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgba</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">156</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">156</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">156</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">0.4</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token property variable" style="color:rgb(191, 199, 213)">$sp-color-accent-dark</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#83a3de</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token property variable" style="color:rgb(191, 199, 213)">$sp-color-adapter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#7f007f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token property variable" style="color:rgb(191, 199, 213)">$sp-color-stream</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#ffeb3b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token property variable" style="color:rgb(191, 199, 213)">$sp-color-processor</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#009688</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token property variable" style="color:rgb(191, 199, 213)">$sp-color-sink</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#3f51b5</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token property variable" style="color:rgb(191, 199, 213)">$sp-color-error</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#b71c1c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token selector" style="color:rgb(199, 146, 234)">body </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-data-view</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgb</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">122</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">206</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">227</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-dashboard</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgb</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">76</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">115</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">164</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-adapter</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgb</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">182</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">140</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">97</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-data-source</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#ffeb3b</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-pipeline</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgb</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">102</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">185</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">114</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-measurement</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgb</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">39</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">164</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">155</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-file</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgb</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">163</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">98</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">190</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--button-border-radius</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">5</span><span class="token unit">px</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--iconbar-width</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">35</span><span class="token unit">px</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--navbar-icon-border-radius</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--navbar-icon-padding</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token selector" style="color:rgb(199, 146, 234)">:root </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-loading-bar</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token variable" style="color:rgb(191, 199, 213)">#{$sp-color-accent}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token selector" style="color:rgb(199, 146, 234)">.dark-mode </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-primary</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token variable" style="color:rgb(191, 199, 213)">#{$sp-color-primary}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-accent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token variable" style="color:rgb(191, 199, 213)">#{$sp-color-accent-dark}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-outer</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">var</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">--color-bg-1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-page-container</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">var</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">--color-bg-0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-main-panel-header</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">var</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">--color-bg-0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-main-panel-content</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">var</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">--color-bg-0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-navbar-icon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> inherit</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-navbar-icon-selected</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> inherit</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#121212</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#282828</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#404040</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#424242</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-4</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#5f5f5f</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-dialog</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgb</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">66</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">66</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">66</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-shadow</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#c4c4c4</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-pe</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#404040</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-default-text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgba</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">255</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">255</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">255</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">0.87</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-warn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#b36161</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-tab-border</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#cccccc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-navigation-bg</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">var</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">--color-primary</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-navigation-link-text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">var</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">--color-bg-0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-navigation-text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#121212</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-navigation-selected</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token variable" style="color:rgb(191, 199, 213)">#{$sp-color-primary}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-navigation-hover</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token variable" style="color:rgb(191, 199, 213)">#{$sp-color-primary-600}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-navigation-bg-selected</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">var</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">--color-bg-1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-navigation-divider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token variable" style="color:rgb(191, 199, 213)">#{$sp-color-primary}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--content-box-color</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#404040</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--canvas-color</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">linear-gradient</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">90</span><span class="token unit">deg</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgba</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">50</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">50</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">50</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">0.5</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token unit">%</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token color">transparent</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token unit">%</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">linear-gradient</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color function" style="color:rgb(130, 170, 255)">rgba</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">50</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">50</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">50</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">0.5</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token unit">%</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token color">transparent</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token unit">%</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token selector" style="color:rgb(199, 146, 234)">.light-mode </span><span class="token punctuation" style="color:rgb(199, 146, 234)">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-primary</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token variable" style="color:rgb(191, 199, 213)">#{$sp-color-primary}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-accent</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token variable" style="color:rgb(191, 199, 213)">#{$sp-color-accent}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-outer</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">var</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">--color-bg-1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-page-container</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">var</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">--color-bg-0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-main-panel-header</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">var</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">--color-bg-0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-main-panel-content</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">var</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">--color-bg-0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-navbar-icon</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> inherit</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-navbar-icon-selected</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> inherit</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#ffffff</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#fafafa</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-2</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#f1f1f1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-3</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgb</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">224</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">224</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">224</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-4</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgb</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">212</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">212</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">212</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-bg-dialog</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#ffffff</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-shadow</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#555</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-pe</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#ffffff</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-default-text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#121212</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-warn</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#b71c1c</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-tab-border</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#cccccc</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-navigation-bg</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">var</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">--color-primary</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-navigation-link-text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">var</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">--color-bg-0</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-navigation-text</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token hexcode color">#ffffff</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-navigation-selected</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token variable" style="color:rgb(191, 199, 213)">#{$sp-color-primary}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-navigation-hover</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token variable" style="color:rgb(191, 199, 213)">#{$sp-color-primary-600}</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-navigation-bg-selected</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">var</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">--color-bg-1</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--color-navigation-divider</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">var</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain">--color-primary</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--content-box-color</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgb</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">156</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">156</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">156</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token property">--canvas-color</span><span class="token punctuation" style="color:rgb(199, 146, 234)">:</span><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">linear-gradient</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">90</span><span class="token unit">deg</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token color function" style="color:rgb(130, 170, 255)">rgba</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">208</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">208</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">208</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">0.5</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token unit">%</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token color">transparent</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token unit">%</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"> </span><span class="token function" style="color:rgb(130, 170, 255)">linear-gradient</span><span class="token punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color function" style="color:rgb(130, 170, 255)">rgba</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">(</span><span class="token color number" style="color:rgb(247, 140, 108)">208</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">208</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">208</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token color"> </span><span class="token color number" style="color:rgb(247, 140, 108)">0.5</span><span class="token color punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">10</span><span class="token unit">%</span><span class="token punctuation" style="color:rgb(199, 146, 234)">,</span><span class="token plain"> </span><span class="token color">transparent</span><span class="token plain"> </span><span class="token number" style="color:rgb(247, 140, 108)">0</span><span class="token unit">%</span><span class="token punctuation" style="color:rgb(199, 146, 234)">)</span><span class="token punctuation" style="color:rgb(199, 146, 234)">;</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token punctuation" style="color:rgb(199, 146, 234)">}</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><h2 class="anchor anchorWithStickyNavbar_LWe7" id="run-a-customized-build">Run a customized build<a href="#run-a-customized-build" class="hash-link" aria-label="Direct link to Run a customized build" title="Direct link to Run a customized build"></a></h2><p>To create a new UI build with customized themes, use the following command:</p><div class="language-bash codeBlockContainer_Ckt0 theme-code-block" style="--prism-color:#bfc7d5;--prism-background-color:#292d3e"><div class="codeBlockContent_biex"><pre tabindex="0" class="prism-code language-bash codeBlock_bY9V thin-scrollbar"><code class="codeBlockLines_e6Vv"><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">UI_LOC</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token plain">PATH_TO_FOLDER_WITH_CUSTOM_TEMPLATES </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">THEME_LOC</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token variable" style="color:rgb(191, 199, 213)">$UI_LOC</span><span class="token plain">/_variables.scss </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">LOGO_HEADER_LOC</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token variable" style="color:rgb(191, 199, 213)">$UI_LOC</span><span class="token plain">/img/logo.png </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">FAVICON_LOC</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token variable" style="color:rgb(191, 199, 213)">$UI_LOC</span><span class="token plain">/img/favicon.png </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">LOGO_NAV_LOC</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token variable" style="color:rgb(191, 199, 213)">$UI_LOC</span><span class="token plain">/img/logo-navigation.png </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token assign-left variable" style="color:rgb(191, 199, 213)">CONSTANTS_FILE</span><span class="token operator" style="color:rgb(137, 221, 255)">=</span><span class="token variable" style="color:rgb(191, 199, 213)">$UI_LOC</span><span class="token plain">/app.constants.ts </span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token punctuation" style="color:rgb(199, 146, 234)">\</span><span class="token plain"></span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain"></span><span class="token function" style="color:rgb(130, 170, 255)">npm</span><span class="token plain"> run build</span><br></span><span class="token-line" style="color:#bfc7d5"><span class="token plain" style="display:inline-block"></span><br></span></code></pre><div class="buttonGroup__atx"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_eSgA" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_y97N"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_LjdS"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div><p>First, we create a helper environment variable that links to a folder which includes custom logos, the theme file and constants. |
