jeffrey/wwwfiberdirekt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: dark mode across all blocks, header, posts, 404

Browse Source
This commit is contained in:
Jeffrey 2026-02-20 08:58:52 +01:00
parent 0bf56a1388
commit de4b1a5d81
3 changed files with 21 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/(frontend)/globals.css
View File

@ -726,11 +726,23 @@ html:not([data-theme]) {
─────────────────────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
/* Prevent the browser from applying its own dark mode color transforms to buttons */
.fd-btn-primary,
.fd-btn-primary-dark,
.fd-btn-secondary,
.fd-btn-secondary-dark,
.fd-btn-navy,
.fd-btn-mint {
color-scheme: light;
}
/* fd-btn-primary: hover must not go navy-on-navy (sections are now dark) */
.fd-btn-primary:hover {
background-color: #ffffff;
color: var(--color-fd-navy);
}
/* fd-btn-secondary: navy text/border is invisible on dark sections */
.fd-btn-secondary {
color: #ffffff;
border-color: #ffffff;

76
src/app/(frontend)/not-found-dark.tsx
View File

File diff suppressed because one or more lines are too long

18
src/app/(frontend)/not-found.tsx
View File

@ -2,7 +2,6 @@ import React from 'react'
import type { Metadata } from 'next'
import { FDButton } from '@/components/FDButton'
export const metadata: Metadata = {
title: '404 – Sidan hittades inte | Fiber Direkt',
description: 'Sidan du letar efter verkar ha kopplats bort.',
@ -10,7 +9,7 @@ export const metadata: Metadata = {
export default function NotFound() {
return (
<main className="min-h-[calc(100vh-80px)] bg-white flex items-center overflow-hidden">
<main className="min-h-[calc(100vh-80px)] bg-white dark:bg-fd-navy flex items-center overflow-hidden">
<div className="max-w-[1200px] mx-auto px-6 md:px-8 w-full pt-8 pb-16 md:pt-12 md:pb-20">
<div className="flex flex-col lg:flex-row items-center gap-12 lg:gap-20">
@ -18,25 +17,25 @@ export default function NotFound() {
<div className="flex flex-col items-start gap-6 lg:gap-8 flex-1">
{/* Error code badge */}
<div className="inline-flex items-center gap-2 bg-fd-navy/10 rounded-full px-4 py-2">
<div className="inline-flex items-center gap-2 bg-fd-navy/10 dark:bg-white/10 rounded-full px-4 py-2">
<span className="w-2 h-2 rounded-full bg-red-500 animate-pulse" />
<span className="font-joey text-fd-small text-fd-navy/60 tracking-widest uppercase">
<span className="font-joey text-fd-small text-fd-navy/60 dark:text-white/60 tracking-widest uppercase">
Felkod 404
</span>
</div>
{/* Heading */}
<div className="flex flex-col gap-3">
<h1 className="font-joey-heavy text-fd-display text-fd-navy leading-none">
<h1 className="font-joey-heavy text-fd-display text-fd-navy dark:text-fd-yellow leading-none">
Oops!
</h1>
<p className="font-joey-medium text-fd-h2 text-fd-navy max-w-[460px] leading-snug">
<p className="font-joey-medium text-fd-h2 text-fd-navy dark:text-white max-w-[460px] leading-snug">
Vi kan inte hitta sidan du letar efter.
</p>
</div>
{/* Body */}
<p className="font-joey text-fd-body-lg text-fd-navy/60 max-w-[420px]">
<p className="font-joey text-fd-body-lg text-fd-navy/60 dark:text-white/60 max-w-[420px]">
Det verkar som kabeln kopplades bort någonstans längs vägen.
Prova att gå tillbaka till startsidan.
</p>
@ -53,11 +52,11 @@ export default function NotFound() {
<div className="hidden lg:flex flex-1 items-center justify-center w-full max-w-[380px] lg:max-w-none">
<div className="relative w-full max-w-[460px]">
<svg
<svg
viewBox="0 0 1536 1024"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className="w-full h-auto relative opacity-90"
className="w-full h-auto relative opacity-90 dark:opacity-40"
aria-hidden="true"
>
<path
@ -65,6 +64,7 @@ export default function NotFound() {
fill="#0E2338"
fillRule="evenodd"
opacity="0.85"
className="dark:fill-white"
/>
</svg>