From e6f0eb46ae234d2bf3d690d980003c11fa9df240 Mon Sep 17 00:00:00 2001 From: joshua kaunert <4586402+jkaunert@users.noreply.github.com> Date: Tue, 28 May 2024 12:51:44 -0500 Subject: [PATCH 1/3] adds support for color-mode selection --- Sources/Ignite/Elements/HTML.swift | 2 +- Sources/Ignite/Framework/Site.swift | 6 ++++++ Sources/Ignite/Framework/SiteColorMode.swift | 13 +++++++++++++ 3 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 Sources/Ignite/Framework/SiteColorMode.swift diff --git a/Sources/Ignite/Elements/HTML.swift b/Sources/Ignite/Elements/HTML.swift index fa74e6a..f2f2262 100644 --- a/Sources/Ignite/Elements/HTML.swift +++ b/Sources/Ignite/Elements/HTML.swift @@ -37,7 +37,7 @@ public struct HTML: PageElement { /// - Returns: The HTML for this element. public func render(context: PublishingContext) -> String { var output = "" - output += "" + output += "" output += head?.render(context: context) ?? "" output += body?.render(context: context) ?? "" output += "" diff --git a/Sources/Ignite/Framework/Site.swift b/Sources/Ignite/Framework/Site.swift index 655cb83..7824643 100644 --- a/Sources/Ignite/Framework/Site.swift +++ b/Sources/Ignite/Framework/Site.swift @@ -84,6 +84,9 @@ public protocol Site { /// explicitly override the theme with something custom. var theme: ThemeType { get } + /// The color mode to apply to the site, default is light mode + var colorMode: SiteColorMode { get } + /// The path to the favicon var favicon: URL? { get } @@ -147,6 +150,9 @@ extension Site { /// An empty tag page by default, which triggers no tag pages being made. public var tagPage: EmptyTagPage { EmptyTagPage() } + /// The default color mode being light + public var colorMode: SiteColorMode { .light } + /// The default favicon being nil public var favicon: URL? { nil } diff --git a/Sources/Ignite/Framework/SiteColorMode.swift b/Sources/Ignite/Framework/SiteColorMode.swift new file mode 100644 index 0000000..c324658 --- /dev/null +++ b/Sources/Ignite/Framework/SiteColorMode.swift @@ -0,0 +1,13 @@ +// +// SiteColorMode.swift +// Ignite +// https://www.github.com/twostraws/Ignite +// See LICENSE for license information. +// + +import Foundation + +public enum SiteColorMode: String { + case dark + case light +} From c507d16eb2cd2d38ffe9809c592a1b41ecbd3ed3 Mon Sep 17 00:00:00 2001 From: joshua kaunert <4586402+jkaunert@users.noreply.github.com> Date: Tue, 27 Aug 2024 11:38:51 -0500 Subject: [PATCH 2/3] adds setting the color scheme in the body when the site is loaded --- Sources/Ignite/Framework/ColorScheme.swift | 62 ++++++++++++++++++++ Sources/Ignite/Framework/SiteColorMode.swift | 13 ---- 2 files changed, 62 insertions(+), 13 deletions(-) create mode 100644 Sources/Ignite/Framework/ColorScheme.swift delete mode 100644 Sources/Ignite/Framework/SiteColorMode.swift diff --git a/Sources/Ignite/Framework/ColorScheme.swift b/Sources/Ignite/Framework/ColorScheme.swift new file mode 100644 index 0000000..f398862 --- /dev/null +++ b/Sources/Ignite/Framework/ColorScheme.swift @@ -0,0 +1,62 @@ +// +// ColorScheme.swift +// Ignite +// https://www.github.com/twostraws/Ignite +// See LICENSE for license information. +// + +import Foundation + +public enum ColorScheme: String, CustomStringConvertible { + case auto, light, dark + + public var description: String { + rawValue + } +} + +public extension Body { + func colorScheme(_ colorScheme: ColorScheme) -> Self { + var copy = self + switch colorScheme { + case .auto: + copy.items.append(setBasedOnUserPreference()) + default: + copy.items.append(setColorSchema(colorScheme)) + } + return copy + } + + func setColorSchema(_ colorSchema: ColorScheme) -> Script { + Script(code: "document.documentElement.setAttribute('data-bs-theme', '\(colorSchema)');") + } + + func setBasedOnUserPreference() -> Script { + Script(code: """ + document.addEventListener('DOMContentLoaded', (event) => { + // Function to set the theme based on user preference + function setThemeBasedOnPreference() { + const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches; + + if (prefersDarkScheme) { + document.documentElement.setAttribute('data-bs-theme', 'dark'); + } else { + document.documentElement.setAttribute('data-bs-theme', 'light'); + } + } + + // Set the theme based on user preference when the page loads + setThemeBasedOnPreference(); + + // Listen for changes to the user's color scheme preference + window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', setThemeBasedOnPreference); + }); + """) + } +} + +public extension PageElement { + func colorScheme(_ colorScheme: ColorScheme) -> Self { + data("bs-theme", "\(colorScheme)") + } +} diff --git a/Sources/Ignite/Framework/SiteColorMode.swift b/Sources/Ignite/Framework/SiteColorMode.swift deleted file mode 100644 index c324658..0000000 --- a/Sources/Ignite/Framework/SiteColorMode.swift +++ /dev/null @@ -1,13 +0,0 @@ -// -// SiteColorMode.swift -// Ignite -// https://www.github.com/twostraws/Ignite -// See LICENSE for license information. -// - -import Foundation - -public enum SiteColorMode: String { - case dark - case light -} From da4db9a2c35487861e54025bd2c35e4e946eb1e4 Mon Sep 17 00:00:00 2001 From: joshua kaunert <4586402+jkaunert@users.noreply.github.com> Date: Tue, 27 Aug 2024 11:44:47 -0500 Subject: [PATCH 3/3] updates callsites --- Sources/Ignite/Elements/HTML.swift | 2 +- Sources/Ignite/Framework/Site.swift | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/Sources/Ignite/Elements/HTML.swift b/Sources/Ignite/Elements/HTML.swift index f2f2262..3acb2ea 100644 --- a/Sources/Ignite/Elements/HTML.swift +++ b/Sources/Ignite/Elements/HTML.swift @@ -37,7 +37,7 @@ public struct HTML: PageElement { /// - Returns: The HTML for this element. public func render(context: PublishingContext) -> String { var output = "" - output += "" + output += "" output += head?.render(context: context) ?? "" output += body?.render(context: context) ?? "" output += "" diff --git a/Sources/Ignite/Framework/Site.swift b/Sources/Ignite/Framework/Site.swift index 7824643..dec3cfe 100644 --- a/Sources/Ignite/Framework/Site.swift +++ b/Sources/Ignite/Framework/Site.swift @@ -85,7 +85,7 @@ public protocol Site { var theme: ThemeType { get } /// The color mode to apply to the site, default is light mode - var colorMode: SiteColorMode { get } + var colorScheme: ColorScheme { get } /// The path to the favicon var favicon: URL? { get } @@ -151,7 +151,7 @@ extension Site { public var tagPage: EmptyTagPage { EmptyTagPage() } /// The default color mode being light - public var colorMode: SiteColorMode { .light } + public var colorScheme: ColorScheme { .light } /// The default favicon being nil public var favicon: URL? { nil }