Skip to content

fix: dark mode color icon #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
huyphan02 merged 2 commits into from
Jan 7, 2026
Merged

fix: dark mode color icon #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
db2f82b
fix: dark mode color icon
huyphan02 Jan 7, 2026
7a84bf0
Trigger Build
Quynh-Nguyen Jan 7, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions src/app/_components/GettingStartedCards.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ export function GettingStartedCards() {

:global(.dark) .getting-started-card:hover {
border-color: #6366f1;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.getting-started-card-image {
Expand Down Expand Up @@ -159,6 +160,12 @@ export function GettingStartedCards() {
white-space: nowrap;
}

:global(.dark) .getting-started-card-label {
background: #1f2937;
color: #818cf8;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.getting-started-card-content {
display: flex;
align-items: center;
Expand All @@ -170,6 +177,7 @@ export function GettingStartedCards() {

:global(.dark) .getting-started-card-content {
border-top-color: #374151;
background-color: #111827;
}

.getting-started-card-icon {
Expand Down Expand Up @@ -199,10 +207,18 @@ export function GettingStartedCards() {
transition: transform 0.2s ease;
}

:global(.dark) .getting-started-card-arrow {
color: #6b7280;
}

.getting-started-card:hover .getting-started-card-arrow {
transform: translateX(4px);
color: #4f46e5;
}

:global(.dark) .getting-started-card:hover .getting-started-card-arrow {
color: #818cf8;
}
`}</style>
</div>
);
Expand Down
25 changes: 20 additions & 5 deletions src/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

/* Custom SpaceDF primary color #4006AA overrides */
.nextra-sidebar-container .nextra-sidebar ul li.active > a {
background-color: #4006AA !important;
background-color: #4006aa !important;
color: white !important;
}

Expand All @@ -21,11 +21,17 @@

/* Override specific classes to use 80% lightness instead of 45% */
.nx-text-primary-600 {
color: hsl(var(--nextra-primary-hue) var(--nextra-primary-saturation) 80% / var(--tw-text-opacity)) !important;
color: hsl(
var(--nextra-primary-hue) var(--nextra-primary-saturation) 80% /
var(--tw-text-opacity)
) !important;
}

html[class~=dark] .dark\:nx-text-primary-600 {
color: hsl(var(--nextra-primary-hue) var(--nextra-primary-saturation) 80% / var(--tw-text-opacity)) !important;
html[class~="dark"] .dark\:nx-text-primary-600 {
color: hsl(
var(--nextra-primary-hue) var(--nextra-primary-saturation) 80% /
var(--tw-text-opacity)
) !important;
}

/* SpaceDF Logo Theme Styles */
Expand All @@ -35,4 +41,13 @@ html[class~=dark] .dark\:nx-text-primary-600 {

.dark .spacedf-logo {
filter: brightness(0) invert(1);
}
}

/* Training Icon Theme Styles */
.svg-icon {
filter: brightness(0);
}

.dark .svg-icon {
filter: brightness(0) invert(1);
}
14 changes: 13 additions & 1 deletion src/content/getting-started/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ Ready to dive in? The getting started guides take you step-by-step through Space
icon={
<img
src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/cloud.png"
className="svg-icon"
style={{width: "24px"}}
alt="Cloud Platform"
/>
Expand All @@ -34,6 +35,7 @@ Ready to dive in? The getting started guides take you step-by-step through Space
icon={
<img
src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/self-service.png"
className="svg-icon"
style={{width: "24px"}}
alt="Self-Hosted Installation"
/>
Expand All @@ -50,6 +52,7 @@ Ready to dive in? The getting started guides take you step-by-step through Space
icon={
<img
src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/tracking-app.png"
className="svg-icon"
style={{width: "24px"}}
alt="Fleet Management System"
/>
Expand All @@ -61,7 +64,8 @@ Ready to dive in? The getting started guides take you step-by-step through Space
icon={
<img
src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/inspiration.png"
style={{width: "24px"}}
className="svg-icon"
style={{height: "24px"}}
alt="Smart Building Solution"
/>
}
Expand All @@ -72,6 +76,7 @@ Ready to dive in? The getting started guides take you step-by-step through Space
icon={
<img
src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/smart-city.png"
className="svg-icon"
style={{width: "24px"}}
alt="Smart City Platform"
/>
Expand All @@ -90,6 +95,7 @@ Choose from our growing ecosystem of supported devices and integration platforms
icon={
<img
src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/internet-of-things.png"
className="svg-icon"
style={{width: "24px"}}
alt="IoT Devices"
/>
Expand All @@ -101,6 +107,7 @@ Choose from our growing ecosystem of supported devices and integration platforms
icon={
<img
src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/platform.png"
className="svg-icon"
style={{width: "24px"}}
alt="Platform Integrations"
/>
Expand Down Expand Up @@ -134,6 +141,7 @@ Choose from our growing ecosystem of supported devices and integration platforms
icon={
<img
src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/tour-guide.png"
className="svg-icon"
style={{width: "24px"}}
alt="Complete Onboarding Guide"
/>
Expand All @@ -150,6 +158,7 @@ Choose from our growing ecosystem of supported devices and integration platforms
icon={
<img
src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/node.png"
className="svg-icon"
style={{width: "24px"}}
alt="Multi-Protocol Support"
/>
Expand All @@ -161,6 +170,7 @@ Choose from our growing ecosystem of supported devices and integration platforms
icon={
<img
src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/location.png"
className="svg-icon"
style={{width: "24px"}}
alt="Real-Time Tracking"
/>
Expand All @@ -172,6 +182,7 @@ Choose from our growing ecosystem of supported devices and integration platforms
icon={
<img
src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/organization-chart.png"
className="svg-icon"
style={{width: "24px"}}
alt="Multi-Tenancy"
/>
Expand All @@ -183,6 +194,7 @@ Choose from our growing ecosystem of supported devices and integration platforms
icon={
<img
src="https://d33et8skld5wvq.cloudfront.net/images/spacedf-docs/dashboard.png"
className="svg-icon"
style={{width: "24px"}}
alt="Customizable Dashboards"
/>
Expand Down
Loading