update

astro/components/pages/Settings.astro

@@ -2,6 +2,7 @@
 import SettingCard from '../../components/settings/card.astro'
 
 import Theme from '../../components/settings/appearance/theme.astro'
+import Color from '../../components/settings/appearance/color.astro'
 
 import '../../styles/settings.scss'
 ---
@@ -12,4 +13,5 @@ import '../../styles/settings.scss'
 
 <SettingCard Title="Appearance">
     <Theme />
+    <Color />
 </SettingCard>

astro/components/settings/appearance/color.astro

@@ -0,0 +1,14 @@
+<div class="option">
+    <div class="option-meta">
+        <h2>Accent Color</h2>
+        <p>Personalize the interface with your favorite choice of color.</p>
+    </div>
+    <div class="color">
+        <button id="green" class="color" onclick="Color('Green');"><span id="green" class="color"></span></button>
+        <button id="orange" class="color" onclick="Color('Orange');"><span id="orange" class="color"></span></button>
+        <button id="red" class="color" onclick="Color('Red');"><span id="red" class="color"></span></button>
+        <button id="blue" class="color" onclick="Color('Blue');"><span id="blue" class="color"></span></button>
+        <button id="pink" class="color" onclick="Color('Pink');"><span id="pink" class="color"></span></button>
+        <button id="gray" class="color" onclick="Color('Gray');"><span id="gray" class="color"></span></button>
+    </div>
+</div>

astro/components/settings/appearance/theme.astro

@@ -4,8 +4,8 @@
         <p>Select how you would like the interface to look. You can either select a theme or choose the auto option to sync with your operating system's theme. </p>
     </div>
     <div class="theme">
-        <button id="auto" class="theme" onclick="Theme('Auto')"><p>Auto</p></button>
-        <button id="light" class="theme" onclick="Theme('Light')"><p>Light</p></button>
-        <button id="dark" class="theme" onclick="Theme('Dark')"><p>Dark</p></button>
+        <button id="auto" class="theme" onclick="Theme('Auto');"><p>Auto</p></button>
+        <button id="light" class="theme" onclick="Theme('Light');"><p>Light</p></button>
+        <button id="dark" class="theme" onclick="Theme('Dark');"><p>Dark</p></button>
     </div>
 </div>

astro/layouts/App.astro

@@ -15,6 +15,7 @@ import '../styles/index.scss'
 import '../styles/notification.scss'
 import '../styles/os.scss'
 ---
+<script src="./scripts/color.js" crossorigin="anonymous"></script>
 <script src="./scripts/navigation.js" crossorigin="anonymous"></script>
 <script src="./scripts/theme.js" crossorigin="anonymous"></script>
 <script src="./scripts/toggle.js" crossorigin="anonymous"></script>

astro/sidebar.ts

@@ -4,7 +4,10 @@ export const SIDEBAR = [{
 }]
 
 // Sidebar Header
-export const SIDEBARHEADER = []
+export const SIDEBARHEADER = [{
+    toggle: true,
+    search: true
+}]
 
 /// Top tabs of your sidbears
 export const SIDEBARTOP = [

astro/styles/index.scss

@@ -15,7 +15,7 @@
 // on Linux, tested on GNOME 43 and KDE 2.27.
 // The "Auto" option is disabled for Linux.
 
-html.theme-auto { // Auto
+[theme="auto"] { // Auto
     @media (prefers-color-scheme: light) {
         --SidebarBackground: rgb(239 240 241 / 75%);
         --ContentBackground: #EFF0F1;
@@ -39,7 +39,7 @@ html.theme-auto { // Auto
     }
 }
 
-html.theme-light {  // Light
+[theme="light"] {  // Light
     --SidebarBackground: rgb(239 240 241 / 75%);
     --ContentBackground: #EFF0F1;
 
@@ -50,7 +50,7 @@ html.theme-light {  // Light
     --WebViewControlBackground: #EFF0F1;
 }
 
-html.theme-dark { // Dark
+[theme="dark"] { // Dark
     --SidebarBackground: rgba(35, 35, 35, 0.75);
     --ContentBackground: #232323;
 
@@ -132,14 +132,21 @@ body {
         }
         .sidebar-header-right {
             margin-inline-start: auto;
+            display: grid;
+            grid-auto-flow: column;
             button {
                 border-radius: 6px;
                 border: none;
                 fill: white;
-                padding: 8px 8px 6px 8px;
+                color: white;
+                padding: 8px;
                 background: transparent;
                 font-size: 16px;
                 cursor: pointer;
+                margin-block-end: auto;
+                width: 32px;
+                height: 32px;
+                margin-left: 2px;
             }
             button:hover {
                 background: rgb(255 255 255 / 10%);
@@ -172,6 +179,15 @@ body {
         background: var(--TabActiveBackground);
         color: var(--TabActiveText);
     }
+    li#quick-command {
+        background: rgb(170 170 170 / 20%);
+        border: 1px rgb(170 170 170 / 20%) solid;
+        padding: 8px 0px;
+        box-sizing: border-box;
+        margin-bottom: 24px;
+        border-radius: 50px;
+        font-size: 14px;
+    }
 }
 
 // Content
@@ -233,24 +249,25 @@ body {
     display: none;
     grid-auto-flow: column;
     position: absolute;
-    right: 26px;
-    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, var(--TabActiveBackground) 5%, var(--TabActiveBackground) 100%);
+    right: 22px;
+    background: #51909a;
+    padding: 3px;
+    border-radius: 6px;
     button {
         aspect-ratio: 1;
         height: 32px;
         width: 32px;
         color: var(--WebviewControlsColor);
         fill: var(--WebviewControlsColor);
-        background: var(--WebViewControlBackground);
         border: none;
         border-radius: 6px;
-        margin-left: 6px;
+        background: transparent;
         svg {
             margin: 0px;
             font-size: 12px;
         }
     }
     button:hover {
-        background: var(--WebViewControlBackground);
+        background: #70aeb8;
     }
 }

astro/styles/settings.scss

@@ -96,3 +96,37 @@
 button#auto {background-image: url(/public/images/settings/theme/Auto.png)}
 button#light {background-image: url(/public/images/settings/theme/Light.png)}
 button#dark {background-image: url(/public/images/settings/theme/Dark.png)}
+
+// Color
+.color {
+  button {
+    background: #181818;
+    border: 1px rgb(255 255 255 / 10%) solid;
+    color: white;
+    border-radius: 50px;
+    aspect-ratio: 1;
+    width: 50px;
+    cursor: pointer;
+    margin-right: 6px;
+    transition: 0.3s border;
+  }
+  button:hover {
+    border: 1px white solid;
+    transition: 0.3s border;
+  }
+  .color-active::before {
+    content: "";
+    background: var(--TabActiveBackground);
+    width: 20px;
+    position: absolute;
+    margin: 6px 0px 0px 6px;
+    border-radius: 50px;
+    aspect-ratio: 1;
+  }
+  #green {background: #31cca9}
+  #orange {background: #f37329}
+  #red {background: #ee2a34}
+  #blue {background: #3689e6}
+  #pink {background: #de3e80}
+  #gray {background: #333333}
+}

electron/mainwindow.js

@@ -23,7 +23,7 @@ module.exports = {
             icon: global.AppIcon, // Found in ./platform.js
             vibrancy: 'sidebar',
             transparent: true,
-            trafficLightPosition: { x: 25, y: 25 }, // Position of Traffic Light buttons on macOS
+            trafficLightPosition: { x: 25, y: 28 }, // Position of Traffic Light buttons on macOS
             titleBarOverlay: { // Background and Height of Windows titlebar buttons
                 color: '#232323', // Background
                 symbolColor: 'white', // Icon