# ark_styles

**Repository Path**: guozonghao11/ark_styles

## Basic Information

- **Project Name**: ark_styles
- **Description**: ArkTS Applications Theme Customization Engine
- **Primary Language**: TypeScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 16
- **Created**: 2024-04-18
- **Last Updated**: 2024-04-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ark_styles

## Introduction
ArkStyles is an ArkTS-based user interface (UI) framework that simplifies ArkTS application customization by providing a rich set of styles for its built-in components and a set of custom-styled components to support specific use cases in applications.

* [Theme Management](doc/ts-arktheme.md)
* [Theme Semantic Tokens](doc/ts-arktokens.md)
* [Built-in Components Styles](doc/ts-arkstyles.md)
* [Demo Application](samples/demo/README.md)
* [XTS Tests](tests/xts/README.md)

## Directory Structure
The following figure shows the directory structure.

```
.../ark_styles
├── doc                         # Documentation folder
│   ├── assets                  # Assets folder used for documentation
│   ├── styles                  # Components Styles documentation folder
│   ├── theme                   # Theme Management documentation folder
│   ├── tokens                  # Theme Semantic Tokens documentation folded
│   └── .....                   # Other documentation pages
├── engine                      # Engine folder
│   └── arkStyles.js            # Latest arkStyles.js file generated by the compilation script
├── samples                     # Sample applications folder
│   └── demo                    # Main demo app used to test Theme
├── src                         # Library source files folder
│   ├── styles                  # Components styles folder
│   │   ├── button              # Button style folder
│   │   ├── checkbox            # Checkbox style folder
│   │   └── .....               # Other Components styles
│   ├── themes                  # Theme Management source files folder
│   │   ├── system              # System Theme implementation
│   │   ├── with_theme          # WithTheme container implementation
│   │   ├── ArkColorsImpl.ts    # Colors Semantic tokens implementation
│   │   ├── ArkThemeControl.ts  # ThemeControl APIs implementation
│   │   ├── ArkThemeImpl.ts     # Theme instance implementation
│   │   ├── ArkThemeMap.ts      # Theme Map implementation
│   │   └── .....               # Other files related Theme Management
│   ├── utility                 # Utility classes
│   └── import.ts               # SDK classes imports
├── tests                       # Tests folder
│   └── xts                     # XTS tests
├── BUILD.gn                    # Script used for build targets
├── make_ark_styles.sh          # Compilation Script
├── package.json                # Config used to sync dependencies with 'npm install'
├── tsconfig.json               # Config file used to build arkStyle.js
└── .....
```

## How to build OpenHarmony SDK with ark_styles
1) `repo init -u https://gitee.com/ilyaerokhin/manifests.git -b theme_dev -m default.xml --no-repo-verify`
2) `repo sync -c --no-tags -j 8`  
3) `repo forall -j 8 -c 'git lfs pull'`
4) `build/prebuilts_download.sh`  
5) `./build.sh --product-name ohos-sdk --gn-args sdk_platform=win --ccache`

## How to re-build OpenHarmony with updated arkStyles.js
1) Build **OpenHarmony SDK with ark_styles** support (see previous instruction).
2) `cd foundation/arkui/ace_engine/frameworks/bridge/declarative_frontend/ark_styles`
3) *Optional*, run before first build only: `npm install`
4) Execute script: `./make_ark_styles.sh` *Note*: be sure you have **tsc** utility.
5) Use **-d** option for debug build if you need to keep *console.log* lines: `./make_ark_styles.sh -d`.
6) Re-build SDK second time with the command: `./build.sh --product-name ohos-sdk --gn-args sdk_platform=win --ccache`

## How to switch on ArkStyles for built-in components
Built-in components styles are switched off temporarily for now during ark_styles development. To switch on styles for built-in components insert `ThemeControl.enableTheme(true)` to the beginning of the *Index.ets* (start page) of your application. We plan to switch on styles for built-in components by default when ark_styles is released.