Themes
-
Theme protocol: the base of all themes.
ThemeKit makes available, without any further coding:
- a
LightTheme(the default macOS theme) - a
DarkTheme(the dark macOS theme, usingNSAppearanceNameVibrantDark) - a
SystemTheme(which dynamically resolve to eitherLightThemeor `DarkTheme depending on the macOS preference at System Preferences > General > Appearance)
You can choose wheter or not to use these, and you can also implement your custom themes by:
- implementing native
Themeclasses conforming to this protocol andNSObject - provide user themes (
UserTheme) with.themefiles
Please check the provided Demo.app project for sample implementations of both.
See moreDeclaration
Swift
public protocol Theme: NSObjectProtocol - a
-
System theme.
Will dynamically resolve to either
See moreThemeManager.lightThemeorThemeManager.darkTheme, depending on the macOS preference at System Preferences > General > Appearance.Declaration
Swift
public class SystemTheme: NSObject, Theme
-
A
Themeclass wrapping a user provided theme file (.theme).To enable user themes, set theme folder on
ThemeManager.userThemesFolderURL.Notes about
.themefiles:- lines starting with
#or//will be treated as comments, thus, ignored; - non-comment lines consists on simple variable/value assignments (eg,
variable = value); variablename can contain characters[a-zA-Z0-9_-.]+;- custom variables can be specified (eg,
myBackgroundColor = ...); - theming properties match the class methods of
ThemeColor,ThemeGradientandThemeImage(eg,labelColor); - variables can be referenced by prefixing them with
$(eg,mainBorderColor = $commonBorderColor); - colors are defined using
rgb(255, 255, 255)orrgba(255, 255, 255, 1.0)(case insensitive); - gradients are defined using
linear-gradient(color1, color2)(where colors are defined as above; case insensitive); - pattern images are defined using
pattern(named:xxxx)(named images) orpattern(file:../dddd/xxxx.yyy)(filesystem images); - images are defined using
image(named:xxxx)(named images) orimage(file:../dddd/xxxx.yyy)(filesystem images); ThemeManager.themesproperty is automatically updated when there are changes on the user themes folder;- file changes are applied on-the-fly, if it corresponds to the currently applied theme.
Example
.themefile:// ************************* Theme Info ************************* // displayName = My Theme 1 identifier = com.luckymarmot.ThemeKit.MyTheme1 darkTheme = true // ********************* Colors & Gradients ********************* // # define color for `ThemeColor.brandColor` brandColor = $blue # define a new color for `NSColor.labelColor` (overriding) labelColor = rgb(11, 220, 111) # define gradient for `ThemeGradient.brandGradient` brandGradient = linear-gradient($orange.sky, rgba(200, 140, 60, 1.0)) // ********************* Images & Patterns ********************** // # define pattern image from named image "paper" for color `ThemeColor.contentBackgroundColor` contentBackgroundColor = pattern(named:paper) # define pattern image from filesystem (relative to user themes folder) for color `ThemeColor.bottomBackgroundColor` bottomBackgroundColor = pattern(file:../some/path/some-file.png) # use named image "apple" namedImage = image(named:apple) # use image from filesystem (relative to user themes folder) fileImage = image(file:../some/path/some-file.jpg) // *********************** Common Colors ************************ // blue = rgb(0, 170, 255) orange.sky = rgb(160, 90, 45, .5) // ********************** Fallback Assets *********************** // fallbackForegroundColor = rgb(255, 10, 90, 1.0) fallbackBackgroundColor = rgb(255, 200, 190) fallbackGradient = linear-gradient($blue, rgba(200, 140, 60, 1.0))With the exception of system overrided named colors (e.g.,
See morelabelColor), which defaults to the original system provided named color, unimplemented properties on theme file will default to-fallbackForegroundColor,-fallbackBackgroundColor,-fallbackGradientand-fallbackImage, for foreground color, background color, gradients and images, respectively.Declaration
Swift
public class UserTheme: NSObject, Theme - lines starting with
View on GitHub
Install in Dash
Themes Reference