Set correct color scheme

src/App.css

@@ -26,7 +26,7 @@
 }
 
 .App-header {
-  background-color: #282c34;
+  background-color: #f5f5f5;
   min-height: 100vh;
   display: flex;
   flex-direction: column;

src/components/Header/Header.jsx

@@ -12,6 +12,7 @@ import UserAccountMenu from './UserAccountMenu';
 import makeStyles from '@mui/styles/makeStyles';
 import logo from '!file-loader!../../assets/Alt_Linux_Team.svg';
 import githubLogo from '../../assets/Git.png';
+import { invert } from 'lodash';
 
 const useStyles = makeStyles((theme) => ({
   barOpen: {
@@ -29,11 +30,11 @@ const useStyles = makeStyles((theme) => ({
     alignItems: 'center',
     justifyContent: 'center',
     padding: 0,
-    backgroundColor: '#0F2139',
+    backgroundColor: '#f5f5f5',
     height: '100%',
     width: '100%',
     borderBottom: '0.0625rem solid #BDBDBD',
-    boxShadow: '0rem 0.3125rem 0.625rem rgba(131, 131, 131, 0.08)'
+    boxShadow: '0 0.125rem 0.25rem -0.0625rem rgba(3,3,3,0.16)'
   },
   headerContainer: {
     minWidth: '60%'
@@ -43,7 +44,7 @@ const useStyles = makeStyles((theme) => ({
     paddingRight: '3%'
   },
   input: {
-    color: '#464141',
+    color: '#f5f5f5',
     marginLeft: 1,
     width: '90%'
   },
@@ -61,13 +62,19 @@ const useStyles = makeStyles((theme) => ({
     maxWidth: '130px',
     maxHeight: '30px'
   },
+  ghlogo: {
+    maxWidth: '130px',
+    maxHeight: '30px',
+    color: invert
+    // filter: 1
+  },
   headerLinkContainer: {
     [theme.breakpoints.down('md')]: {
       display: 'none'
     }
   },
   link: {
-    color: '#F6F7F9',
+    color: '#000000',
     fontSize: '1rem',
     fontWeight: 600
   },
@@ -169,7 +176,7 @@ function Header({ setSearchCurrentValue = () => {} }) {
           <Grid item container xs={2} md={3} spacing="1.5rem" className={`${classes.gridItem}`}>
             <Grid item className={classes.headerLinkContainer}>
               <a className={classes.link} href="https://github.com/project-zot/zot" target="_blank" rel="noreferrer">
-                <img alt="github repository" src={githubLogo} className={classes.logo} />
+                <img alt="github repository" src={githubLogo} className={classes.ghlogo} />
               </a>
             </Grid>
             {isAuthenticated() && isAuthenticationEnabled() && (

src/components/Header/SearchSuggestion.jsx

@@ -14,7 +14,7 @@ import { HEADER_SEARCH_PAGE_SIZE } from 'utilities/paginationConstants';
 const useStyles = makeStyles(() => ({
   searchContainer: {
     display: 'inline-block',
-    backgroundColor: '#2B3A4E',
+    backgroundColor: '#f5f5f5',
     boxShadow: '0 0.313rem 0.625rem rgba(131, 131, 131, 0.08)',
     borderRadius: '0.625rem',
     minWidth: '100%',
@@ -63,7 +63,7 @@ const useStyles = makeStyles(() => ({
     display: 'none'
   },
   searchIcon: {
-    color: '#52637A',
+    color: '#000000',
     paddingRight: '3%',
     cursor: 'pointer'
   },
@@ -73,7 +73,7 @@ const useStyles = makeStyles(() => ({
     paddingLeft: 10,
     height: '40px',
     fontSize: '1rem',
-    backgroundColor: '#2B3A4E',
+    backgroundColor: '#f5f5f5',
     borderRadius: '0.625rem',
     color: '#8A96A8'
   },
@@ -311,7 +311,7 @@ function SearchSuggestion({ setSearchCurrentValue = () => {} }) {
           <>
             <ListItem
               className={classes.searchItem}
-              style={{ color: '#52637A', fontSize: '1rem', textOverflow: 'ellipsis' }}
+              style={{ color: '#000000', fontSize: '1rem', textOverflow: 'ellipsis' }}
               {...getItemProps({ item: '', index: 0 })}
               spacing={2}
             >
@@ -325,7 +325,7 @@ function SearchSuggestion({ setSearchCurrentValue = () => {} }) {
           <>
             <ListItem
               className={classes.searchItem}
-              style={{ color: '#52637A', fontSize: '1rem', textOverflow: 'ellipsis' }}
+              style={{ color: '#000000', fontSize: '1rem', textOverflow: 'ellipsis' }}
               {...getItemProps({ item: '', index: 0 })}
               spacing={2}
               onClick={() => {}}
@@ -336,7 +336,7 @@ function SearchSuggestion({ setSearchCurrentValue = () => {} }) {
             </ListItem>
             <ListItem
               className={classes.searchItem}
-              style={{ color: '#52637A', fontSize: '1rem', textOverflow: 'ellipsis' }}
+              style={{ color: '#000000', fontSize: '1rem', textOverflow: 'ellipsis' }}
               {...getItemProps({ item: '', index: 0 })}
               spacing={2}
               onClick={() => {}}

src/components/Home/Home.jsx

@@ -38,7 +38,7 @@ const useStyles = makeStyles((theme) => ({
   },
   title: {
     fontWeight: '700',
-    color: '#0F2139',
+    color: '#000000',
     width: '100%',
     display: 'inline',
     fontSize: '2.5rem',
@@ -59,7 +59,7 @@ const useStyles = makeStyles((theme) => ({
   },
   sectionTitle: {
     fontWeight: '700',
-    color: '#0F2139',
+    color: '#000000',
     width: '100%',
     fontSize: '2rem',
     textAlign: 'center',

src/components/Shared/RepoCard.jsx

@@ -152,7 +152,7 @@ const useStyles = makeStyles((theme) => ({
     textOverflow: 'ellipsis',
     maxWidth: '70%',
     fontWeight: '600',
-    color: '#0F2139',
+    color: '#000000',
     lineHeight: '2rem'
   },
   platformChips: {

src/components/Shared/VulnerabilityCard.jsx

@@ -248,7 +248,7 @@ function VulnerabilitiyCard(props) {
           <Typography
             variant="body2"
             align="left"
-            sx={{ color: '#0F2139', fontSize: '1rem', textDecoration: 'underline' }}
+            sx={{ color: '#000000', fontSize: '1rem', textDecoration: 'underline' }}
             component={Link}
             to={cve.reference}
             target="_blank"
@@ -286,7 +286,7 @@ function VulnerabilitiyCard(props) {
             Description
           </Typography>
           <Box sx={{ padding: '0.5rem 0' }}>
-            <Typography variant="body2" align="left" sx={{ color: '#0F2139', fontSize: '1rem' }}>
+            <Typography variant="body2" align="left" sx={{ color: '#000000', fontSize: '1rem' }}>
               {cve.description}
             </Typography>
           </Box>

src/components/Tag/TagDetails.jsx

@@ -90,7 +90,7 @@ const useStyles = makeStyles((theme) => ({
     '&.Mui-selected': {
       backgroundColor: 'rgba(15, 33, 57, 0.05)',
       color: theme.palette.secondary.main,
-      border: '2px solid #0F2139!important'
+      border: '2px solid #000000!important'
     }
   },
   tabContent: {

src/index.js

@@ -12,15 +12,15 @@ const theme = createTheme(
   adaptV4Theme({
     palette: {
       primary: {
-        light: '#757ce8',
+        light: '#f5f5f5',
-        main: '#14191F',
+        main: '#000000',
-        dark: '#002884',
+        dark: '#0e1113',
         contrastText: '#fff'
       },
       secondary: {
-        light: '#ff7961',
+        light: '#f5f5f5',
-        main: '#0F2139',
+        main: '#000000',
-        dark: '#52637A',
+        dark: '#0e1113',
         contrastText: '#000'
       }
     }