Restyle site: offwhite background + navy blue accent palette

[Copilot]

Replaces the default purple/white al-folio theme with a warmer offwhite background and navy blue accent scheme, including a cohesive steel blue for dark mode.

_sass/_variables.scss

• Added new palette variables:

  $offwhite-color: #f5f0eb;
  $navy-color: #1b2a4a;
  $navy-color-light: #2c4a7c;
  $navy-color-dark: #0f1b33;
  $steel-blue-color: #6b8db5;

• $code-bg-color-light: rgba($purple-color, 0.05) → rgba($navy-color, 0.05)

_sass/_themes.scss

Light mode:

Variable	Before	After
--global-bg-color	$white-color	$offwhite-color
--global-theme-color	$purple-color	$navy-color
--global-hover-color	$purple-color	$navy-color-light
--global-footer-bg-color	$grey-color-dark	$navy-color-dark
--global-newsletter-bg-color	$white-color	$offwhite-color

Dark mode: theme/hover color changed from $cyan-color → $steel-blue-color (#6b8db5) for better cohesion with the navy light-mode theme.

Cards retain $white-color to contrast against the offwhite page background. Functional block colors (tip/warning/danger) and the light/dark toggle are untouched.

Original prompt

Goal

Restyle the website to have a more unique and aesthetically pleasing color scheme with an offwhite background and navy blue trim/accents.

Current State

The site uses the default al-folio theme colors defined in two key files:

_sass/_variables.scss

• Currently uses $white-color: #ffffff for backgrounds
• Uses $purple-color: #b509ac as the main theme/accent color
• Uses $grey-color-dark: #1c1c1d for dark backgrounds (footer, dark mode)
• Uses standard black/white/grey palette

_sass/_themes.scss

• Light mode (:root) uses $white-color for --global-bg-color and $purple-color for --global-theme-color and --global-hover-color
• Dark mode (html[data-theme="dark"]) uses $grey-color-dark for bg and $cyan-color for theme color

Desired Changes

1. Update _sass/_variables.scss

Add new color variables for the offwhite/navy palette:

• Add $offwhite-color: #f5f0eb (warm offwhite)
• Add $navy-color: #1b2a4a (navy blue)
• Add $navy-color-light: #2c4a7c (lighter navy for hover states)
• Add $navy-color-dark: #0f1b33 (darker navy for footer/dark elements)
• Update $code-bg-color-light to use the navy color with low opacity instead of purple: rgba($navy-color, 0.05)

2. Update _sass/_themes.scss — Light Mode (:root)

• --global-bg-color: change from $white-color to $offwhite-color
• --global-code-bg-color: use the updated $code-bg-color-light (now navy-tinted)
• --global-theme-color: change from $purple-color to $navy-color
• --global-hover-color: change from $purple-color to $navy-color-light
• --global-footer-bg-color: change from $grey-color-dark to $navy-color-dark
• --global-footer-link-color: keep as $white-color (good contrast on navy)
• --global-card-bg-color: change from $white-color to $white-color (keep white for cards to contrast with offwhite page bg)
• --global-newsletter-bg-color: change from $white-color to $offwhite-color

3. Update _sass/_themes.scss — Dark Mode (html[data-theme="dark"])

• --global-theme-color: change from $cyan-color to $navy-color-light or a lighter complement (could keep cyan for dark mode contrast, or use a steel blue like #6b8db5)
• --global-hover-color: match the updated dark mode theme color

Important Notes

• Do NOT break the existing light/dark mode toggle functionality
• Make sure all text remains readable (sufficient contrast ratios)
• The offwhite should feel warm and inviting, not yellow
• Navy blue accents should appear on links, buttons, navbar active states, and the footer
• Keep the existing tip/warning/danger block colors as they are (they are functional colors)
• The dark mode should still look good — consider using a steel blue accent (#6b8db5) instead of the current cyan for better cohesion with the navy light-mode theme

This pull request was created from Copilot chat.

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.