thePR0M3TH3AN/seedPass
1
0
Fork 0
mirror of https://github.com/PR0M3TH3AN/SeedPass.git synced 2025-09-09 15:58:48 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #669 from PR0M3TH3AN/codex/add-dark-mode-ui-styling

Browse Source 
Add simple dark mode styling
This commit is contained in:
thePR0M3TH3AN
2025-07-22 22:34:50 -04:00
committed by GitHub
parent f1c24fb2ca 93587a7502
commit 08f496e1e6
2 changed files with 76 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
landing/index.html
View File

@@ -7,7 +7,8 @@
<title>SeedPass - Secure Password Manager</title> <title>SeedPass - Secure Password Manager</title>
<!-- Stylesheets --> <!-- Stylesheets -->
<link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="./style.css">
<!-- Relative path to style.css --> <link rel="stylesheet" href="./simple-dark.css">
<!-- Relative path to style sheets -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
<!-- Font Awesome for Icons --> <!-- Font Awesome for Icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer"/> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" crossorigin="anonymous" referrerpolicy="no-referrer"/>

73
landing/simple-dark.css Normal file
View File

@@ -0,0 +1,73 @@
:root {
--bg-light: #ffffff;
--bg-dark: #121212;
--text-light: #000000;
--text-dark: #e0e0e0;
--accent: #e94a39;
}
body {
background-color: var(--bg-light);
color: var(--text-light);
font-family: 'Roboto', sans-serif;
line-height: 1.6;
margin: 0;
transition: background-color 0.3s, color 0.3s;
}
body.dark-mode {
background-color: var(--bg-dark);
color: var(--text-dark);
}
header,
.navbar,
footer {
background-color: var(--bg-dark);
color: var(--text-dark);
}
body:not(.dark-mode) header,
body:not(.dark-mode) .navbar,
body:not(.dark-mode) footer {
background-color: var(--bg-light);
color: var(--text-light);
}
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0.5rem;
}
.nav-links {
list-style: none;
display: flex;
gap: 1rem;
margin: 0;
padding: 0;
}
.nav-links a {
color: inherit;
text-decoration: none;
}
section {
padding: 2rem 0;
}
.container {
width: 90%;
max-width: 900px;
margin: auto;
}
.cta-button {
background-color: var(--accent);
color: #fff;
padding: 0.75rem 1.25rem;
border-radius: 4px;
text-decoration: none;
}