feat!: support auto mode (#42)

* feat!: support auto mode * chore: try to fix formatting * docs: restructure
catppuccin · Oct 6, 2024 · 0fbb02f · 0fbb02f
1 parent b0c434b
commit 0fbb02f
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 135 deletions.
diff --git a/README.md b/README.md
@@ -1,18 +1,18 @@
 <h3 align="center">
-	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
-	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
-	Catppuccin for <a href="https://gitea.io">Gitea</a>
-	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+ <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/logos/exports/1544x1544_circle.png" width="100" alt="Logo"/><br/>
+ <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
+ Catppuccin for <a href="https://gitea.io">Gitea</a>
+ <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/misc/transparent.png" height="30" width="0px"/>
 </h3>
 
 <p align="center">
-	<a href="https://github.com/catppuccin/gitea/stargazers"><img src="https://img.shields.io/github/stars/catppuccin/gitea?colorA=363a4f&colorB=b7bdf8&style=for-the-badge"></a>
-	<a href="https://github.com/catppuccin/gitea/issues"><img src="https://img.shields.io/github/issues/catppuccin/gitea?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
-	<a href="https://github.com/catppuccin/gitea/contributors"><img src="https://img.shields.io/github/contributors/catppuccin/gitea?colorA=363a4f&colorB=a6da95&style=for-the-badge"></a>
+ <a href="https://github.com/catppuccin/gitea/stargazers"><img src="https://img.shields.io/github/stars/catppuccin/gitea?colorA=363a4f&colorB=b7bdf8&style=for-the-badge"></a>
+ <a href="https://github.com/catppuccin/gitea/issues"><img src="https://img.shields.io/github/issues/catppuccin/gitea?colorA=363a4f&colorB=f5a97f&style=for-the-badge"></a>
+ <a href="https://github.com/catppuccin/gitea/contributors"><img src="https://img.shields.io/github/contributors/catppuccin/gitea?colorA=363a4f&colorB=a6da95&style=for-the-badge"></a>
 </p>
 
 <p align="center">
-	<img src="assets/preview.webp"/>
+ <img src="assets/preview.webp"/>
 </p>
 
 ## Previews
@@ -36,29 +36,45 @@
 
 ## Usage
 
-1. Download the [latest release](https://github.com/catppuccin/gitea/releases/latest).
-2. Place the CSS files in `$GITEA_CUSTOM/public/assets/css` if using Gitea 1.21.0 or newer and `$GITEA_CUSTOM/public/css` otherwise.
-3. Add the themes to your `app.ini`. See the [Gitea documentation](https://docs.gitea.io/en-us/customizing-gitea/#customizing-the-look-of-gitea).\
-   Here's a snippet if you want to offer all Flavor-Accent combinations:
+> [!IMPORTANT]  
+> Gitea 1.20 or newer is required for this theme.
+
+1. Download the [latest GitHub release](https://github.com/catppuccin/gitea/releases/latest).
+2. Place the CSS files inside Gitea's configuration directory:
+   - Gitea 1.21.0 or newer: `$GITEA_CUSTOM/public/assets/css`
+   - Otherwise: `$GITEA_CUSTOM/public/css`
+3. Add the themes to your `app.ini` as shown in the "[Example
+   Configurations](#example-configurations)" section. For further information on customizing Gitea, see the [Gitea documentation](https://docs.gitea.com/next/administration/customizing-gitea#customizing-the-look-of-gitea).
+4. Restart your Gitea instance.
+5. Select the theme in Gitea > Account > Settings > Appearance.
+
+### Example Configurations
+
+#### Flavor-Accent
 
-<details>
-<summary>app.ini</summary>
 <!-- AUTOGEN:INI START -->
 <!-- the following section is auto-generated, do not edit -->
 
-```
+```ini
 [ui]
 THEMES = catppuccin-latte-rosewater,catppuccin-latte-flamingo,catppuccin-latte-pink,catppuccin-latte-mauve,catppuccin-latte-red,catppuccin-latte-maroon,catppuccin-latte-peach,catppuccin-latte-yellow,catppuccin-latte-green,catppuccin-latte-teal,catppuccin-latte-sky,catppuccin-latte-sapphire,catppuccin-latte-blue,catppuccin-latte-lavender,catppuccin-frappe-rosewater,catppuccin-frappe-flamingo,catppuccin-frappe-pink,catppuccin-frappe-mauve,catppuccin-frappe-red,catppuccin-frappe-maroon,catppuccin-frappe-peach,catppuccin-frappe-yellow,catppuccin-frappe-green,catppuccin-frappe-teal,catppuccin-frappe-sky,catppuccin-frappe-sapphire,catppuccin-frappe-blue,catppuccin-frappe-lavender,catppuccin-macchiato-rosewater,catppuccin-macchiato-flamingo,catppuccin-macchiato-pink,catppuccin-macchiato-mauve,catppuccin-macchiato-red,catppuccin-macchiato-maroon,catppuccin-macchiato-peach,catppuccin-macchiato-yellow,catppuccin-macchiato-green,catppuccin-macchiato-teal,catppuccin-macchiato-sky,catppuccin-macchiato-sapphire,catppuccin-macchiato-blue,catppuccin-macchiato-lavender,catppuccin-mocha-rosewater,catppuccin-mocha-flamingo,catppuccin-mocha-pink,catppuccin-mocha-mauve,catppuccin-mocha-red,catppuccin-mocha-maroon,catppuccin-mocha-peach,catppuccin-mocha-yellow,catppuccin-mocha-green,catppuccin-mocha-teal,catppuccin-mocha-sky,catppuccin-mocha-sapphire,catppuccin-mocha-blue,catppuccin-mocha-lavender
 ```
 
 <!-- AUTOGEN:INI END -->
-</details>
 
-4. Restart your Gitea instance.
-5. Select the theme in Gitea > Account > Settings > Appearance.
+#### Auto
+
+This ensures that the theme automatically switches between light (latte) and dark (mocha) mode.
+
+<!-- AUTOGEN:INI-AUTO START -->
+<!-- the following section is auto-generated, do not edit -->
+
+```ini
+[ui]
+THEMES = catppuccin-rosewater-auto,catppuccin-flamingo-auto,catppuccin-pink-auto,catppuccin-mauve-auto,catppuccin-red-auto,catppuccin-maroon-auto,catppuccin-peach-auto,catppuccin-yellow-auto,catppuccin-green-auto,catppuccin-teal-auto,catppuccin-sky-auto,catppuccin-sapphire-auto,catppuccin-blue-auto,catppuccin-lavender-auto
+```
 
-> **Note**\
-> Gitea >1.20 is required for this theme.
+<!-- AUTOGEN:INI-AUTO END -->
 
 ## 💝 Thanks to
 
@@ -67,13 +83,13 @@ THEMES = catppuccin-latte-rosewater,catppuccin-latte-flamingo,catppuccin-latte-p
 &nbsp;
 
 <p align="center">
-	<img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
+ <img src="https://raw.githubusercontent.com/catppuccin/catppuccin/main/assets/footers/gray0_ctp_on_line.svg?sanitize=true" />
 </p>
 
 <p align="center">
-	Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
+ Copyright &copy; 2021-present <a href="https://github.com/catppuccin" target="_blank">Catppuccin Org</a>
 </p>
 
 <p align="center">
-	<a href="https://github.com/catppuccin/catppuccin/blob/main/LICENSE"><img src="https://img.shields.io/static/v1.svg?style=for-the-badge&label=License&message=MIT&logoColor=d9e0ee&colorA=363a4f&colorB=b7bdf8"/></a>
+ <a href="https://github.com/catppuccin/catppuccin/blob/main/LICENSE"><img src="https://img.shields.io/static/v1.svg?style=for-the-badge&label=License&message=MIT&logoColor=d9e0ee&colorA=363a4f&colorB=b7bdf8"/></a>
 </p>
diff --git a/build.ts b/build.ts
@@ -3,39 +3,24 @@
 import * as path from "std/path";
 import * as sass from "sass";
 import ctp from "npm:@catppuccin/palette";
+import { updateReadme } from "@catppuccin/deno-lib";
 
-const builder = (flavor: string, accent: string) => `
+const __dirname = path.dirname(path.fromFileUrl(import.meta.url));
+const flavors = Object.keys(ctp.variants);
+const accents = Object.keys(ctp.labels).slice(0, 14);
+
+Deno.mkdirSync(path.join(__dirname, "dist"), { recursive: true });
+
+const sassBuilder = (flavor: string, accent: string) => `
 @import "@catppuccin/palette/scss/${flavor}";
 $accent: $${accent};
 $isDark: ${flavor !== "latte"};
 @import "theme";
 `;
 
-const __dirname = path.dirname(path.fromFileUrl(import.meta.url));
-
-const accents = [
-  "rosewater",
-  "flamingo",
-  "pink",
-  "mauve",
-  "red",
-  "maroon",
-  "peach",
-  "yellow",
-  "green",
-  "teal",
-  "sky",
-  "sapphire",
-  "blue",
-  "lavender",
-];
-
-Deno.mkdirSync(path.join(__dirname, "dist"), { recursive: true });
-
-const flavors = Object.keys(ctp.variants);
 for (const flavor of flavors) {
   for (const accent of accents) {
-    const input = builder(flavor, accent);
+    const input = sassBuilder(flavor, accent);
     const result = sass.compileString(input, {
       loadPaths: [
         path.join(__dirname, "src"),
@@ -50,50 +35,35 @@ for (const flavor of flavors) {
   }
 }
 
-// TODO:
-// refactor this part out to a common import, since ctp/ctp & ctp/userstyles
-// are both using the same base function
-const updateReadme = ({
-  readme,
-  section,
-  newContent,
-}: {
-  readme: string;
-  section: string;
-  newContent: string;
-}): string => {
-  const preamble =
-    "<!-- the following section is auto-generated, do not edit -->";
-  const startMarker = `<!-- AUTOGEN:${section.toUpperCase()} START -->`;
-  const endMarker = `<!-- AUTOGEN:${section.toUpperCase()} END -->`;
-  const wrapped = `${startMarker}\n${preamble}\n${newContent}\n${endMarker}`;
-
-  if (!(readme.includes(startMarker) && readme.includes(endMarker))) {
-    throw new Error("Markers not found in README.md");
-  }
-
-  const pre = readme.split(startMarker)[0];
-  const end = readme.split(endMarker)[1];
-  return pre + wrapped + end;
-};
+for (const accent of accents) {
+  Deno.writeTextFileSync(
+    path.join(__dirname, "dist", `theme-catppuccin-${accent}-auto.css`),
+    `@import "./theme-catppuccin-latte-${accent}.css" (prefers-color-scheme: light);
+@import "./theme-catppuccin-mocha-${accent}.css" (prefers-color-scheme: dark);`,
+  );
+}
 
-const readme = Deno.readTextFileSync(path.join(__dirname, "README.md"));
-const newcontent = updateReadme({
-  readme,
-  section: "ini",
-  newContent: `
+const flavorAccentIni = `
+\`\`\`ini
+[ui]
+THEMES = ${flavors
+  .map((f) => accents.map((a) => `catppuccin-${f}-${a}`).join(","))
+  .join(",")}
 \`\`\`
+`;
+
+const themeAutoIni = `
+\`\`\`ini
 [ui]
-THEMES = ${
-    flavors
-      .map((f) =>
-        accents
-          .map((a) => `catppuccin-${f}-${a}`)
-          .join(",")
-      ).join(",")
-  }
+THEMES = ${accents.map((a) => `catppuccin-${a}-auto`).join(",")}
 \`\`\`
-`,
-});
+`;
 
-Deno.writeTextFileSync(path.join(__dirname, "README.md"), newcontent);
+const oldReadme = Deno.readTextFileSync(path.join(__dirname, "README.md"));
+let newReadme = updateReadme(oldReadme, flavorAccentIni, {
+  section: "ini",
+});
+newReadme = updateReadme(newReadme, themeAutoIni, {
+  section: "ini-auto",
+});
+Deno.writeTextFileSync(path.join(__dirname, "README.md"), newReadme);
diff --git a/deno.json b/deno.json
@@ -2,7 +2,8 @@
   "imports": {
     "@catppuccin/palette": "npm:@catppuccin/[email protected]",
     "sass": "npm:[email protected]",
-    "std/path": "https://deno.land/[email protected]/path/mod.ts"
+    "std/path": "https://deno.land/[email protected]/path/mod.ts",
+    "@catppuccin/deno-lib": "https://deno.land/x/[email protected]/deno-lib/mod.ts"
   },
   "lock": true,
   "nodeModulesDir": true,