Skip to content

Commit

Permalink
Update readme and getting started
Browse files Browse the repository at this point in the history
  • Loading branch information
TilmanGriesel committed Dec 1, 2024
1 parent a845c3c commit 8aac27e
Show file tree
Hide file tree
Showing 3 changed files with 24 additions and 16 deletions.
30 changes: 19 additions & 11 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@

## Installation

### Step 1: Install HACS
#### Step 1: Install HACS
If you haven't already, [install HACS](https://hacs.xyz/docs/use/) by following the official guide.

### Step 2: Add the Graphite Theme Repository
#### Step 2: Add the Graphite Theme Repository

[![Open Graphite in your Home Assistant instance](https://my.home-assistant.io/badges/hacs_repository.svg)](https://my.home-assistant.io/redirect/hacs_repository/?owner=TilmanGriesel&repository=graphite)

#### Alternatively
##### Alternatively
1. Open the HACS interface in Home Assistant.
2. Search for **Graphite Theme** or use the direct link below:
3. Click **Install** to add the theme to your setup.
Expand All @@ -34,16 +34,16 @@ frontend:
themes: !include_dir_merge_named themes
```
### Step 4: Restart Home Assistant
#### Step 4: Restart Home Assistant
Restart your Home Assistant instance to apply changes.
### Step 5: Select the Graphite Theme
#### Step 5: Select the Graphite Theme
1. Go to your **User Profile** in Home Assistant.
2. Under **Themes**, select `Graphite` (Light or Dark) from the dropdown menu.


## Manual Installation
### Manual Installation
For manual installation, you can follow these steps:

1. Download and copy the `themes` folder into your Home Assistant configuration directory.
Expand All @@ -55,21 +55,29 @@ For manual installation, you can follow these steps:
3. Restart Home Assistant.
4. Choose the `Graphite` theme from your profile.

## Personalize Graphite
---

### Personalize Graphite
Customize the Graphite theme's primary color and more without needing to fork the project by using the [Graphite Theme Patcher](https://graphite.tilmangriesel.com/features/graphite-theme-patcher.html). This tool is designed for advanced users with technical expertise and experience in script and config modification. For detailed setup instructions, refer to the patcher's README.

## Theme Development Kit
---

### Theme Development Kit
I've created token abstraction and a script to help maintain Graphite's consistency across theme variants and simplify updates. This setup can also serve as a great starting point for building your own themes in no time. [Theme Development Kit](https://graphite.tilmangriesel.com/features/graphite-theme-development-kit.html)

## Examples
---

### Examples
If you're curious about the cards from my screenshot, you can [check out my examples](https://graphite.tilmangriesel.com/guides/card-examples.html).

## Personal note
---

### Personal note
Hi there, I'm Tilman, nice to meet you! I'm a product designer and software engineer with a love for blending technology, art, design, and open-source projects. I live in a cozy 16th-century home that I'm gradually turning into a smarter, more connected space.

I started designing this theme in 2022 to make our smart home more intuitive and visually harmonious for my partner Sophia and me. The goal was to create an experience that's both user-friendly and aesthetically pleasing, without needing extra complexity or plugins.

I hope this theme makes your Home Assistant experience even better! If you love it, leaving a star would mean a lot and help others find it too.
I hope this theme makes your Home Assistant experience even better! If you love it, [leaving a star](https://github.com/TilmanGriesel/graphite) would mean a lot and help others find it too.

[!["Buy Me A Coffee"](https://www.buymeacoffee.com/assets/img/custom_images/yellow_img.png)](https://www.buymeacoffee.com/griesel)

Expand Down
8 changes: 4 additions & 4 deletions docs/.vitepress/theme/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -186,14 +186,14 @@
* -------------------------------------------------------------------------- */

:root {
--vp-c-text-1: rgba(60, 60, 60);
--vp-c-text-2: rgba(60, 60, 60, 0.78);
--vp-c-text-1: rgba(50, 50, 50, 0.98);
--vp-c-text-2: rgba(60, 60, 60, 0.85);
--vp-c-text-3: rgba(60, 60, 60, 0.56);
}

.dark {
--vp-c-text-1: rgba(240, 240, 240, 0.86);
--vp-c-text-2: rgba(240, 240, 240, 0.6);
--vp-c-text-1: rgba(255, 255, 255, 1);
--vp-c-text-2: rgba(240, 240, 240, 0.75);
--vp-c-text-3: rgba(240, 240, 240, 0.38);
}

Expand Down
2 changes: 1 addition & 1 deletion docs/guides/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,4 @@ For manual installation, you can follow these steps:

---

Enjoy the Graphite theme? 🌟 Consider [leaving a star](https://github.com/TilmanGriesel/graphite/stargazers) on GitHub to support its development!
Enjoy the Graphite theme? 🌟 Consider [leaving a star](https://github.com/TilmanGriesel/graphite) on GitHub to support its development!

0 comments on commit 8aac27e

Please sign in to comment.