GFS Design System — Dark Mode Showcase

01 Introduction Dark mode architecture overview

The GFS Design System implements dark mode through CSS custom property reassignment on the [data-theme="dark"] selector. Every color token is remapped to its dark equivalent, so components automatically adapt without any class changes.

          How this page works:

          Each section shows a split view. The left pane forces light mode variables. The right pane forces dark mode variables via scoped CSS custom properties. This gives a true side-by-side comparison regardless of the page-level theme toggle.

Quick Reference

Activation
data-theme="dark"

Persistence
localStorage

Transition
400ms ease

Tokens Remapped
38 variables

■ Dark mode is not an inversion — it is a carefully mapped parallel palette preserving brand identity and hierarchy.

02 Color Token Comparison All colors in light vs dark, shown as paired swatches

Primary Blues

Light

Cobalt

#092F64

Navy

#1A5799

Tufts

#468BE6

Jordy

#93BFEF

Alice

#E9F5FF

Ice

#F4F9FF

Dark

Cobalt

#93BFEF

Navy

#468BE6

Tufts

#6BA3ED

Jordy

#1A5799

Alice

#0A1929

Ice

#0D1F33

Neutrals

Light

Black

#1F1F1F

Charcoal

#2D2D2D

Graphite

#4B5F7A

Slate

#6B7280

Steel

#9CA3AF

Silver

#D9E1EA

Fog

#F0F2F5

White

#FFFFFF

Dark

Black

#F0F2F5

Charcoal

#E5E7EB

Graphite

#9CA3AF

Slate

#6B7280

Steel

#4B5F7A

Silver

#2D2D2D

Fog

#1A1A1A

White

#111111

Semantic Colors

Light

Success

#0F766E

Success BG

#F0FDF4

Warning

#B45309

Warning BG

#FFFBEB

Error

#DC2626

Error BG

#FEF2F2

Dark

Success

#34D399

Success BG

#0A1F15

Warning

#FBBF24

Warning BG

#1F1A0A

Error

#F87171

Error BG

#1F0A0A

■ Dark mode blues invert the luminance scale: cobalt becomes the lightest blue, alice becomes the darkest. Neutrals mirror completely.

03 Typography Text specimens in both modes side-by-side

Light

Display Heading

Section Heading

Subsection Title

Body text renders in Graphite (#4B5F7A) on a white background, providing strong readability with a WCAG AA contrast ratio of 5.2:1.

          Mono Label / System Text
        

          const theme = 'light';
        

Dark

Display Heading

Section Heading

Subsection Title

Body text renders in Graphite (#9CA3AF) on the dark surface (#111111), maintaining strong readability with comfortable contrast for extended reading sessions.

          Mono Label / System Text
        

          const theme = 'dark';
        

■ Headings use --cobalt (#092F64 light, #93BFEF dark). Body uses --graphite (#4B5F7A light, #9CA3AF dark). Labels use --slate (unchanged: #6B7280).

04 Buttons All button variants in both modes

Light

Dark

■ Primary buttons flip: dark text on light background in dark mode. Danger, success, and warning use the lighter semantic palette variants.

05 Badges & Status All badge colors in both modes

Light

Filled Badges

Blue Green Yellow Red Gray

Outline Badges

Blue Green Yellow Red

Status Indicators

             Active
             Pending
             Failed
             Inactive
          

Dark

Filled Badges

Blue Green Yellow Red Gray

Outline Badges

Blue Green Yellow Red

Status Indicators

             Active
             Pending
             Failed
             Inactive
          

■ Badge backgrounds in dark mode use very dark tinted surfaces. Text colors shift to brighter, desaturated variants for luminance contrast.

06 Cards Card variants in both modes

Light

Standard Card

Monthly Revenue

$142,800

+12.4% vs. last month

Accent Card

Card with a cobalt top accent border for emphasis on key metrics or alerts.

Tinted Card

Uses --ice background for subtle emphasis without heavy borders.

Dark

Standard Card

Monthly Revenue

$142,800

+12.4% vs. last month

Accent Card

Card with a cobalt top accent border for emphasis on key metrics or alerts.

Tinted Card

Uses --ice background for subtle emphasis without heavy borders.

■ Cards use flat 1px borders (never shadows). Background shifts from #FFFFFF to #111111. Borders from #D9E1EA to #2D2D2D.

07 Tables Data table in both modes

Light

SKU	Product	Status	Price
CHD-001	Barrel Cheddar 40lb	Active	$2.1450
MOZ-042	LMPS Mozzarella 6lb	Pending	$1.8920
SWS-118	Swiss Loaf 12lb	Discontinued	$3.4200
PEP-207	Pepper Jack 5lb	Active	$2.5100

Dark

SKU	Product	Status	Price
CHD-001	Barrel Cheddar 40lb	Active	$2.1450
MOZ-042	LMPS Mozzarella 6lb	Pending	$1.8920
SWS-118	Swiss Loaf 12lb	Discontinued	$3.4200
PEP-207	Pepper Jack 5lb	Active	$2.5100

■ Table headers use --fog background and --cobalt bottom border. Row borders use --fog. Hover state uses --ice.

08 Forms Input fields, selects, textareas in both modes

Light

Company Name

Legal entity name

Region

Notes

Error State

Please enter a valid email address

✓

Checkbox

Radio

Toggle

Dark

Company Name

Legal entity name

Region

Notes

Error State

Please enter a valid email address

✓

Checkbox

Radio

Toggle

■ Form inputs use --white background, --silver border, --black text. Focus ring uses --tufts (3px --alice glow). Error uses --error for border and message.

09 Navigation Topbar, sidebar mockups in both modes

Topbar

Light

Dark

Sidebar Navigation

Light

Dark

Tabs & Breadcrumbs

Light

          Home
          /
          Products
          /
          Barrel Cheddar
        

Overview

Pricing

History

Dark

          Home
          /
          Products
          /
          Barrel Cheddar
        

Overview

Pricing

History

■ Topbar: #092F64 (light) vs #0A1929 (dark). Sidebar active uses --ice background + --cobalt text + left border. Tabs active uses --cobalt bottom border.

10 Hero Section Mini hero preview in both modes

Light

 Design System v10.0

Global Food Solutions

Food supply systems built for scale.

              ■ Precise
              ■ Global
              ■ Fresh
            

GFS

Global Food Solutions

Dark

 Design System v10.0

Global Food Solutions

Food supply systems built for scale.

              ■ Precise
              ■ Global
              ■ Fresh
            

GFS

Global Food Solutions

■ Hero right panel uses --ice (#F4F9FF light, #0D1F33 dark). Brand monogram uses --cobalt. Tagline border uses --tufts.

11 Charts Small chart previews in both modes

Bar Chart

Light

Monthly Revenue ($K)

          JanFebMarAprMayJunJulAugSepOctNovDec
        

Dark

Monthly Revenue ($K)

          JanFebMarAprMayJunJulAugSepOctNovDec
        

Line Chart

Light

Price Trend ($/lb)

Dark

Price Trend ($/lb)

KPI Cards + Sparklines

Light

Revenue

$1.42M

+12.4%

Orders

2,847

-3.1%

Dark

Revenue

$1.42M

+12.4%

Orders

2,847

-3.1%

■ Chart colors use the primary blue scale: --cobalt, --navy, --tufts in light; their dark-remapped equivalents in dark. Sparklines use --tufts.

12 Implementation Guide How to add dark mode to new components, CSS variable mapping table

How Dark Mode Works

Step 1

Toggle Attribute

Setting data-theme="dark" on <html> activates all dark mode token overrides.

Step 2

Variable Cascade

All 38 CSS custom properties under [data-theme="dark"] override their :root counterparts.

Step 3

Persistence

Theme preference is stored in localStorage('gfs-theme') and applied on page load before first paint.

Toggle Function

function toggleTheme() { const html = document.documentElement; const isDark = html.getAttribute('data-theme') === 'dark'; html.setAttribute('data-theme', isDark ? '' : 'dark'); localStorage.setItem('gfs-theme', isDark ? 'light' : 'dark'); } // Apply saved preference on load (run before DOM ready)