Create UI for dark mode

Issue-ID: AIMLFW-143

Change-Id: I3433a1e2fa5a6e4c2c8d41b5fd6b6924c333660c
Signed-off-by: Sohyeon Kim <sooooooohyeon5@naver.com>

diff --git a/src/App.css b/src/App.css
index 51d727b..15dd0a6 100644 (file)
--- a/src/App.css
+++ b/src/App.css
@@ -95,3 +95,66 @@
     transform: rotate(360deg);
   }
 }
+
+body[data-bs-theme='dark'] {
+  background-color: var(--bs-body-bg);
+  color: var(--bs-body-color);
+}
+
+body[data-bs-theme='dark'] .App {
+  background-color: var(--bs-body-bg);
+  color: var(--bs-body-color);
+}
+
+body[data-bs-theme='dark'] .table > thead > tr > th {
+  background-color: var(--bs-table-bg);
+  color: var(--bs-table-color);
+}
+
+body[data-bs-theme='dark'] .table td {
+  background-color: var(--bs-table-bg);
+  border-color: var(--bs-border-color);
+  color: var(--bs-table-color);
+}
+
+body[data-bs-theme='dark'] .status-buttons {
+  color: var(--bs-btn-color);
+  background-color: var(--bs-btn-bg);
+}
+
+body[data-bs-theme='dark'] .App-header {
+  background-color: var(--bs-body-bg);
+}
+
+body[data-bs-theme='dark'] .App-link {
+  color: var(--bs-link-color);
+}
+
+body[data-bs-theme='dark'] .dynamic-button {
+  background-color: var(--bs-btn-bg);
+  color: var(--bs-btn-color);
+}
+
+body[data-bs-theme='dark'] .dynamic-text {
+  color: var(--bs-body-color);
+}
+
+body[data-bs-theme='dark'] .modal-content {
+  background-color: var(--bs-modal-content-bg);
+  color: var(--bs-modal-content-color);
+  border-color: var(--bs-border-color);
+}
+
+body[data-bs-theme='dark'] .modal-header,
+body[data-bs-theme='dark'] .modal-body {
+  background-color: #22272c;
+  border-color: #0e1114;
+}
+
+body[data-bs-theme='dark'] .modal-title {
+  color: var(--bs-modal-title-color);
+}
+
+body[data-bs-theme='dark'] .btn-close {
+  filter: invert(1);
+}

diff --git a/src/components/home/navbar/NavbarComponent.css b/src/components/home/navbar/NavbarComponent.css
index eef5f17..4a85961 100644 (file)
--- a/src/components/home/navbar/NavbarComponent.css
+++ b/src/components/home/navbar/NavbarComponent.css
@@ -26,3 +26,18 @@
 .logo {
   width: 130px;
 }
+
+body[data-bs-theme='light'] .custom-navbar {
+  background-color: rgb(41, 107, 250);
+  color: white;
+}
+
+body[data-bs-theme='dark'] .custom-navbar {
+  background-color: #1a1a1a;
+  color: white;
+}
+
+.navbar-dark .navbar-nav .nav-link,
+.navbar-dark .navbar-brand {
+  color: white;
+}

diff --git a/src/components/home/navbar/NavbarComponent.js b/src/components/home/navbar/NavbarComponent.js
index fe257f0..d09261b 100644 (file)
--- a/src/components/home/navbar/NavbarComponent.js
+++ b/src/components/home/navbar/NavbarComponent.js
@@ -16,12 +16,27 @@
 
 // ==================================================================================
 
-import React from 'react';
-import { Container, Nav, Navbar, NavDropdown } from 'react-bootstrap';
+import React, { useState, useEffect } from 'react';
+import { Container, Nav, Navbar, NavDropdown, Button } from 'react-bootstrap';
 import './NavbarComponent.css';
+
 function NavbarComponent() {
+  const [isDarkMode, setIsDarkMode] = useState(() => {
+    const savedTheme = localStorage.getItem('isDarkMode');
+    return savedTheme === 'true';
+  });
+
+  useEffect(() => {
+    document.body.setAttribute('data-bs-theme', isDarkMode ? 'dark' : 'light');
+    localStorage.setItem('isDarkMode', isDarkMode);
+  }, [isDarkMode]);
+
+  const toggleDarkMode = () => {
+    setIsDarkMode(!isDarkMode);
+  };
+
   return (
-    <Navbar bg='primary' variant='dark' className='nav-bar'>
+    <Navbar className='nav-bar custom-navbar' variant='dark'>
       <Container>
         <Navbar.Brand href='/'>AI/ML Management Dashboard</Navbar.Brand>
         <Nav>
@@ -32,6 +47,9 @@ function NavbarComponent() {
             <NavDropdown.Item href='/TrainingJob/CreateFeatureGroup'>Create Feature Group</NavDropdown.Item>
             <NavDropdown.Item href='/TrainingJob/ListFeatureGroups'>List Feature Group</NavDropdown.Item>
           </NavDropdown>
+          <Button onClick={toggleDarkMode} variant={isDarkMode ? 'dark' : 'primary'}>
+            {isDarkMode ? '🌞' : '🌜'}
+          </Button>
         </Nav>
       </Container>
     </Navbar>