Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ndenicolais/darkmode
Android application built with Kotlin and Jetpack Compose that shows how to switch theme between light and dark mode.
https://github.com/ndenicolais/darkmode
android compose dark-mode dark-theme jetpack-compose kotlin
Last synced: 2 days ago
JSON representation
Android application built with Kotlin and Jetpack Compose that shows how to switch theme between light and dark mode.
- Host: GitHub
- URL: https://github.com/ndenicolais/darkmode
- Owner: ndenicolais
- License: mit
- Created: 2023-03-13T16:20:06.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-09-04T14:01:42.000Z (over 1 year ago)
- Last Synced: 2024-04-18T00:15:20.136Z (10 months ago)
- Topics: android, compose, dark-mode, dark-theme, jetpack-compose, kotlin
- Language: Kotlin
- Homepage:
- Size: 1.33 MB
- Stars: 1
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# DarkMode
> Author: Nicola De Nicolais
## 📄 Description
Android application built with Kotlin and Jetpack Compose that shows how to switch theme between light and dark mode. Compose provides the Colors class to model the Material color system and provides builder functions to create sets of light or dark colors. You can create a light set of colors using the baseline values, use lightColors while to create a dark set of colors using the baseline values, use darkColors.
## 🔨 How to install and run the project
Clone this repository :
`
git clone https://github.com/ndenicolais/DarkMode.git
`
Import the project into Android Studio :
1. File -> New -> Import Project
2. Browse to
3. Click "OK"
Create a new virtual device or connect an Android device to your computer.
Click Run to start the project on the selected device.
## 🛠️ Built with
Kotlin
Jetpack Compose
## ✏️ Customization
The Material design system contains 4 types of colors:
#### Primary and secondary colors
- *primary*: Color displayed most frequently across your app’s screens and components.
- *secondary*: Color thtat provides more ways to accent and distinguish your product
***
#### Variants of primary and secondary colors
- *primaryVariant*: Color used to distinguish two elements of the app using the primary color, such as the top app bar and the system bar.
- *secondaryVariant*: Color used to distinguish two elements of the app using the secondary color.
***
#### Additional colors
Colors that refer to: background, surface, and error colors included in additional colors.
- *background*: Color that appears behind the sliding content. It is the background color of the app UI.
- *surface*: Color used on surfaces of components, such as cards, sheets and menus.
- *error*: Color used to indicate error within components, such as text fields.
***
#### On Colors
Colors that are applied to the elements (like text and icons) that appear on top of certain colors (like primary and secondary). There are 5 on colors:
- *onPrimary*: Color used for text and icons displayed on top of the primary color.
- *onSecondary*: Color used for text and icons displayed on top of the secondary color.
- *onBackground*: Color used for text and icons displayed on top of the background color.
- *onSurface*: Color used for text and icons displayed on top of the surface color.
- *onError*: Color used for text and icons displayed on top of the error color.
***
- *isLight* refer to whether the Colors set is considered as a 'light' or 'dark' set of colors.
## Public constructor
```
Colors(
primary: Color,
primaryVariant: Color,
secondary: Color,
secondaryVariant: Color,
background: Color,
surface: Color,
error: Color,
onPrimary: Color,
onSecondary: Color,
onBackground: Color,
onSurface: Color,
onError: Color,
isLight: Boolean
)
```
## 📚 Package Structure
```
com.denicks21.recorder # Root Package
│
├── ui # UI resources folder
│ ├── composables # Composable components folder
| │ ├── BackPress # Component that control and prevent back button action.
| │ ├── Switcher # Component that switch theme.
|
├── theme # Theme components folder
| │ ├── Color # Color palette used by the app.
| │ ├── Shape # Components shapes of Compose used by the app.
| │ ├── Theme # Theme used by the app.
| │ ├── Type # Typography styles for the fonts used by the app.
|
├── MainActivity # Main activity
```
## 📎 Screenshots
