Merge pull request #84 from EmaSuriano/forcing-theme

EmaSuriano · Nov 21, 2023 · 9430abb · 9430abb
2 parents 911b6d0 + 463e98b
commit 9430abb
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 3 deletions.
diff --git a/.github/workflows/pr-checker.yml b/.github/workflows/pr-checker.yml
@@ -21,6 +21,35 @@ jobs:
           NOTION_API_KEY: ${{secrets.NOTION_API_KEY}}
           DATABASE_ID: ${{secrets.DATABASE_ID}}
 
-      - run: npx percy snapshot dist/ 
+  visual-testing:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+
+      - run: yarn install --frozen-lockfile
+      - run: yarn add @percy/cli -D
+
+      - run: mkdir -p theme-dist/light && mkdir -p theme-dist/dark
+
+      - run: yarn build:light --base light
+        env:
+          NOTION_API_KEY: ${{secrets.NOTION_API_KEY}}
+          DATABASE_ID: ${{secrets.DATABASE_ID}}
+
+      - run: cp -R dist/* theme-dist/light
+
+      - run: yarn build:dark --base dark
+        env:
+          NOTION_API_KEY: ${{secrets.NOTION_API_KEY}}
+          DATABASE_ID: ${{secrets.DATABASE_ID}}
+
+      - run: cp -R dist/* theme-dist/dark
+
+      - run: npx percy snapshot theme-dist/ 
         env:
           PERCY_TOKEN: ${{secrets.PERCY_TOKEN}}
diff --git a/README.md b/README.md
@@ -44,6 +44,28 @@
 * Rename the file called `.env.example` to `.env` file and fill all the values.
 * You can find how to get these values for your page inside [the official documentation of Notion](https://developers.notion.com/docs/working-with-databases).
 
+## Force theme colors
+
+I added a mechanism to force the theme of the website, in case you don't like the default behavior of [Dark Mode in Tailwind](https://tailwindcss.com/docs/dark-mode). Simply modify your deployment script in order to use:
+
+<details>
+  <summary>To force light theme </summary>
+
+  ```
+  build:light
+  ```
+
+</details>
+
+<details>
+  <summary>To force dark theme </summary>
+
+  ```
+  build:dark
+  ```
+
+</details>
+
 ## Automate deploy of website 🚀 (Optional)
 
 Given that this project is a static website, you are force to trigger a deploy in order to reflect the latest changes inside our Notion database. This process can be easily automatized using many of the existing providers out there. 

diff --git a/package.json b/package.json
@@ -6,7 +6,10 @@
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
-    "build": "astro check && astro build",
+    "prebuild": "astro check",
+    "build": "astro build",
+    "build:light": "FORCE_THEME=light yarn build",
+    "build:dark": "FORCE_THEME=dark yarn build",
     "preview": "astro preview"
   },
   "devDependencies": {

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -3,11 +3,13 @@ import { SEO_INFO } from "../consts";
 
 type Props = { title: string };
 
+const forceTheme = import.meta.env.FORCE_THEME || "";
+
 const { title } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang="en" class={forceTheme}>
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width" />

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -1,5 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
+	darkMode: process.env.FORCE_THEME ? 'class' : 'media',
 	content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
 	theme: {
 		extend: {},