{"id":23163834,"url":"https://github.com/simonnickel/snap-theme","last_synced_at":"2025-08-18T04:32:29.189Z","repository":{"id":236940727,"uuid":"786787074","full_name":"simonnickel/snap-theme","owner":"simonnickel","description":"A toolset to abstract Colors, Fonts, Icons and Numbers of a multi-platform SwiftUI app. Define semantic attributes in a Theme and apply them to your views for a consistent UI with maintainability in mind.","archived":false,"fork":false,"pushed_at":"2024-11-29T21:44:17.000Z","size":165,"stargazers_count":7,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-08-14T21:01:16.322Z","etag":null,"topics":["swift","swift-ui","swiftui"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/simonnickel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-04-15T09:55:22.000Z","updated_at":"2024-11-29T21:44:21.000Z","dependencies_parsed_at":"2024-05-13T10:45:46.169Z","dependency_job_id":"b363bf6d-808f-4a4b-8ff8-faae7f272bcb","html_url":"https://github.com/simonnickel/snap-theme","commit_stats":null,"previous_names":["simonnickel/snap-theme"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/simonnickel/snap-theme","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonnickel%2Fsnap-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonnickel%2Fsnap-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonnickel%2Fsnap-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonnickel%2Fsnap-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/simonnickel","download_url":"https://codeload.github.com/simonnickel/snap-theme/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/simonnickel%2Fsnap-theme/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":270945167,"owners_count":24672873,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-18T02:00:08.743Z","response_time":89,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["swift","swift-ui","swiftui"],"created_at":"2024-12-18T00:31:19.244Z","updated_at":"2025-08-18T04:32:28.690Z","avatar_url":"https://github.com/simonnickel.png","language":"Swift","readme":"\u003c!-- Copy badges from SPI --\u003e\n[![](https://img.shields.io/endpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2Fsimonnickel%2Fsnap-theme%2Fbadge%3Ftype%3Dplatforms)](https://swiftpackageindex.com/simonnickel/snap-theme)\n[![](https://img.shields.io/endpoint?url=https%3A%2F%2Fswiftpackageindex.com%2Fapi%2Fpackages%2Fsimonnickel%2Fsnap-theme%2Fbadge%3Ftype%3Dswift-versions)](https://swiftpackageindex.com/simonnickel/snap-theme) \n\n\u003e This package is part of the [SNAP](https://github.com/simonnickel/snap) suite.\n\n\n# SnapTheme\n\nA toolset to abstract Colors, Fonts, Icons and Numbers of a multi-platform SwiftUI app. Define semantic attributes in a `Theme` and apply them to your views for a consistent UI with maintainability in mind.\n\n\n[![Documentation][documentation badge]][documentation] \n\n[documentation]: https://swiftpackageindex.com/simonnickel/snap-theme/main/documentation/snaptheme\n[documentation badge]: https://img.shields.io/badge/Documentation-DocC-blue\n\n\n## Motivation\n\nConsistency in look and feel is important. Especially for a growing app project, when you decide to tweak a few attributes or need adjustments to fit platform changes or design trends. Goal of `SnapTheme` is to define visual attributes in a single place, to allow: **A consistent UI with simple adjustments and quick experiments, but strong maintainability.**\n\nInstead of defining design attributes all over the place, you register a semantic key, assign a definition and use it in your SwiftUI views. You can also define multiple Themes to let the user choose it's favorite.\n\n`Theme` comes with:\n - Base attributes (Color, Font, Icon, Number) and composed attributes (Surface, Background, TextSurface).\n - A preset of common semantic definitions for these attributes (e.g. `.textTitle`, `.textSubtitle`) with platform specific default values.\n - ViewModifier to apply them to your views.\n - Wrapper of stock SwiftUI views to set attributes from Theme definitions (e.g. `ThemeVStack(spacing:`)).\n - Convenience views for common layout and style tasks (e.g. `ThemeScreen`, `ThemeElement`).\n\nThe Theme is injected in the `Environment` to be available to ViewModifier and Views. \n\nFonts and Numbers are scaled by DynamicType by default. This brings some additional benefits: \n - UI sizes (paddings, spacings, ...) defined by the Theme will scale with DynamicType.\n - By adjusting the Themes scale factor, the whole UI can be zoomed by a simple value change.\n  \n\n## How to use\n\nThe Theme comes with some presets and is easy to use and customize.\n\n### Define the Theme\nOverride preset attributes in a custom Theme:\n```\nlet theme = Theme(\n\tcolors: [\n\t\t.accentColorBase : .color(.purple)\n\t], \n\t...\n)\n```\n\nAnd/or define your own attributes:\n```\nextension Theme.ColorKey {\n\tstatic let exampleColor = Theme.ColorKey(\"exampleColor\", default: .color(.purple))\n}\n```\n\n### Apply the Theme\n```\ncontentView.theme(apply: theme)\n```\n\n### Use the Theme\n```\nText(\"Example\").color(.exampleColor)\n```\n\n\n## Definitions\n\n### ColorKey\n\nRepresent a semantic meaning of the color (`.foreground`, `.background`, `.accent`, `.destructive`).\nThey do not describe the color or specific use case (~`.red`~, ~`.buttonLabel`~).\n\n\n### SurfaceKey\n\nA Surface represents a `ShapeStyle`, either a color, material or gradient.\n\n\n### FontKey\n\nRepresents a semantic meaning of text (`.textTitle`, `.textSubtitle`) and assigns a `FontDefinition`.\n\n\n### IconKey\n\nRepresents a semantic meaning of a visual indicator and assigns an image.\n\n\n### NumberKey\n\nRepresents a specific value. Scaled by dynamic type.\n\n\n## Key Assignments\n\n### TextSurfaceKey\n\nAssigns a `Surface` to a font.\n\n### BackgroundKey\n\nDefines the background of a semantic layout element (`.screen`, `.content`, `.contentSecondary`) by assigning a `Surface` and a highlight `Surface`.\n\n\n## SnapAppThemeDemo\n\nA demo of the Theme in action is available at [snap-app-theme-demo](https://github.com/simonnickel/snap-app-theme-demo).\nIt provides a reference for all preset attributes, demonstrates the default values and provides some configuration sets to change attributes in the app.\n\n\n## Elements of the Theme \n\n### ThemeKeys\n\nKey and default value.\n\n\n### ThemeValues\n\nValues registered for a `ThemeKey`.\n\nExamples: BackgroundValue, ColorValue (TextSurface), FontValue, IconValue, NumberValue \n \n \n### ThemeModifier\n\nModifier using `ThemeKey`s to apply the configured values on a view. \n\nExamples: `.theme(background:)`, `.theme(color:)`, `.theme(text:)`, `.theme(padding:)`\n\n\n### LayoutElements\n\nGeneric container views used for layout. Basic building blocks of to build a screen.\n\nExamples: `ThemeScreen`, `ThemeHStack(spacing:)`, `ThemeElement` \n\n\n### Components\n\nViews that show content and use `ThemeKey`s to configure style and layout.\n\nExamples: `ThemeLabel(icon:)`, `ThemeCornerView(icon:)`, `ThemeRectangle(cornerRadius:)`\n\n\n#### Container\n\nContainer use `ThemeKey`s to layout content.\n\nExamples: `ThemeCloseContainer`, `ThemeSectionHeaderContainer`\n\n\n### Styles\n\nDefinitions of SwiftUI styles using `ThemeKey`s.\n\nExamples: `ThemeButtonStyle`, `ThemeLabelStyleTag`\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonnickel%2Fsnap-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsimonnickel%2Fsnap-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsimonnickel%2Fsnap-theme/lists"}