Skip to content

Commit

Permalink
Collapse readme sections
Browse files Browse the repository at this point in the history
  • Loading branch information
@Saltssaumure
Saltssaumure committed Jun 19, 2024
1 parent 85c90d1 commit 884636b
Showing 1 changed file with 43 additions and 26 deletions.
69 changes: 43 additions & 26 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,12 @@

[BetterDiscord]: https://betterdiscord.app/
[Replugged]: https://replugged.dev/
[Vencord]: https://github.com/Vendicated/Vencord
[Vencord]: https://vencord.dev/

[shield-donate]: https://img.shields.io/badge/Donate-ko--fi-orange?style=flat-square&logo=kofi&logoColor=orange
[ko-fi]: https://ko-fi.com/saltssaumure "Buy me a coffee!"

[shield-bd-dl]: https://img.shields.io/github/downloads/Saltssaumure/synthesis-discord-theme/Synthesis.theme.css?color=purple&label=Downloads&style=flat-square
[release-css-gh]: https://img.shields.io/github/downloads/Saltssaumure/synthesis-discord-theme/Synthesis.theme.css?color=purple&label=Downloads&style=flat-square
[shield-asar-dl]: https://img.shields.io/github/downloads/Saltssaumure/synthesis-discord-theme/net.saltssaumure.Synthesis.asar?color=purple&label=Downloads&style=flat-square
[shield-repo-size]: https://img.shields.io/github/repo-size/Saltssaumure/synthesis-discord-theme?label=Repository&style=flat-square

Expand All @@ -22,14 +22,14 @@

[release-bd]: https://betterdiscord.app/theme/?id=770 "BetterDiscord store page"
[release-rp]: https://replugged.dev/store/net.saltssaumure.Synthesis "Replugged store page"
[release-bd-gh]: https://github.com/Saltssaumure/synthesis-discord-theme/releases/latest/download/Synthesis.theme.css "Get latest release"
[release-css-gh]: https://github.com/Saltssaumure/synthesis-discord-theme/releases/latest/download/Synthesis.theme.css "Get latest release"
[release-rp-gh]: https://github.com/Saltssaumure/synthesis-discord-theme/releases/latest/download/net.saltssaumure.Synthesis.asar "Get latest release"

[backgrounds]: https://github.com/Saltssaumure/synthesis-discord-theme/tree/main/backgrounds

# Synthesis Discord Theme
[![Buy me a coffee on ko-fi][shield-donate]][ko-fi]
[![BetterDiscord GitHub downloads][shield-bd-dl]][release-bd-gh]
[![CSS GitHub downloads][release-css-gh]][release-css-gh]
[![Replugged GitHub downloads][shield-asar-dl]][release-rp-gh]
[![Total repository size][shield-repo-size]][github]

Expand All @@ -42,14 +42,19 @@
## Installation

### [BetterDiscord][BetterDiscord]
<details><summary>Click to expand</summary>

1. Download `Synthesis.theme.css`:
- [BetterDiscord store][release-bd]
- [GitHub][release-bd-gh]
- [GitHub][release-css-gh]
2. Place the file in the themes folder:
- `Settings` > `BetterDiscord` > `Themes` > `Open Themes Folder`
3. Toggle on the theme card.
</details>

### [Replugged][Replugged]
<details><summary>Click to expand</summary>

#### Automatic
1. Click to install:
- [Replugged store][release-rp]
Expand All @@ -59,54 +64,65 @@
2. Place the file in the themes folder:
- `Settings` > `Replugged` > `Themes` > `Open Themes Folder`
3. Click `Load Missing Themes` and toggle on the theme card.
</details>

### [Vencord][Vencord]
<details><summary>Click to expand</summary>

#### Local
1. Download `Synthesis.theme.css`:
- [BetterDiscord store][release-bd]
- [GitHub][release-bd-gh]
- [GitHub][release-css-gh]
2. Place the file in the themes folder:
- `Settings` > `Vencord` > `Themes` > `Local Themes` > `Open Themes Folder`
3. Click `Load missing Themes` and toggle on the theme card.
#### Online
1. Paste the link in `Settings` > `Vencord` > `Themes` > `Online Themes`:
- `https://saltssaumure.github.io/synthesis-discord-theme/Synthesis.theme.css`
</details>

## Customisation

| Description | Variable name | Valid values | Default value |
| -------------------------- | --------------------------------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| Background image | `--synth-background-image` | Any image link encased in `url()`. [Suggested images][backgrounds]. | `url(https://saltssaumure.github.io/synthesis-discord-theme/backgrounds/default.avif)` |
| Backdrop opacity | `--synth-backdrop-opacity` | A number `0`-`1`. | `0.3` |
| Overlay tint colour | `--synth-overlay-color` | Space-separated [`RGB`][css-color] value. | `255 165 0 ` |
| CRT scanline colour | `--synth-crt-light`, `--synth-crt-dark` | Space-separated [`RGB`][css-color] value. | `255 255 255`, `0 0 0` |
| &#9888; CRT flicker effect | `--synth-crt-flicker` | `flicker` (on) or `none` (off) | `none` |
| Background colour | `--synth-color-background` | Space-separated [`RGB`][css-color] value. | `20 6 36 ` |
| Foreground colour | `--synth-color-foreground` | Space-separated [`RGB`][css-color] value. | `255 165 0 ` |
| Shadow colour | `--synth-color-shadow` | Space-separated [`RGB`][css-color] value. | `0 0 128` |
| Button colour | `--synth-color-button` | Space-separated [`RGB`][css-color] value. | `84 63 251` |
| Highlight colour | `--synth-color-pop` | Space-separated [`RGB`][css-color] value. | `206 63 251` |
| Discord colour | `--synth-color-blurple` | Space-separated [`RGB`][css-color] value. | `88 101 242` |
| Text colour | `--synth-color-text` | Space-separated [`RGB`][css-color] value. | `255 255 255` |
| DND colour | `--synth-color-red` | Space-separated [`RGB`][css-color] value. | `243 67 131` |
| Idle colour | `--synth-color-yellow` | Space-separated [`RGB`][css-color] value. | `255 165 0 ` |
| Online colour | `--synth-color-green` | Space-separated [`RGB`][css-color] value. | `52 172 140` |
| Streaming colour | `--synth-color-twitch` | Space-separated [`RGB`][css-color] value. | `89 54 149` |
| Variable name | Description | Valid values | Default value |
| --------------------------------------- | -------------------------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
| `--synth-background-image` | Background image | Image link encased in `url()` or `none`. [Suggested images][backgrounds]. | `url(https://saltssaumure.github.io/synthesis-discord-theme/backgrounds/default.avif)` |
| `--synth-backdrop-opacity` | Backdrop opacity | A number `0`-`1`. | `0.3` |
| `--synth-overlay-color` | Overlay tint colour | Space-separated [`RGB`][css-color] value. | `255 165 0 ` |
| `--synth-crt-light`, `--synth-crt-dark` | CRT scanline colour | Space-separated [`RGB`][css-color] value. | `255 255 255`, `0 0 0` |
| `--synth-crt-flicker` | &#9888; CRT flicker effect | `flicker` (on) or `none` (off) | `none` |
| `--synth-color-background` | Background colour | Space-separated [`RGB`][css-color] value. | `20 6 36 ` |
| `--synth-color-foreground` | Foreground colour | Space-separated [`RGB`][css-color] value. | `255 165 0 ` |
| `--synth-color-shadow` | Shadow colour | Space-separated [`RGB`][css-color] value. | `0 0 128` |
| `--synth-color-button` | Button colour | Space-separated [`RGB`][css-color] value. | `84 63 251` |
| `--synth-color-pop` | Highlight colour | Space-separated [`RGB`][css-color] value. | `206 63 251` |
| `--synth-color-blurple` | Discord colour | Space-separated [`RGB`][css-color] value. | `88 101 242` |
| `--synth-color-text` | Text colour | Space-separated [`RGB`][css-color] value. | `255 255 255` |
| `--synth-color-red` | DND colour | Space-separated [`RGB`][css-color] value. | `243 67 131` |
| `--synth-color-yellow` | Idle colour | Space-separated [`RGB`][css-color] value. | `255 165 0 ` |
| `--synth-color-green` | Online colour | Space-separated [`RGB`][css-color] value. | `52 172 140` |
| `--synth-color-twitch` | Streaming colour | Space-separated [`RGB`][css-color] value. | `89 54 149` |

&#9888; This is a fast flickering effect and may not be suitable for those with photosensitive epilepsy.

### BetterDiscord
<details><summary>Click to expand</summary>

1. Open `Settings` > `BetterDiscord` > `Themes`.
2. Click the pencil icon on this theme.
3. Edit the variable values and save changes.
</details>

### Replugged
<details><summary>Click to expand</summary>

1. Enable `Automatically Apply Quick CSS` in `Settings` > `Replugged` > `General`.
1. Open `Settings` > `Replugged` > `Quick CSS`.
3. Copy and paste line 15-36 of [`Synthesis.theme.css`][.theme.css].
3. Edit the variable values and save.
</details>

### Vencord
<details><summary>Click to expand</summary>

#### Local
2. `Open Themes Folder` in `Settings` > `Vencord` > `Themes` > `Local Themes`
3. Open `Synthesis.theme.css` with your favourite text editor.
Expand All @@ -115,9 +131,10 @@
1. `Enable Custom CSS` in `Settings` > `Vencord` > `Vencord` and click `Open QuickCSS File`.
2. Copy and paste lines 15-36 of [`Synthesis.theme.css`][.theme.css].
3. Edit the variable values.
</details>

## License
Copyright (c) 2019-2024 Saltssaumure
Copyright (c) 2022-2024 Saltssaumure

This theme is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.

Expand Down

0 comments on commit 884636b

Please sign in to comment.