<?xml version="1.0" encoding="UTF-8"?>        <rss version="2.0"
             xmlns:atom="http://www.w3.org/2005/Atom"
             xmlns:dc="http://purl.org/dc/elements/1.1/"
             xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
             xmlns:admin="http://webns.net/mvcb/"
             xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
             xmlns:content="http://purl.org/rss/1.0/modules/content/">
        <channel>
            <title>
									OPNSense - How to modify the colors of a theme - Miscellaneous Software				            </title>
            <link>https://www.tweaking4all.com/forum/miscellaneous-software/opnsense-how-to-modify-the-colors-of-a-theme/</link>
            <description>Tweaking4All.com Discussion Board</description>
            <language>en-US</language>
            <lastBuildDate>Tue, 21 Jul 2026 01:18:37 +0000</lastBuildDate>
            <generator>wpForo</generator>
            <ttl>60</ttl>
							                    <item>
                        <title>RE: OPNSense - How to modify the colors of a theme</title>
                        <link>https://www.tweaking4all.com/forum/miscellaneous-software/opnsense-how-to-modify-the-colors-of-a-theme/#post-4043</link>
                        <pubDate>Sun, 20 Mar 2022 12:06:33 +0000</pubDate>
                        <description><![CDATA[Note: to access files (copy to your PC or Mac for example): enable SSH and use either SFTP or a SSHFS utility.Forklift for MacOS worked great with SFTP. Had to first login with SSH tough to ...]]></description>
                        <content:encoded><![CDATA[<p>Note: to access files (copy to your PC or Mac for example): enable SSH and use either SFTP or a SSHFS utility.<br />Forklift for MacOS worked great with SFTP. Had to first login with SSH tough to get the fingerprint.</p>]]></content:encoded>
						                            <category domain="https://www.tweaking4all.com/forum/miscellaneous-software/">Miscellaneous Software</category>                        <dc:creator>Hans</dc:creator>
                        <guid isPermaLink="true">https://www.tweaking4all.com/forum/miscellaneous-software/opnsense-how-to-modify-the-colors-of-a-theme/#post-4043</guid>
                    </item>
				                    <item>
                        <title>RE: OPNSense - How to modify the colors of a theme</title>
                        <link>https://www.tweaking4all.com/forum/miscellaneous-software/opnsense-how-to-modify-the-colors-of-a-theme/#post-3508</link>
                        <pubDate>Thu, 20 May 2021 16:06:51 +0000</pubDate>
                        <description><![CDATA[Tips:
Increase height of the &quot;CPU usage&quot; graph in the dashboard:
div#system_information_widget_chart_cpu_usage svg {
    height: 140px !important;
}
 
Change the color or stroke width ...]]></description>
                        <content:encoded><![CDATA[<p>Tips:</p>
<p><strong>Increase height of the "CPU usage" graph in the dashboard:</strong></p>
<pre contenteditable="false">div#system_information_widget_chart_cpu_usage svg {
    height: 140px !important;
}</pre>
<p> </p>
<p><strong>Change the color or stroke width of the CPU usage line in that graph:</strong></p>
<pre contenteditable="false">g.nv-group.nv-series-0 {
    fill: orange !important;
    stroke: orange !important;
    stroke-width: 2.5px !important;
}</pre>
<p> </p>
<p><strong>Increase height of "Traffic Graph" graphs in the Dashboard:</strong></p>
<pre contenteditable="false">#traffic_graphs-container .chart-container {
    height: 268px;
}</pre>
<p> </p>]]></content:encoded>
						                            <category domain="https://www.tweaking4all.com/forum/miscellaneous-software/">Miscellaneous Software</category>                        <dc:creator>Hans</dc:creator>
                        <guid isPermaLink="true">https://www.tweaking4all.com/forum/miscellaneous-software/opnsense-how-to-modify-the-colors-of-a-theme/#post-3508</guid>
                    </item>
				                    <item>
                        <title>OPNSense - How to modify the colors of a theme</title>
                        <link>https://www.tweaking4all.com/forum/miscellaneous-software/opnsense-how-to-modify-the-colors-of-a-theme/#post-3425</link>
                        <pubDate>Mon, 03 May 2021 10:26:21 +0000</pubDate>
                        <description><![CDATA[Just a quick tip in case you&#039;re using OPNSense as your firewall application.
I&#039;ve switched the theme of mine to dark theme, but there were a few colors I didn&#039;t like, so I wanted to edit th...]]></description>
                        <content:encoded><![CDATA[<p>Just a quick tip in case you're using <a href="https://opnsense.org" target="true">OPNSense</a> as your firewall application.</p>
<p>I've switched the theme of mine to dark theme, but there were a few colors I didn't like, so I wanted to edit the CSS file to adjust those.<br />I've used the Vicuna theme as my base, but this works for any theme.</p>
<p>To install a different theme, in this case the Vicuna theme (os-theme-vicuna) go to <strong>System</strong> - <strong>Firmware</strong> - <strong>Plugins</strong> and locate "<strong>os-theme-vicuna</strong>" and install it.<br />After installing the new theme, go to <strong>System</strong> - <strong>Settings</strong> - <strong>General</strong> and set the theme to "<strong>vicuna</strong>" and click <strong>Save</strong>. You may have to refresh the page to see the new theme.</p>
<p>Next we're going to use SSH to edit our files, to do so we need to enable SSH access. I do this only temporary while working on the CSS file. When done editing I disable SSH again.<br />Go to <strong>System</strong> - <strong>Settings</strong> - <strong>Administration</strong> and scroll to <strong>Secure Shell Server</strong> and check <strong>Enable Secure Shell </strong>and scroll down and click <strong>Save</strong>.</p>
<p>You can now connect to you firewall with SSH, so lets do just that: connect to OPNSense with SSH.</p>
<p>On MacOS/Linux (change the IP address to the one of your server):</p>
<pre contenteditable="false">ssh root@192.168.1.1</pre>
<p> </p>
<p>Your password will be asked and a menu will appear after successful login - select option <strong>8 </strong>(Shell).  </p>
<p>Next we want to make a copy of an existing theme, for example the Vicuna theme to "mytheme".<br />I intentionally work with a copy, just in case I screw up, and to easier identify the them I'm tinkering with.</p>
<pre contenteditable="false">cd /usr/local/opnsense/www/themes/
cp -r vicuna mytheme</pre>
<p> </p>
<p>In the OPNSense web interface, you can now see your "<strong>mytheme</strong>" listed (may need to refresh the page: <strong>System</strong> - <strong>Settings</strong> - <strong>General</strong>).</p>
<p>I prefer using nano as my text editor, which can be installed like so (<a href="https://docs.opnsense.org/manual/software_included.html#packages-pkg" target="true">source</a>):</p>
<pre contenteditable="false">pkg install nano</pre>
<p> </p>
<p>Next, go to the directory in your theme where you can find the main.css file which holds most of the theme colors and such.</p>
<pre contenteditable="false">cd /usr/local/opnsense/www/themes/mytheme/build/css
nano main.css</pre>
<p> </p>
<p>Feel free to edit what ever you want. 😊 <br />When testing, do not forget that your browser may be caching the CSS, so a forced refresh may be needed to reflect the changes.<br />Also note that the colors for the graphs are not controlled (yet) by the theme - so you cannot change these here.</p>
<p>Do no forget: disable SSH access when done 😉 </p>]]></content:encoded>
						                            <category domain="https://www.tweaking4all.com/forum/miscellaneous-software/">Miscellaneous Software</category>                        <dc:creator>Hans</dc:creator>
                        <guid isPermaLink="true">https://www.tweaking4all.com/forum/miscellaneous-software/opnsense-how-to-modify-the-colors-of-a-theme/#post-3425</guid>
                    </item>
							        </channel>
        </rss>
		