RUC-UP versão

rucula-js · May 15, 2024 · 017c138 · 017c138
1 parent a50f4aa
commit 017c138
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 21 deletions.
diff --git a/dist/common/coockie/coockie.d.ts b/dist/common/coockie/coockie.d.ts
@@ -0,0 +1,3 @@
+export declare let cookie: {
+    read: (name: string) => string | null;
+};
diff --git a/dist/rucula.js b/dist/rucula.js
@@ -679,6 +679,21 @@ let managmentObject = (() => {
     };
 })();
 
+let cookie = (() => {
+    return {
+        read: function (name) {
+            var cookies = document.cookie.split('; ');
+            for (var i = 0; i < cookies.length; i++) {
+                var cookie = cookies[i].split('=');
+                if (cookie[0] === name) {
+                    return decodeURIComponent(cookie[1]);
+                }
+            }
+            return null;
+        }
+    };
+})();
+
 let windowBaseDOM = (() => {
     let elementRoot;
     function createWindowBase(id) {
@@ -843,10 +858,20 @@ let windowBaseDOM = (() => {
         });
     }
     function alterTheme() {
+        let rw = document.querySelector('.r-w');
         let actions = document.getElementById(constIdBaseWindow.ALTER_THEME);
+        let theme = cookie.read('theme');
+        if (theme == 'dark') {
+            rw?.classList.add('dark-theme');
+        }
         actions?.addEventListener('click', (e) => {
-            let rw = document.querySelector('.r-w');
             rw?.classList.toggle('dark-theme');
+            if (rw?.classList.contains('dark-theme')) {
+                document.cookie = "theme=dark";
+            }
+            else {
+                document.cookie = "theme=light";
+            }
         });
     }
     return {

diff --git a/dist/style/style.css b/dist/style/style.css
@@ -6,14 +6,25 @@
     --color-grey:#c7c7c7;
     --color-grey-weak:#f2f2f2;
     --color-black:#211e1e;
+
     --bgc-r-facede-action: #fafafa;
+    --bgc-r-w: #f1f1f1;
+    --bgc-frames: #fff;
     --color-icons-action: #211e1e;
     --heigth-r-facede-action: 50px;
+    --color-border-default:#343540;
+    --color-input-focus: #059eea;
+    --color-default: black;
 }
 
 .r-w.dark-theme{
-    --bgc-r-facede-action: #21282d;
+    --bgc-r-facede-action: #101214;
     --color-icons-action: #fafafa;
+    --bgc-r-w: #12171a;
+    --bgc-frames: #0e1a21;
+    --color-border-default: #5f5f5f;
+    --color-input-focus: #04387f;
+    --color-default:#fff;
 }
 
 *{
@@ -42,6 +53,7 @@
     align-items: center;
     justify-content: center;
 }
+
 .r-box-show {
     display: none;
     position: fixed;
@@ -165,7 +177,7 @@ button.r-actions-window{
 .r-i-control{
     border-radius: 6px;
     padding: 5px;
-    border:1px solid var(--color-grey);
+    border:1px solid var(--color-border-default);
     font-size: 1rem;
 }
 
@@ -211,15 +223,10 @@ input.r-i-control[identity][disabled] {
 .r-q-b,
 .r-q-l{
     border-radius: 3px;
-    background-color: var(--color-write);
+    background-color: var(--bgc-frames);
     padding-left: 10px;
 
 }
-.r-q-b.dark-mode,
-.r-q-l.dark-mode {
-    background-color: red;
-}
-
 
 .r-q-b::-webkit-scrollbar-thumb,
 .r-q-l::-webkit-scrollbar-thumb {
@@ -266,14 +273,12 @@ input.r-i-focus-dependency {
 .f-t-line{
     table-layout: fixed;
     border-collapse:collapse;
-    background-color: #fff;
     border-spacing: 0;
 }
 
 .f-t-line thead{
     position: sticky;
     top: 0;
-    background-color: var(--color-write);
 }
 
 .f-t-line th{
@@ -307,17 +312,14 @@ input.r-i-focus-dependency {
     width: 100%;
 }
 
-.r-w{
+.r-w {
     display: flex;
     margin: 0;
     height: 100%;
-    background-color: #f1f1f1;
-}
-.r-w.dark-mode{
-    background-color: #121212;
+    background-color: var(--bgc-r-w);
+    color: var(--color-default);
 }
 
-
 .r-b
 {
     padding: 5px;
@@ -340,6 +342,7 @@ textarea.r-i-control {
     resize: none;
     border:1px solid var(--color-black);
     min-height: 100px;
+    padding-top: 10px;
 }
 
 .r-act{
@@ -531,7 +534,7 @@ form.r-f-items{
     left: 15px;
     top: 11px;
     padding: 0 5px;
-    background: inherit;
+    background: var(--bgc-frames);
     transition: 0.2s ease all;
     -moz-transition: 0.2s ease all;
     -webkit-transition: 0.2s ease all;
@@ -541,14 +544,14 @@ form.r-f-items{
     height: 36px;
     padding: 0 5px;
     background: inherit;
-    color: #323840;
     box-sizing: border-box;
+    color: var(--color-default);
 }
 .did-floating-input:focus-within,
 .did-floating-select:focus-within,
 .r-i-control:focus-within{
-    border-color:var( --color-black);
-    box-shadow: inset 0 0 0 1px var( --color-black);
+    border-color:var(--color-input-focus);
+    box-shadow: inset 0 0 0 1px var(--color-input-focus);
 }
 
 .did-floating-input:focus, .did-floating-select:focus {