feat: add dark mode configuration

php-flasher · Jun 12, 2022 · 3094efd · 3094efd
1 parent d39950e
commit 3094efd
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 17 deletions.
diff --git a/packages/flasher/src/flasher.scss b/packages/flasher/src/flasher.scss
@@ -266,18 +266,3 @@ $types: (success: #059669FF, info: #2563EBFF, warning: #D97706FF, error: #DC2626
     font-size: 0.875rem;
   }
 }
-
-@mixin dark-mode {
-  background-color: rgb(15, 23, 42);
-  color: rgb(255, 255, 255);
-}
-
-.dark .fl-main-container .fl-flasher.fl-container {
-  @include dark-mode;
-}
-
-@media (prefers-color-scheme: dark) {
-  .fl-main-container .fl-flasher.fl-container {
-    @include dark-mode;
-  }
-}
diff --git a/packages/flasher/src/flasherFactory.ts b/packages/flasher/src/flasherFactory.ts
@@ -17,6 +17,7 @@ export default class FlasherFactory implements NotificationFactoryInterface {
     direction: 'top',
     rtl: false,
     style: {} as Properties,
+    darkMode: 'media',
   };
 
   constructor(viewFactory: Theme) {
@@ -84,6 +85,8 @@ export default class FlasherFactory implements NotificationFactoryInterface {
     const nOptions = notification.options || {};
     const options = Array.isArray(nOptions) ? this.options : Object.assign({}, this.options, nOptions);
 
+    this.applyDarkMode();
+
     const onContainerReady = () => {
       const container = this.createContainer(options);
       this.addToContainer(container, envelope, options);
@@ -174,7 +177,9 @@ export default class FlasherFactory implements NotificationFactoryInterface {
     progressBar.classList.add('fl-progress');
 
     const progressBarContainer = template.querySelector('.fl-progress-bar');
-    progressBarContainer && progressBarContainer.append(progressBar);
+    if (progressBarContainer) {
+      progressBarContainer.append(progressBar);
+    }
 
     const lapse = 1000 / options.fps;
     let width = 0;
@@ -184,7 +189,7 @@ export default class FlasherFactory implements NotificationFactoryInterface {
       progressBar.style.width = `${percent}%`;
 
       if (percent <= 0) {
-        clearInterval(progressInterval);
+        clearInterval(progressInterval); // eslint-disable-line @typescript-eslint/no-use-before-define
         this.removeNotification(template);
       }
     };
@@ -194,6 +199,20 @@ export default class FlasherFactory implements NotificationFactoryInterface {
     template.addEventListener('mouseover', () => clearInterval(progressInterval));
   }
 
+  applyDarkMode(): void {
+    let [mode, className = '.dark'] = [].concat(this.options.darkMode as unknown as ConcatArray<never>);
+    let css = '.fl-main-container .fl-container.fl-flasher {background-color: rgb(15, 23, 42);color: rgb(255, 255, 255);}';
+
+    css = 'media' === mode
+      ? `@media (prefers-color-scheme: dark) {${css}}`
+      : `${className} ${css}`;
+
+    const style = document.createElement('style');
+    style.type = 'text/css';
+    style.appendChild(document.createTextNode(css));
+    document.head.appendChild(style);
+  }
+
   stringToHTML(str: string): HTMLElement {
     const support = (() => {
       if (!DOMParser) {