Update Visuals

-Make Dark Mode Darker
-Add A Placeholder To The Search Bar In `Supported Devices`
-Match Search Bar Styling to Nav Search Bar in `Supported Devices`
-Make Danger Tip Have Better Contrast
-Make Nav Items Larger for better Accessibility
-Change Code Snippet Colors for better contrast

src/.vuepress/styles/index.scss

@@ -18,46 +18,50 @@
 :root {
   scroll-behavior: smooth;
   --back-to-top-z-index: 5;
-  --back-to-top-color: #3056d5;
-  --back-to-top-color-hover: #3056d5;
 
-  --c-brand: #3D50F5;
-  --c-brand-light: #4e5ff8;
-  --c-tip: #45d48c;
-  --c-nav: #F6F7F9;
+  --c-brand: #8e70e0;
+  --c-brand-light: #273ae7;
   --c-header: #000;
-  --c-text: #353841;
+  --c-text: #1b1d21;
+  --c-tip: #45d48c;
+  --c-tip-bg: rgba(0, 255, 128, 0.317);
+
+  --c-text-accent:#5e54e7; //link colors
+  --border: #EAECEF;
+
+  --c-bg-light:#cad8ff; //code snips
 }
 
 
 html.dark {
-  --c-brand: #B3C7FF; //changes accent color
-  --c-brand-light: #778bc2; //get started button hover
+  --c-brand: rgb(158, 158, 216); //changes accent color
+  --c-border: #25262c; //track color
+  --c-brand-light: #ccd5ee; //get started button hover
   --c-tip: #30d56f; //tip bubble color
   --c-bg:  #17181C;//dark mode background
-  --c-nav:#23262F;
-  --c-header: #fff;
-  --c-text: #BCC0C8;
+  --c-text-accent: #67D6ED; //accent in nav
+  --c-text: #e2e2e2; //text for everything including nav
+  --c-tip-bg: rgb(48, 213, 111, 0.1);
+  --border: #25262C;
+  --c-danger-bg: #51010985;
 }
-.sidebar::-webkit-scrollbar {
-  width: 0%;
-  height: 0%;
+
+::-webkit-scrollbar
+{
+  width: 0;
+  height: 0;
 }
-.navbar{
-  background-color: var(--c-nav);
-  border: none;
+.navbar-item
+{
+  font-size: 1rem;
 }
+
 .sidebar{
-  background-color: var(--c-nav);
   font-size: 14px;
   border: none;
   margin-top: 1px;
 }
 
-.header-anchor{
-  color: var(--c-header);
-}
-
 .header-anchor p{
   color: var(--c-text);
 }
@@ -84,3 +88,13 @@ html.dark {
 div.theme-default-content:not(.custom), footer.page-meta:not(.custom), nav.page-nav:not(.custom) {
   max-width: 1800px;
 }
+
+.deviceSearch
+{
+  all: unset;
+  background-color: var(--c-bg);
+  border-radius: 10px;
+  border: var(--border) solid 1px;
+  padding-left: 10px;
+  width: 18rem;
+}

supported-devices/template.md

@@ -40,7 +40,7 @@ If you're on a smaller screen, scroll sideways to see whole table.
 :::
 
 <AddScript script-url="../../supported-devices.js"/>
-<p>Search: <input type="text" class="deviceSearch"></p>
+<p><input type="text" class="deviceSearch" placeholder="Enter Your Boardname Or Device Name"></p>
 
 <div class="deviceTable">
 ${{TABLE}}