edge browser dark mode

blueedgetechno · Nov 12, 2021 · 218c9e9 · 218c9e9 · yashash-pugalia · Nov 12, 2021
1 parent 22e3a76
commit 218c9e9
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 16 deletions.
diff --git a/src/containers/applications/apps/edge.js b/src/containers/applications/apps/edge.js
@@ -115,21 +115,22 @@ export const EdgeMenu = ()=>{
       <div className="windowScreen flex flex-col">
         <div className="overTool flex">
           <Icon src={wnapp.icon} width={14} margin="0 6px"/>
-          <div className="btab bg-gray-100">
+          <div className="btab">
             <div>New Tab</div>
             <Icon fafa="faTimes" click={wnapp.action} payload="close" width={10}/>
           </div>
         </div>
         <div className="restWindow flex-grow flex flex-col">
-          <div
-            className="addressBar w-full bg-gray-100 h-10 flex items-center">
-            <Icon src="left" onClick={action} payload={4} width={14} ui margin="0 8px"/>
-            <Icon src="right" onClick={action} payload={5} width={14} ui margin="0 8px"/>
-            <Icon fafa="faRedo" onClick={action} payload={0} width={14} color="#343434" margin="0 8px"/>
-            <Icon fafa="faHome" onClick={action} payload={1} width={18} color="#343434" margin="0 16px"/>
+          <div className="addressBar w-full h-10 flex items-center">
+            <Icon className="edgenavicon" src="left" onClick={action}
+              payload={4} width={14} ui margin="0 8px"/>
+            <Icon className="edgenavicon" src="right" onClick={action}
+              payload={5} width={14} ui margin="0 8px"/>
+            <Icon fafa="faRedo" onClick={action} payload={0} width={14} margin="0 8px"/>
+            <Icon fafa="faHome" onClick={action} payload={1} width={18} margin="0 16px"/>
             <div className="addCont relative flex items-center">
               <input
-                className="ltShad w-full bg-gray-0 h-6 px-4 text-gray-900"
+                className="w-full h-6 px-4"
                 onKeyDown={action}
                 onChange={typing}
                 data-payload={3}
@@ -141,7 +142,7 @@ export const EdgeMenu = ()=>{
                   payload={2} width={14} margin="0 10px"/>
             </div>
           </div>
-          <div className="w-full bg-gray-100 py-2">
+          <div className="w-full bookbar py-2">
             <div className="flex">
               {Object.keys(iframes).map(mark=>{
                 return(

diff --git a/src/containers/applications/tabs.scss b/src/containers/applications/tabs.scss
@@ -116,16 +116,18 @@
     width: 176px;
     height: 100%;
     margin: 0 4px;
+    background: var(--bg1);
+    color: var(--txt-col);
     border-radius: 4px 4px 0 0;
-    box-shadow: 2px 0 2px rgba(80, 80, 80, 0.2);
+    box-shadow: 2px 0 2px var(--shd);
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 0 8px;
     font-size: 0.72em;
 
     .uicon {
-      color: #505050;
+      color: var(--gray-txt);
     }
   }
 }
@@ -138,14 +140,31 @@
   scroll-behavior: smooth;
 }
 
+.addressBar{
+  background: var(--bg1);
+
+  .uicon{
+    color: var(--med-txt);
+  }
+}
+
 .addCont {
   width: 80%;
 
   input {
     box-sizing: border-box;
+    background: var(--ipbar);
+    color: var(--txt-col);
+    border-radius: 4px;
+    border: solid 1px var(--comp-txt);
   }
 }
 
+.bookbar{
+  background: var(--bg1);
+  color: var(--txt-col);
+}
+
 .cmdcont{
   height: calc(100% - 24px);
 }

diff --git a/src/containers/applications/wnapp.scss b/src/containers/applications/wnapp.scss
@@ -3,8 +3,7 @@
 */
 @font-face {
   font-family: "Spotify";
-  src: url('./apps/assets/spotify.woff2') format("woff2"),
-      url('./apps/assets/spotify.ttf') format("truetype");
+  src: url("./apps/assets/spotify.woff2") format("woff2"), url("./apps/assets/spotify.ttf") format("truetype");
 }
 
 body {
@@ -28,7 +27,22 @@ body[data-theme="dark"] {
 }
 
 .edgeBrowser {
-  background: rgb(231, 234, 236);
+  --bg0: #e7eaec;
+  --bg1: #f7fafc;
+  --ipbar: #fefefe;
+  --shd: rgba(80, 80, 80, 0.2);
+  background: var(--bg0);
+}
+
+body[data-theme="dark"] .edgeBrowser {
+  --bg0: #222228;
+  --ipbar: #222228;
+  --bg1: rgb(45, 45, 51);
+  --shd: rgba(0, 0, 0, 0.3);
+
+  .edgenavicon{
+    filter: invert(1);
+  }
 }
 
 .vscodeWn {
@@ -56,7 +70,6 @@ body[data-theme="dark"] .wnstore {
   --rib-bg: #2f2e30b8;
   --rib2-bg: #2c2f32;
   --det-bg: #282c32;
-
   background: var(--bg-color);
 }
 
@@ -74,7 +87,6 @@ body[data-theme="dark"] .wnstore {
   --bg3: #f9f9f9;
   --err-bg: rgb(255, 255, 255, 0.1);
   --err-txt: #999;
-
   background: var(--bg1);
   color: var(--dark-txt);
   -webkit-backdrop-filter: blur(21px);