MacOS theme for JetBrains Compose UI framework

Overview

MacOS theme for Compose

Multiplatform MacOS theme written in Compose UI.

Create native looking UIs for Mac using Compose UI. Share your UI code to run on Android, Windows or Linux. You could combine this with themes to match other platforms and write your UI once, but themed to appear native.

Desktop Example

Android Example

Gradle

Multiplatform

Add the common dependency which will work for both android and desktop.

sourceSets {
    named("commonMain") {
        dependencies {
            implementation("io.github.chozzle:compose-macos-theme:0.4.1")
        }
    }
}

Optionally, supply specific dependencies:

Desktop JVM

Currently it appears that for desktop projects, you must use the kotlin multiplatform plugin

plugins {
    kotlin("multiplatform")
    id("org.jetbrains.compose")
}

kotlin {
    sourceSets {
        named("jvmMain") {
            dependencies {
                implementation(compose.desktop.currentOs)
                implementation("io.github.chozzle:compose-macos-theme-desktop:0.4.1")
            }
        }
    }
}

Android

Do not specify android specifically (it won't work). Gradle will automatically import the android sourceset only.

dependencies {
    implementation("io.github.chozzle:compose-macos-theme:0.4.1 ")
}

Ensure you have the required compiler options for compose generally or alternatively you can use Jetbrains' plugin:

plugins {
    id("org.jetbrains.compose")
}

You'll need Maven Central as a repository

repositories {
    ...
    mavenCentral()
}

Planned work - please assign yourself!

  • Search field
  • Text field
  • Checkbox
  • Buttons
  • Dropdown menu - desktop only
  • Radio button
  • Switch
  • Dark theme
  • Theme for Windows?

Note that SF Symbols used in this library are only licenced to be used on Apple devices.

You might also like...
A crypto currency wallet UI/UX template created using Android's jetpack compose.
A crypto currency wallet UI/UX template created using Android's jetpack compose.

CryptoWalletTemplate A crypto currency wallet UI/UX template created using Android's jetpack compose. High definition demo on youtube Youtube video de

Sliders for compose with custom styles
Sliders for compose with custom styles

Custom compose sliders This package allows you to build highly customizable sliders and tracks for compose for android Add to your project Add it in y

Card with swipe options in Jetpack Compose

SwipeableActionCard Card with swipe options in Jetpack Compose Tutorial: Click Here Import SwipeableActionCard library Add this in project level build

Android jetpack compose swipe library

Swiper for Android Jetpack Compose Android Jetpack Compose swipe library. Downlo

A Jetpack Compose library with blur, pixelate, and other effects to keep your designer happy. Inspired by iOS UIVisualEffectView.
A Jetpack Compose library with blur, pixelate, and other effects to keep your designer happy. Inspired by iOS UIVisualEffectView.

A Jetpack Compose library with blur, pixelate, and other effects to keep your designer happy. Inspired by iOS UIVisualEffectView.

A color picker for Jetpack compose 🎨
A color picker for Jetpack compose 🎨

Compose Color Picker 🎨 Color Picker for Jetpack compose A color picker for Jetpack compose 🎨 Download 🚧 Working on it 🚧 Usage ColorPicker { co

A flexible theme provider for Jetpack Compose. Supports dynamic theme changes and saving theme preference.

JetTheme JetTheme is a flexible theme provider for Jetpack Compose. Change the theme and recompose the UI dynamically. Save theme preference to local

Catppuccin-jetbrains - Vibrant pastel theme for JetBrains IDEs
Catppuccin-jetbrains - Vibrant pastel theme for JetBrains IDEs

🧠 Vibrant pastel theme for JetBrains IDEs Usage Grab the latest jar from the re

Theme for VSCode and JetBrains IDEs, based on morhetz/gruvbox but with a plainer color palette for syntax highlighting.

gruvbox-plain Theme for VSCode and JetBrains IDEs, based on morhetz/gruvbox but with a plainer color palette for syntax highlighting. Syntax Colors gr

🧠 Soothing pastel theme for JetBrains IDEs
🧠 Soothing pastel theme for JetBrains IDEs

Catppuccin for JetBrains IDEs Installation

Dark theme for JetBrains IDEs :]
Dark theme for JetBrains IDEs :]

🌟 Hoshi Theme Dark theme for JetBrains IDEs. :] Screenshots Installation Using IDE built-in plugin system: Settings/Preferences Plugins Marketpla

KVMapper: A Key-Value Mapper app for MacOS, created with Kotlin and Compose Desktop
KVMapper: A Key-Value Mapper app for MacOS, created with Kotlin and Compose Desktop

KVMapper is an application to convert key-value pairs from one format to another. About This app was purely written in Kotlin and compiled fo

 Over The Air Server for deployment of Android, iOS and macOS apps
Over The Air Server for deployment of Android, iOS and macOS apps

Zealot 开源自部署 iOS、Android 及 macOS 应用分发平台,提供 iOS、Android SDK、fastlane 等丰富组件库,打包分发流程、上传应用竟然如此简单、独立部署解决企业使用的烦恼。 En Taro Adun! 🖖 特性 支持 iOS、Android 和 macOS

A multi-platform Collins Dictionary client, supports for Desktop(Windows/Linux/MacOS) and Android.
A multi-platform Collins Dictionary client, supports for Desktop(Windows/Linux/MacOS) and Android.

Collins Dictionary This is a multi-platform Collins Dictionary client, supports for Desktop(Windows/Linux/MacOS) and Android. For Linux and MacOS, ple

Entity Framework Core UI plugin for JetBrains Rider
Entity Framework Core UI plugin for JetBrains Rider

Entity Framework Core UI plugin for JetBrains Rider This plugin introduces Entity Framework Core commands' UI inside JetBrains Rider. Features There a

Paper-ui - A Multiplatform Compose Theme for your Compose app
Paper-ui - A Multiplatform Compose Theme for your Compose app

paper-ui (WIP) Screen.Recording.2022-02-13.at.8.14.45.PM.mov A Multiplatform Com

A Multiplatform Compose Theme for your Compose app
A Multiplatform Compose Theme for your Compose app

A Multiplatform Compose Theme for your Compose app

A beautiful Fashion Store like Android App Mock built on Jetpack Compose with compose navigation, hilt, dark theme support and google's app architecture found on uplabs Here
A beautiful Fashion Store like Android App Mock built on Jetpack Compose with compose navigation, hilt, dark theme support and google's app architecture found on uplabs Here

A beautiful Fashion Store like Android App Mock built on Jetpack Compose with compose navigation, hilt, dark theme support and google's app architecture found on uplabs Here

A Jetpack Compose Note writing application with Windows 97 theme
A Jetpack Compose Note writing application with Windows 97 theme

Compose-windows97 A Jetpack Compose Note writing application with Windows 97 theme Inspiration Recent tweet from Marton Braun and Website 98.js Hangin

Comments
  •  java.lang.NoSuchFieldError: Normal and java.lang.NoSuchMethodError: 'androidx.compose.ui.Modifier'

    java.lang.NoSuchFieldError: Normal and java.lang.NoSuchMethodError: 'androidx.compose.ui.Modifier'

    Hello,

    at first, nice project. I tried the demo example and the look and feel of the ui-elements is quite nice.

    I tried to use them in a freshly created demo kotlin-multiplatformm project and had some issues on the way.

    Maybe you could help me or point me in a direction, how to fix the issue, because right now I spend some time on it and can't find, what the issue actually is.


    Steps: At first, I created the project through intelliJs wizard and created a Kotlin Multiplatform project. Afterwards I updated all the dependencies, added your project and at last added a MacDropDown wrapped with a MacTheme.

    The Result can be found here: https://github.com/ishiharas/compose-macos-theme


    1: The first issue that transpired, occurred, when only adding an empty MacTheme composable. I got a java.lang.NoSuchFieldError: Normal exception. Looks like an issue with the Mac-fonts. (I use a MacBook with 11.2.2 Big Sur)

    This can be prevented, when adding the default typography:

                MacTheme(typography = Typography()) {
                }
    

    2: But after adding the MacDropDown component, I got another exception:

    Exception in thread "AWT-EventQueue-0" java.lang.NoSuchMethodError: 'androidx.compose.ui.Modifier androidx.compose.foundation.ClickableKt.clickable$default(androidx.compose.ui.Modifier, androidx.compose.foundation.interaction.MutableInteractionSource, androidx.compose.foundation.Indication, boolean, java.lang.String, androidx.compose.ui.semantics.Role, kotlin.jvm.functions.Function0, int, java.lang.Object)'
    	at io.chozzle.composemacostheme.MacDropdownKt$DropdownToggle$1.invoke(MacDropdown.kt:154)
    	at io.chozzle.composemacostheme.MacDropdownKt$DropdownToggle$1.invoke(MacDropdown.kt:152)
    	at androidx.compose.runtime.internal.ComposableLambdaImpl.invoke(ComposableLambda.jvm.kt:107)
            [...]
    

    The above mentioned code can be specifically found here: https://github.com/ishiharas/compose-macos-theme/blob/main/desktop/src/jvmMain/kotlin/Main.kt

    opened by ishiharas 3
  • up version

    up version

    up compose version up gradle version some fix

    Hi. Updated version of compose, gradle and some support libraries Tested only MacOS, but should work everywhere. Unfortunately some functions had to be marked with ExperimentalMaterialApi.

    opened by iSanechek 2
  • Windows Fluent Design Theme

    Windows Fluent Design Theme

    This project is great, exactly what we need for compose desktop apps to feel platform native.

    A theme for windows would be really great, maybe following Microsoft's new Fluent design: https://www.microsoft.com/design/fluent/

    opened by Wavesonics 1
  • Icons are not as bold as they should be

    Icons are not as bold as they should be

    This is depending on https://github.com/JetBrains/compose-jb/issues/171 to be fixed so that multiple font weights can be used. The icon are provided via San Fransisco font

    opened by Chozzle 1
Releases(v0.4.1)
Owner
Carson Holzheimer
Android and iOS developer currently @RedeyeApps. Latest muses: Kotlin Multiplatform, Jetpack Compose, NoSQL design.
Carson Holzheimer
Beagle is an open-source framework for cross-platform development using the concept of Server-Driven UI.

Beagle Getting Started · Learn the Basics · Contribute Beagle is an open-source framework for cross-platform development using the concept of Server-D

ZUP IT INNOVATION 657 Dec 28, 2022
Component Box - a multiplatform server-driven UI framework

Component Box · Component Box is a multiplatform server-driven UI framework. Learn how to use Component Box in your project. Installation implementati

Dropbox 216 Dec 31, 2022
A Lightweight Framework for Code Generating

Codegen A lightweight framework for code generating. Why Codegen? In Java/Kotlin world, engineers usually use JavaPoet or KotlinPoet for code generati

Johnson Lee 38 Dec 20, 2022
Compose RevealSwipe

RevealSwipe Current Compose Version: 1.0.0-beta09 Compose RevealSwipe Swipable in both directions Add to your project Add actual RevealSwipe library:

Alexander Karkossa 109 Dec 28, 2022
PCard Add payment card screen made using JetPack Compose

PCard Add payment card screen made using JetPack Compose Find this repository useful? ❤️ Support it by joining stargazers for this repository. ⭐ And f

Mohamed Elbehiry 61 Dec 16, 2022
Collection of Compose UI Templates

Compose UI Templates This repository contains set of Android compose ui templats which helps you to learn compose in Android. ?? Requirements To try o

Hiten chawda 29 Jan 1, 2023
Sample app to try compose and showcase principles from Composing (UI) beyond the UI

Composing clocks sample app This is a sample app to show how to build an app that follows the practices described in the series of articles Compose (U

Jordi Saumell 84 Dec 15, 2022
Compose app with dummy data which serves as a playground to try out new things in the Android world.

Music Event Manager Compose app with dummy data which serves as a playground to try out new things in the Android world. Description The app primarily

Igor Tepavac 4 Apr 4, 2022
A customizable debug screen to view and edit flags that can be used for development in Jetpack Compose applications

Tweaks A customizable debug screen to view and edit flags that can be used for development in Jetpack Compose applications To include the library add

Guillermo Merino Jiménez 4 Jan 14, 2022
Scrollbar Indicator usign compose

Carousel Carousel is a scroll indicator for ScrollableState composes. Carousel can be vertial or horizontal indicator based on the size provided using

null 58 Oct 19, 2022