skiptools / skiptools/skip-ui

`ColorScheme.asMaterialTheme` should incorporate `.tint()`

Open
#432 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
Swift
Stars
330
Forks
76
Avg merge
3h 6m
Merged PRs (30d)
1

Description

https://developer.apple.com/documentation/swiftui/color/accentcolor
https://developer.apple.com/documentation/swiftui/view/tint(_:)-23xyq

Use this method to override the default accent color for this view.

In SwiftUI, .tint() can, under certain circumstances, modify the actual value of Color.accentColor, but there's a special rule: it only does that when you use .tint() at a high enough level that it affects the topmost system container, e.g. NavigationStack or TabView.

The system containers have buttons that need an accent color. Once they pick a color, Color.accentColor will be that color, even if you apply a different .tint() at a lower level.

For example, in the Showcase app, if you add a .tint(.purple) to ShowcaseApp.swift, it will turn your tab bar purple and your back button purple, etc. and, in the Color playground, Color.accentColor will render as purple. But if you add that .tint(purple) in PlaygroundListView.swift, well, you're too late. The TabView has already picked its accent color (which might be the "Global Accent Color Name") and now Color.accentColor will always be that.

SkipUI should copy this behavior. (I say this with some sadness.) Currently ColorScheme.swift's asMaterialTheme uses the Material 3 default, and allows users to override it with an asset accent color or with a .material3ColorScheme, but it should also allow users to override the color using .tint().

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start in ColorScheme.swift at asMaterialTheme and review how the Material 3 default, asset accent color, and .material3ColorScheme are selected. Compare .tint() placement in ShowcaseApp.swift and PlaygroundListView.swift, then verify the Color playground and system-container colors. Done means a high-level tint affects the theme while a lower-level tint does not override the container's chosen accent.

Written by the indexing model from the issue text.

Assessment

Tech stack
swift
Domain
mobile
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.