complete DARK MODE

Author: GREENRAT-K405

src/component/Header.jsx

@@ -52,7 +52,8 @@ const Header = ({ superState, dispatcher }) => {
                     onClick={() => dispatcher({ type: T.TOGGLE_DARK_MODE })}
                     style={{
                         cursor: 'pointer',
-                        padding: '0 15px',
+                        border: '1px solid #ccc',
+                        padding: '0 8px',
                         display: 'flex',
                         alignItems: 'center',
                         justifyContent: 'center',
@@ -65,7 +66,9 @@ const Header = ({ superState, dispatcher }) => {
                     onKeyDown={(e) => e.key === 'Enter' && dispatcher({ type: T.TOGGLE_DARK_MODE })}
                     aria-label="Toggle dark mode"
                 >
-                    {superState.darkMode ? <FaSun size={20} /> : <FaMoon size={20} />}
+                    {superState.darkMode
+                        ? <FaSun size={20} className="theme-icon" />
+                        : <FaMoon size={20} className="theme-icon" />}
                 </div>
                 <FullScreenButton />
             </div>

src/component/header.css

@@ -144,4 +144,9 @@
 [data-theme='dark'] .rc-switch-checked {
     border: 1px solid #2B8CF7;
     background-color: #2B8CF7;
+}
+
+/* Theme Icon Color */
+.theme-icon {
+    color: black;
 }

src/component/modals/FileEdit.jsx

@@ -116,7 +116,7 @@ const FileEditModal = ({ superState, dispatcher }) => {
                     <Editor
                         height="60vh"
                         language={language}
-                        theme="vs-light"
+                        theme={superState.darkMode ? 'vs-dark' : 'vs-light'}
                         value={codeStuff}
                         onChange={(value) => setCodeStuff(value)}
                         options={{

src/component/modals/contributeDetails.css

@@ -1,43 +1,58 @@
-.contribute-details{
+.contribute-details {
     padding: 20px;
     display: grid;
     grid-template-columns: auto auto;
     gap: 20px;
 }
 
-.contribute-details *{
+.contribute-details * {
     padding: 10px 5px;
     text-align: center;
 }
 
-.contribute-details .expand{
+.contribute-details .expand {
     grid-column: 1 / span 2;
     padding: 0;
 }
 
-.contribute-details .btn{
+.contribute-details .btn {
     width: 100%;
 }
-.contribute-details .btn-secondary{
+
+.contribute-details .btn-secondary {
     align-self: flex-end;
 }
-.contribute-details textarea{
+
+.contribute-details textarea {
     resize: vertical;
     max-height: 200px;
     max-width: 300px;
     text-align: left;
     max-lines: 10;
 }
+
 .Toastify__toast-container {
     /* width: 350px; */
     /* height: 80px; */
     padding: 3px 15px;
     display: inline-block;
-  }
-  
-  .Toastify__toast {
+}
+
+.Toastify__toast {
     /* width: 350px; */
     /* height: 80px; */
     width: fit-content;
     font-size: 16px;
-  }
+}
+
+/* DARK MODE STYLES */
+[data-theme='dark'] .contribute-details input,
+[data-theme='dark'] .contribute-details textarea {
+    background-color: #1a1a1a;
+    border: 1px solid #444;
+    color: #e5e7eb;
+}
+
+[data-theme='dark'] .contribute-details span {
+    color: #e5e7eb;
+}

src/component/modals/graph-comp-details.css

@@ -18,4 +18,8 @@
     color: #f00;
     font-family: monospaceoo;
     padding-bottom: 20px;
+}
+
+[data-theme='dark'] .ReactModalPortal .modal-footer {
+    border-top: 1px solid #333;
 }

src/component/modals/nodeDetails.css

@@ -106,10 +106,27 @@
         grid-template-columns: auto auto;
         width: auto
     }
+
     .nodeform .nodeLabel {
         grid-column: 2 / span 1;
     }
+
     .nodeform .nodeLabelFile {
         grid-column: 2 / span 1;
     }
+}
+
+/* DARK MODE STYLES */
+[data-theme='dark'] .parent-div {
+    background: #1a1a1a;
+}
+
+[data-theme='dark'] .nodeform input {
+    background-color: #1a1a1a;
+    border: 1px solid #444;
+    color: #e5e7eb;
+}
+
+[data-theme='dark'] .nodeform div {
+    color: #e5e7eb;
 }

src/component/modals/optionsModal.css

@@ -1,6 +1,25 @@
 .main-div {
     padding: 30px;
 }
+
 .main-div-comp {
     margin: 20px;
+}
+
+/* DARK MODE STYLES */
+[data-theme='dark'] .main-div input[type="text"],
+[data-theme='dark'] .main-div textarea {
+    background-color: #1a1a1a;
+    border: 1px solid #444;
+    color: #e5e7eb;
+    padding: 5px;
+}
+
+[data-theme='dark'] .main-div input[type="checkbox"] {
+    accent-color: #3b82f6;
+}
+
+[data-theme='dark'] .main-div label,
+[data-theme='dark'] .main-div span {
+    color: #e5e7eb;
 }

src/component/modals/parent-modal.css

@@ -2,7 +2,8 @@
     transition: all 200ms ease-out;
 }
 
-.ReactModalPortal, .ReactModal__Overlay {
+.ReactModalPortal,
+.ReactModal__Overlay {
     z-index: 3
 }
 
@@ -43,8 +44,8 @@
     line-height: 1.5;
 }
 
-.modal-body{
-    max-height: calc( 80vh - 70px);
+.modal-body {
+    max-height: calc(80vh - 70px);
     overflow: auto;
 }
 
@@ -114,7 +115,8 @@
 .ReactModalPortal .Overlay.closing {
     opacity: 0;
 }
-.ReactModal__Overlay.ReactModal__Overlay--after-open.Overlay{
+
+.ReactModal__Overlay.ReactModal__Overlay--after-open.Overlay {
     overflow: auto;
 }
 
@@ -128,4 +130,23 @@
     .ReactModalPortal .Modal {
         min-width: 90%;
     }
+}
+
+/* DARK MODE STYLES */
+[data-theme='dark'] .ReactModalPortal .modal-content {
+    background-color: #262626;
+    border: 1px solid #444;
+    color: #e5e7eb;
+}
+
+[data-theme='dark'] .ReactModalPortal .modal-header {
+    border-bottom: 1px solid #333;
+}
+
+[data-theme='dark'] .ReactModalPortal .modal-header .close {
+    color: #e5e7eb;
+}
+
+[data-theme='dark'] .ReactModalPortal .modal-title {
+    color: #e5e7eb;
 }