Change darkmode theme

chrultrabook · Jul 9, 2024 · cdded27 · cdded27
1 parent 39c7653
commit cdded27
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 19 deletions.
diff --git a/src/.vuepress/config.js b/src/.vuepress/config.js
@@ -44,7 +44,7 @@ export default {
         link: '/docs/firmware/',
       },
       {
-        text: 'Join the Community!',
+        text: 'Questions?',
         link: 'https://forum.chrultrabook.com/'
       }
     ],

diff --git a/src/.vuepress/styles/index.scss b/src/.vuepress/styles/index.scss
@@ -24,40 +24,43 @@
   --c-brand: #3D50F5;
   --c-brand-light: #4e5ff8;
   --c-tip: #45d48c;
-  --c-nav: #F6F7F9;
   --c-header: #000;
-  --c-text: #353841;
+  --c-text: #1b1d21;
+  --c-tip-bg: rgb(69, 212, 140, 0.4);
+  --c-text-accent:#3D50F5;
+  --border: #EAECEF;
 }
 
 
 html.dark {
-  --c-brand: #B3C7FF; //changes accent color
+  --c-brand: rgba(129, 129, 215, 0.765); //changes accent color
+  --c-border: #25262c; //track color
   --c-brand-light: #778bc2; //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;
 }
-.sidebar::-webkit-scrollbar {
-  width: 0%;
-  height: 0%;
+
+::-webkit-scrollbar
+{
+  width: 0;
+  height: 0;
 }
-.navbar{
-  background-color: var(--c-nav);
-  border: none;
+
+.sidebar::-webkit-scrollbar
+{
+  background-color: red;
 }
+
 .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 +87,12 @@ 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;
+}
diff --git a/supported-devices/template.md b/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"></p>
 
 <div class="deviceTable">
 ${{TABLE}}