admin/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(UI): Light / dark mode themes and toggle utility added.

Browse Source
This commit is contained in:
teddy
2025-03-05 16:33:32 +00:00
parent 3912506f24
commit bd58bd82ed
6 changed files with 337 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

187
styles/styles.css
View File

@@ -1,29 +1,60 @@
/* Modern CSS reset and variables */
:root {
/* Claude dark blue / grey theme
--text-color: #1a202c;
--primary-color: #2d3748;
--secondary-color: #4a5568;
--accent-color: #4299e1;
--background-color: #f7fafc;
*/
/* Claude dark blue / grey theme */
--text-colour: #1a202c;
--primary-colour: #2d3748;
--secondary-colour: #4a5568;
--accent-colour: #4299e1;
--page-background-colour: #f7fafc;
--text-background-colour: white;
}
:root[data-theme="purple"] {
/* Purple theme
- https://coolors.co/palette/10002b-240046-3c096c-5a189a-7b2cbf-9d4edd-c77dff-e0aaff
--text-color: #10002B; /* very dark * /
--primary-color: #240046; /* medium dark * /
--secondary-color: #3C096C; /* dark * /
--accent-color: #C77DFF; /* light * /
--background-color: #E0AAFF; /* very light * /
*/
--text-colour: #10002B; /* very dark */
--primary-colour: #240046; /* medium dark */
--secondary-colour: #3C096C; /* dark */
--accent-colour: #C77DFF; /* light */
--page-background-colour: #E0AAFF; /* very light */
--text-background-colour: white;
}
:root[data-theme="red"],
:root[data-theme="light"] {
/* Red theme
- https://coolors.co/palette/2b0000-4f0000-740000-980000-b50000-d30000-eb1d1d-f50f0f-ff0000
- https://coolors.co/palette/9c191b-ac1c1e-bd1f21-d02224-dd2c2f-e35053-e66063-ec8385-f1a7a9-f6cacc
*/
--text-color: #2B0000;
--primary-color: #740000;
--secondary-color: #B50000;
--accent-color: #E35053;
--background-color: #F6CACC;
--text-colour: #2B0000;
--primary-colour: #740000;
--secondary-colour: #B50000;
--accent-colour: #E35053;
--page-background-colour: #F6CACC;
--text-background-colour: white;
}
:root[data-theme="dark"] {
/*
--text-colour: #E0E0E0;
--primary-colour: #BB86FC;
--secondary-colour: #03DAC6;
--accent-colour: #FF4081;
--page-background-colour: #121212;
--text-background-colour: black;
*/
/*
--text-colour: #E0E0E0; /* Light * /
--primary-colour: #740000; /* Dark * /
--secondary-colour: #B50000; /* Medium * /
--accent-colour: #FF4081; /* Light-medium * /
--page-background-colour: #121212; /* Dark * /
--text-background-colour: black; /* Black * /
*/
--text-colour: #E0E0E0; /* Light Gray */
--primary-colour: #980000; /* Slightly lighter Dark Red */
--secondary-colour: #D30000; /* Slightly lighter Medium Red */
--accent-colour: #FF4081; /* Pink */
--page-background-colour: #121212; /* Dark Gray */
--text-background-colour: black; /* Dark Red */
}
* {
@@ -35,24 +66,24 @@
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
line-height: 1.6;
color: var(--text-color);
background-color: var(--background-color);
color: var(--text-colour);
background-color: var(--page-background-colour);
}
/* Header styles */
header {
background-color: var(--primary-color);
color: white;
background-color: var(--primary-colour);
color: var(--text-background-colour);
padding: 2rem 1rem;
text-align: center;
}
header h1 {
color: white;
color: var(--text-background-colour);
}
nav {
background-color: var(--secondary-color);
background-color: var(--secondary-colour);
padding: 1rem;
position: sticky;
top: 0;
@@ -67,14 +98,14 @@ nav ul {
}
nav a {
color: white;
color: var(--text-background-colour);
text-decoration: none;
font-weight: 500;
transition: color 0.3s;
}
nav a:hover {
color: var(--accent-color);
color: var(--accent-colour);
}
/* Google Translate styles
@@ -92,6 +123,83 @@ body {
top: 0px !important;
}
/* Toggle light mode / dark mode button */
.theme-switch {
background: none;
border: none;
cursor: pointer;
width: 5vh;
height: 5vh;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
position: relative;
margin-top: auto;
border-radius: 2.5vh;
}
.theme-switch:hover {
background-color: var(--primary-colour);
}
.theme-switch img.theme-icon,
.theme-switch svg.theme-icon {
width: 100%;
height: 100%;
object-fit: contain;
transition: opacity 1s ease, transform 1s ease;
position: absolute;
margin-top: auto;
}
img.theme-icon.dark-mode-icon {
top: 0vh;
left: -0.1vh;
}
svg.theme-icon.light-mode-icon {
width: 4vh;
height: 4vh;
top: 0.55vh;
left: 0.45vh;
}
svg.theme-icon.light-mode-icon .background {
fill: var(--secondary-colour);
}
.theme-switch:hover svg.theme-icon.light-mode-icon .background {
fill: var(--primary-colour);
}
svg.theme-icon.light-mode-icon .sun {
fill: var(--text-colour);
stroke: var(--text-colour);
}
/*
svg.theme-icon {
width: 2vh;
height: 2vh;
}
*/
/* Hide the icon that doesn't match the current theme */
[data-theme="light"] .theme-switch .dark-mode-icon {
opacity: 1;
display: block;
transform: rotate(0deg);
}
[data-theme="light"] .theme-switch .light-mode-icon {
opacity: 0;
display: none;
transform: rotate(90deg);
}
[data-theme="dark"] .theme-switch .dark-mode-icon {
opacity: 0;
display: none;
transform: rotate(-90deg);
}
[data-theme="dark"] .theme-switch .light-mode-icon {
opacity: 1;
display: block;
transform: rotate(0deg);
}
/* Main content styles */
main {
max-width: 1200px;
@@ -104,7 +212,7 @@ section {
}
h1, h2, h3 {
color: var(--primary-color);
color: var(--primary-colour);
margin-bottom: 1rem;
}
@@ -119,7 +227,7 @@ ul, li {
}
.expertise-card {
background: white;
background: var(--text-background-colour);
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -137,7 +245,7 @@ ul, li {
.project-card-gridslot {
}
.project-card {
background: white;
background: var(--text-background-colour);
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -147,14 +255,14 @@ ul, li {
.expertise-card h3,
.project-card h3,
.experience-card h3 {
color: var(--secondary-color);
color: var(--secondary-colour);
}
.button {
display: inline-block;
padding: 0.5rem 1rem;
background-color: var(--accent-color);
color: white;
background-color: var(--accent-colour);
color: var(--text-background-colour);
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s;
@@ -230,7 +338,7 @@ ul, li {
/* Experience */
.experience-card {
background: white;
background: var(--text-background-colour);
padding: 1.5rem;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
@@ -241,7 +349,7 @@ ul, li {
margin-bottom: 0;
}
.experience-date {
color: var(--primary-color);
color: var(--primary-colour);
font-size: 0.9rem;
width: 50%;
min-width: 50%;
@@ -304,15 +412,15 @@ ul, li {
/* Footer styles */
footer {
background-color: var(--primary-color);
color: white;
background-color: var(--primary-colour);
color: var(--text-background-colour);
text-align: center;
padding: 2rem 1rem;
margin-top: 4rem;
}
footer a {
color: white;
color: var(--text-background-colour);
}
/* Responsive design */
@@ -331,6 +439,11 @@ footer a {
/* GitHub Contributions Calendar */
.github-calendar {
width: fit-content;
margin-left: auto;
margin-right: auto;
}
/* Hide broken statistics */
.github-calendar > :not(:first-child) {
display: none;
@@ -346,6 +459,6 @@ footer a {
}
.github-calendar table.js-calendar-graph-table > caption:first-child::before {
content: "GitHub Contributions Calendar";
color: var(--text-color);
color: var(--text-colour);
font-size: 1rem;
}