refact0r-midnight-discord/themes/README.md

<img width=800 src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/preview.png">

# midnight

a dark, customizable discord theme.

<img width=800 src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/midnight.png">

<img width=800 src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/default.png">

<img width=800 src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/background.png">

## install

### vencord/betterdiscord (or any client that supports theme files)

1. download the theme file, [`midnight.theme.css`](https://github.com/refact0r/midnight-discord/blob/master/themes/midnight.theme.css). (there should be a download button at the top right of the page)
2. drag `midnight.theme.css` into your theme folder. (there should be a button to open the theme folder in theme settings)
3. (optional) customize the theme by opening `midnight.theme.css` and editing the CSS variables within.

### install through link

add `https://refact0r.github.io/midnight-discord/build/midnight.css` to your theme import links. you will need to copy the theme variables to your quickcss in order to customize the theme.

## flavors

flavors are preset customizations for midnight.

to use a flavor, follow the install instructions above but download the flavor theme file of your choice instead of `midnight.theme.css`. click a flavor name below to open its theme file, or click a preview image to view it at full size.

<table>
    <tr>
        <td width="33%">
            <a href="https://github.com/refact0r/midnight-discord/blob/master/themes/flavors/midnight-default.theme.css"><b>default discord</b></a><br>
            <a href="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/default.png"><img src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/thumbs/default.jpg"></a>
        </td>
        <td width="33%">
            <a href="https://github.com/refact0r/midnight-discord/blob/master/themes/flavors/midnight-light.theme.css"><b>light</b></a><br>
            <a href="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/light.png"><img src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/thumbs/light.jpg"></a>
        </td>
        <td width="33%">
            <a href="https://github.com/refact0r/midnight-discord/blob/master/themes/flavors/midnight-auto.theme.css"><b>auto</b></a> (follows system theme)<br>
            <a href="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/auto.png"><img src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/thumbs/auto.jpg"></a>
        </td>
    </tr>
    <tr>
        <td width="33%">
            <a href="https://github.com/refact0r/midnight-discord/blob/master/themes/flavors/midnight-background.theme.css"><b>background</b></a><br>
            <a href="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/background.png"><img src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/thumbs/background.jpg"></a>
        </td>
        <td width="33%">
            <a href="https://github.com/refact0r/midnight-discord/blob/master/themes/flavors/midnight-catppuccin-mocha.theme.css"><b>catppuccin mocha</b></a><br>
            <a href="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/catppuccin-mocha.png"><img src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/thumbs/catppuccin-mocha.jpg"></a>
        </td>
        <td width="33%">
            <a href="https://github.com/refact0r/midnight-discord/blob/master/themes/flavors/midnight-catppuccin-macchiato.theme.css"><b>catppuccin macchiato</b></a><br>
            <a href="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/catppuccin-macchiato.png"><img src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/thumbs/catppuccin-macchiato.jpg"></a>
        </td>
    </tr>
    <tr>
        <td width="33%">
            <a href="https://github.com/refact0r/midnight-discord/blob/master/themes/flavors/midnight-nord.theme.css"><b>nord</b></a><br>
            <a href="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/nord.png"><img src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/thumbs/nord.jpg"></a>
        </td>
        <td width="33%">
            <a href="https://github.com/refact0r/midnight-discord/blob/master/themes/flavors/midnight-rose-pine.theme.css"><b>rose pine</b></a><br>
            <a href="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/rose-pine.png"><img src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/thumbs/rose-pine.jpg"></a>
        </td>
        <td width="33%">
            <a href="https://github.com/refact0r/midnight-discord/blob/master/themes/flavors/midnight-rose-pine-moon.theme.css"><b>rose pine moon</b></a><br>
            <a href="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/rose-pine-moon.png"><img src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/thumbs/rose-pine-moon.jpg"></a>
        </td>
    </tr>
    <tr>
        <td width="33%">
            <a href="https://github.com/refact0r/midnight-discord/blob/master/themes/flavors/midnight-tokyo-night.theme.css"><b>tokyo night</b></a><br>
            <a href="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/tokyo-night.png"><img src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/thumbs/tokyo-night.jpg"></a>
        </td>
        <td width="33%">
            <a href="https://github.com/refact0r/midnight-discord/blob/master/themes/flavors/midnight-lilypichu.theme.css"><b>lilypichu</b></a><br>
            <a href="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/lilypichu.png"><img src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/thumbs/lilypichu.jpg"></a>
        </td>
        <td width="33%">
            <a href="https://github.com/refact0r/midnight-discord/blob/master/themes/flavors/midnight-vencord.theme.css"><b>vencord</b></a><br>
            <a href="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/vencord.png"><img src="https://raw.githubusercontent.com/refact0r/midnight-discord/master/assets/flavors/thumbs/vencord.jpg"></a>
        </td>
    </tr>
</table>

## discord server

need help? want to give feedback? want to be notified about upcoming changes? join <https://discord.gg/nz87hXyvcy>

## contributing

this theme uses a dev script to check for changes in the /src .css files and combine them into a build file in /build. note that both the /src files and the /build file are tracked in git, so any changes you contribute should exist in both places!!

to run locally:

1. clone the repository.
2. run `npm i`.
3. create a `.env` file in the project root with the paths of any local theme files you want to update (comma separated)

```
DEV_OUTPUT_PATH=C:\Users\USERNAME\AppData\Roaming\Vencord\themes\midnight-dev.theme.css
```

1. run `npm run dev`.
2. make changes to any file in `/src` or the main theme file. the local theme files you listed will automatically be updated, along with the build file in `/build`.
3. make a pull request with your changes!

## credits

original design inspired by <https://github.com/schnensch0/zelk>

window controls inspired by <https://github.com/Dyzean/Tokyo-Night>

thanks to all the [contributors](https://github.com/refact0r/midnight-discord/graphs/contributors)!