Light mode secondary color is white

[matthewwee]

Short description
Applying .foregroundStyle(.secondary) to a Text object makes it invisible in light mode.

Steps to Reproduce

1. Run ignite new test to create a new project.
2. Add the modifier .foregroundStyle(.secondary) to the default Text("Hello world!").
3. Run ignite build and ignite run.

Expected behavior
In dark mode, the page renders as expected, with “Hello world!” in grey instead of white:

In light mode, however, the text is rendered as white. In this screenshot I have highlighted the text in Safari to show it is still there but in white:

Build information

• OS: Ubuntu 24.04.3 LTS
• Editor: VSCode 1.106.2 on macOS Tahoe 26.1
• Swift version: Swift 6.2 86_64-unknown-linux-gnu
• Ignite version: 0.6.0
• Tested browsers: Safari 26.1 (21622.2.11.11.9), Chrome 142.0.7444.176

Additional context
Looking at the CSS, it seems the color is somehow set to 50 000+ which seems to be the source of the issue:

Thanks for your help with this project, it has helped me create good-looking static websites with no web dev experience.

[matthewwee]

A workaround is applying a custom theme:

extension ExampleSite {
    var lightTheme: (any Theme)? { LightModeTheme() }
}

struct LightModeTheme: Theme {
    var colorScheme: Ignite.ColorScheme = .light
    var secondary: Color = .gray
}

[twostraws]

As this is an open-source project, would you like to take a shot at fixing the issue?