Added support for dark/light theme

danniehansen · Oct 29, 2023 · 05e1303 · 05e1303
1 parent 0c795ff
commit 05e1303
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 4 deletions.
diff --git a/src/Router.vue b/src/Router.vue
@@ -1,4 +1,11 @@
 <template>
+  <link v-if="selectedTheme === 'dark'" rel="stylesheet" :href="darkTheme" />
+  <link
+    v-else-if="selectedTheme === 'light'"
+    rel="stylesheet"
+    :href="lightTheme"
+  />
+
   <CapabilityCardBackSection v-if="page === 'card-back-section'" />
   <ChangeEstimate v-else-if="page === 'change-estimate'" />
   <MemberSettings v-else-if="page === 'member-settings'" />
@@ -10,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { getTrelloInstance } from './components/trello';
+import { getTrelloInstance, resizeTrelloFrame } from './components/trello';
 import CapabilityCardBackSection from './capabilities/card-back-section/view.vue';
 import ChangeEstimate from './capabilities/card-back-section/change_estimate.vue';
 import MemberSettings from './pages/MemberSettings.vue';
@@ -19,8 +26,28 @@ import Settings from './pages/Settings.vue';
 import DataExporterTime from './pages/DataExporter/TimeTracking/index.vue';
 import DataExporterEstimates from './pages/DataExporter/Estimates/index.vue';
 import DatetimePicker from './components/DatetimePicker.vue';
+import { ref } from 'vue';
+import lightTheme from 'primevue/resources/themes/bootstrap4-light-blue/theme.css?url';
+import darkTheme from 'primevue/resources/themes/bootstrap4-dark-blue/theme.css?url';
 
 const t = getTrelloInstance();
+const selectedTheme = ref<string | undefined>();
+
+const onThemeChange = (theme: 'light' | 'dark') => {
+  selectedTheme.value = theme;
+  setTimeout(resizeTrelloFrame);
+};
+
+if ('getContext' in t) {
+  const context = t.getContext();
+
+  if (context.theme) {
+    onThemeChange(context.theme);
+  }
+
+  t.subscribeToThemeChanges(onThemeChange);
+}
+
 const urlSearchParams = new URLSearchParams(window.location.search);
 
 let page: string | null = urlSearchParams.get('page');

diff --git a/src/components/trello.ts b/src/components/trello.ts
@@ -29,8 +29,8 @@ export function setTrelloInstance(t: TrelloInstance) {
   trelloInstance = t;
 }
 
-export function getTrelloInstance(): TrelloInstance {
-  return trelloInstance as TrelloInstance;
+export function getTrelloInstance<T = TrelloInstance>(): T {
+  return trelloInstance as T;
 }
 
 export function getTrelloCard(): Trello.PowerUp.IFrame {

diff --git a/src/main.ts b/src/main.ts
@@ -30,7 +30,6 @@ import Row from 'primevue/row';
 import './scss/base.scss';
 import 'primeicons/primeicons.css';
 import 'primeflex/primeflex.css';
-import 'primevue/resources/themes/bootstrap4-dark-blue/theme.css';
 
 let incognito = false;
 

diff --git a/src/types/trello.d.ts b/src/types/trello.d.ts
@@ -532,10 +532,13 @@ export namespace Trello {
         organization: Permissions;
       };
       version: string;
+      theme: null | 'light' | 'dark';
+      initialTheme: 'light' | 'dark';
     }
 
     interface HostHandlers extends AnonymousHostHandlers {
       getContext(): Context;
+      subscribeToThemeChanges: (e: (theme: 'light' | 'dark') => void) => void;
       isMemberSignedIn(): boolean;
       memberCanWriteToModel(modelType: Model): boolean;
       arg(name: string, defaultValue?: any): any;