https://github.com/tommy141x/appwrite-theming

Theme your Appwrite instance to match your brand!
https://github.com/tommy141x/appwrite-theming

appwrite theme themer

Last synced: 10 days ago
JSON representation

Theme your Appwrite instance to match your brand!

• Host: GitHub
• URL: https://github.com/tommy141x/appwrite-theming
• Owner: tommy141x
• Created: 2024-11-12T20:09:12.000Z (2 months ago)
• Default Branch: latest
• Last Pushed: 2024-11-12T23:12:09.000Z (2 months ago)
• Last Synced: 2024-11-12T23:18:51.085Z (2 months ago)
• Topics: appwrite, theme, themer
• Language: CSS
• Homepage: https://tommy141x.github.io/appwrite-theming/
• Size: 646 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![Banner](https://tommy141x.github.io/appwrite-theming/mockups/banner.png)

# 🎨 Theming for [Appwrite](https://appwrite.io/)

Want to personalize your Appwrite instance without diving into the source code? I created a CSS file that can be injected server-side to style your Appwrite console in line with your brand.

![Screenshot](https://tommy141x.github.io/appwrite-theming/mockups/cyan.png)

---

## ⚙️ Setup & Usage

### Nginx Reverse Proxy

To apply the theme, add the following snippet inside the `location` block for the Appwrite console (`/console`) in your `nginx` configuration. If you're using **Nginx Proxy Manager**, you can do this by clicking the gear icon next to the location.

```nginx

proxy_set_header Accept-Encoding "";

    sub_filter '' '

        

            :root {

                --primary-color-hue: 205deg;

                --primary-color-saturation: 100%;

                --primary-color-brightness: 55%;

                --background-color-hue: 0;

                --background-color-saturation: 0%;

                --background-color-brightness: 55%;

                --logo-image: url("https://api.timmygstudios.com/v1/storage/buckets/images/files/logo/view?project=tore");

                --background-image: url("https://api.timmygstudios.com/v1/storage/buckets/images/files/dev09242024header/view?project=tore");

            }

        

        

    ';

    sub_filter_once on;

    sub_filter_types text/html;

```

Customize ``--primary-color``, ``--background-color``, ``--logo-image``, and ``--background-image`` to match your liking (background image appears on the authentication screen).

# 📸 More Screenshots

![Screenshot](https://tommy141x.github.io/appwrite-theming/mockups/dark-green.png)

![Screenshot](https://tommy141x.github.io/appwrite-theming/mockups/dark-blue.png)

![Screenshot](https://tommy141x.github.io/appwrite-theming/mockups/login.png)

# 💡 Notes

This approach may also work on other servers like Caddy or Apache, though I haven't tested them yet. If you have improvements, issues, or suggestions, feel free to open a pull request or start a discussion.