https://github.com/barbwire-1/fitbit-color-themes

simple automated use of color themes in fitbit OS
https://github.com/barbwire-1/fitbit-color-themes

colorthemes fitbit settings

Last synced: 3 days ago
JSON representation

simple automated use of color themes in fitbit OS

• Host: GitHub
• URL: https://github.com/barbwire-1/fitbit-color-themes
• Owner: BarbWire-1
• License: mit
• Created: 2021-09-24T20:11:22.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2021-12-09T08:34:19.000Z (almost 3 years ago)
• Last Synced: 2023-03-09T23:32:44.503Z (over 1 year ago)
• Topics: colorthemes, fitbit, settings
• Language: TypeScript
• Homepage:
• Size: 202 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# fitbit-color-themes 🎨

## Description:

This code automates the use of color-themes in `fitbit` apps.



You only need to define your themes and add a corresponding class to your elements, you want those colors be assigned to.

The last chosen theme gets saved and reused on reload of the app.

The first color of each theme gets written to your app's settings-page.



This repo is written in `ts` for `SDK 5.0.2`.


A `javascript` version will follow, or you might adjust the code by removing types.



---

## Installation:

- **app:**


Copy the folder `app/color_themes` into your app directory



app/index:


```javascript

import {initColorThemes} from "./color_themes/applyColors";

initColorThemes();

```

- **common:**


Copy the folder `common/color_themes` into your common directory.


- **companion:**


Integrate the code in `companion/index.ts` into your index file.


- **settings:**


Integrate the code from `settings/index.tsx` into your index file. 



*(You can also download a template and start your project from there.)*



---

## Usage:

Define your array of color-themes in `common/color_themes/colorThemes.ts` like in the following example (no matter how many themes, or how many colors per theme):

```javascript

const themes :string[][] = 

[

    ['tomato', 'blue', 'yellow'],

    ['sandybrown', 'white', 'grey'],

    ['gold', 'limegreen', '#000000'],

    ['aquamarine', 'turquoise', 'yellow'],

    ['deepskyblue', 'blue', 'red'],

    ['plum', 'magenta','white'],

];

```




To store/restore the last chosen color-theme, it gets written to a *.cbor file in 

`common/color_themes/shared_preferences.js`

. Give this file a unique name.

*(I here took the UUID of my app + _fct.cbor.)*




```javascript

const FILE_NAME = "f100f76b-0a9e-488f-ba35-d1a8531a2d4b_fct.cbor";

```




The elements you want to be filled with a color of your themes need to be classed in `resources/index.view` like the following example:

```javascript

    

    

    

 

```




Now having x colors per theme, all fills get applied to the elements with

`class = "'color' + (0 to x-1)"`




The first color of each theme gets automatically implied in your app's setting-page - and done.




---




Please shout, if you have any issues or suggestions. And now...





Play it colorful! 🥳