release v3.0

README.md

@@ -1,10 +1,12 @@
 # gitea-github-theme
-Opinionated GitHub-based light and dark themes for Gitea
 
-Created and tested with Gitea v1.15.
+**Opinionated** GitHub-based light and dark themes for Gitea including an automatic theme switch option.
+
+Created and tested with Gitea v1.15 - 1.17.
 The theme might work with future versions though Gitea devs might change some CSS classes in the meantime and things might potentially look odd - just try yourself :)
 
 I might update the theme over time to fix oversights and other issues - no guarantee though.
+
 ## Installation
 
 1. If you do not have admin access to a Gitea instance, you can use the [Stylus](https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne/related) browser extension and use the CSS provided in this repo for the Gitea URL
@@ -14,16 +16,67 @@ I might update the theme over time to fix oversights and other issues - no guara
    3. Now users can select this theme in their settings under "account"
    4. (optional) If you want to make this theme the default of your instance, set it in `DEFAULT_THEME` in `app.ini`
 
+## Using automatic theme switching based on system preference
+
+To use automatic theme switching, add `theme-github-auto.css` into your respective `themes` folder as described above.
+This file contains both light and dark styles and selects the respective one based on the system preference selected by the user via the `@media (prefers-color-scheme:` CSS selector (tested on macOS).
+
+For some reasons using `@imports` does not work and hence the file contains the c/p content of both the light and dark themes together.
+If this is somehow possible and I did not managed to get it configured, please let me know!
+
 ## Changes to default Gitea theme
 
 - Aligned primary green, grey, red and blue colors with GitHub
 - Aligned `border-radius` with GitHub
 - Related theme by removing a lot of hover colors and dominant button background-colors
 - Aligned markup background to GitHub's value
+- Decreased navbar height and font size
+- Many small overrides of colors and font-sizes
+
+## Helm chart instructions
+
+To use custom themes with the [Gitea helm chart](https://gitea.com/gitea/helm-chart):
+
+1. Create a secret containing the CSS files (here's an example via `terraform`, plain k8s secrets will also work)
+
+```hcl
+resource "kubernetes_secret" "gitea-themes" {
+  metadata {
+    name      = "gitea-themes"
+    namespace = "gitea"
+  }
+
+  data = {
+    "theme-github.css"      = "${file("files/gitea/gitea-github-theme-light.css")}"
+    "theme-github-dark.css" = "${file("files/gitea/gitea-github-theme-dark.css")}"
+    "theme-github-auto.css" = "${file("files/gitea/gitea-github-theme-auto.css")}"
+  }
+
+  type = "Opaque"
+}
+```
+
+2. Mount the secret via `extraVolumes` in `values.yaml`:
+
+```yml
+extraVolumes:
+  - name: gitea-themes
+    secret:
+      secretName: gitea-themes
+```
+
+3. Add the theme options into the config in `values.yaml`:
+
+```yml
+gitea:
+  config:
+    ui:
+      DEFAULT_THEME: github-auto
+      THEMES: auto,gitea,arc-green,github,github-dark,github-auto
+```
 
 ## Screenshots
 
-|                                |                                |
-| :----------------------------: | :----------------------------: |
-|   ![](figs/screenshot1.png)    |   ![](figs/screenshot2.png)    |
-| ![](figs/screenshot-dark1.png) | ![](figs/screenshot-dark2.png) |
+![](figs/screenshot1.png)
+
+![](figs/screenshot-dark1.png)