Add dark mode

src/framework/container-page.ts

@@ -3,16 +3,18 @@ import { PageEventType } from './page-event';
 
 export class ContainerPage extends PageElement {
   public constructor(rootElement: HTMLElement, children: Array<PageElement>) {
-    children.forEach(e => rootElement.appendChild(e.element));
+    children
+      .filter(e => e.element)
+      .forEach(e => rootElement.appendChild(e.element));
     super(rootElement, children);
   }
 
   public setAsMain() {
-    this.broadcastEvent({ type: PageEventType.onLoad }, this);
-
     this.broadcastEvent(
       { type: PageEventType.eventBroadcasterChanged, data: this },
       this
     );
+
+    this.broadcastEvent({ type: PageEventType.onLoad }, this);
   }
 }

src/framework/helper/dark-mode.ts

@@ -0,0 +1,9 @@
+export const isSystemLevelDarkModeEnabled = (): boolean =>
+  window.matchMedia &&
+  window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+export const turnOnDarkMode = () =>
+  document.body.parentElement.setAttribute('theme', 'dark');
+
+export const turnOnLightMode = () =>
+  document.body.parentElement.setAttribute('theme', 'light');

src/framework/helper/mix-colors.ts

@@ -20,16 +20,12 @@ export const mixColors = (
 
 const hexToRGB = (hex: hex): rgb => {
   const [r1, r2, g1, g2, b1, b2] = normalizeHex(hex);
-  return [
-    Number.parseInt(r1 + r2, 16),
-    Number.parseInt(g1 + g2, 16),
-    Number.parseInt(b1 + b2, 16),
-  ];
+  return [parseInt(r1 + r2, 16), parseInt(g1 + g2, 16), parseInt(b1 + b2, 16)];
 };
 
 const normalizeHex = (hex: hex): hex => {
   hex = hex.trim();
-  if (hex.startsWith('#')) {
+  if (hex[0] === '#') {
     hex = hex.substr(1);
   }
   return hex;
@@ -38,4 +34,4 @@ const normalizeHex = (hex: hex): hex => {
 const mix = (a: number, b: number, q: number): number => a * q + b * (1 - q);
 
 const rgbToHex = (rgb: rgb): hex =>
-  '#' + rgb.map(n => Math.round(n).toString(16)).join('');
+  '#' + rgb.map(n => (n < 16 ? '0' : '') + Math.round(n).toString(16)).join('');

src/framework/helper/random.ts

@@ -1,5 +1,9 @@
+import { addImul } from '../polyfills';
+
 export class Random {
-  public constructor(private seed: number) {}
+  public constructor(private seed: number) {
+    addImul();
+  }
 
   public get next(): number {
     // result is in [0, 1)

src/framework/page-element.ts

@@ -5,7 +5,7 @@ export abstract class PageElement implements EventBroadcaster {
   protected eventBroadcaster: EventBroadcaster;
 
   protected constructor(
-    private readonly rootElement: HTMLElement,
+    private readonly rootElement?: HTMLElement,
     private readonly children: Array<PageElement> = []
   ) {}
 

src/framework/page-event.ts

@@ -6,5 +6,6 @@ export class PageEvent {
 export enum PageEventType {
   onLoad,
   onBodyDimensionsChanged,
-  eventBroadcasterChanged
+  eventBroadcasterChanged,
+  pageThemeChanged,
 }

src/framework/polyfills.ts

@@ -0,0 +1,17 @@
+export const addImul = () => {
+  if (!Math.imul)
+    // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/imul
+    Math.imul = function(opA, opB) {
+      opB |= 0; // ensure that opB is an integer. opA will automatically be coerced.
+      // floating points give us 53 bits of precision to work with plus 1 sign bit
+      // automatically handled for our convenience:
+      // 1. 0x003fffff /*opA & 0x000fffff*/ * 0x7fffffff /*opB*/ = 0x1fffff7fc00001
+      //    0x1fffff7fc00001 < Number.MAX_SAFE_INTEGER /*0x1fffffffffffff*/
+      let result = (opA & 0x003fffff) * opB;
+      // 2. We can remove an integer coercion from the statement above because:
+      //    0x1fffff7fc00001 + 0xffc00000 = 0x1fffffff800001
+      //    0x1fffffff800001 < Number.MAX_SAFE_INTEGER /*0x1fffffffffffff*/
+      if (opA & 0xffc00000 /*!== 0*/) result += ((opA & 0xffc00000) * opB) | 0;
+      return result | 0;
+    };
+};

src/framework/primitives/primitives.scss

@@ -1,25 +1,27 @@
 @import '../../style/vars';
 @import '../../style/mixins';
 
-.figure-container {
-  font-size: 0;
-  box-shadow: inset $shadow1, inset $shadow2;
-  pointer-events: none;
-  cursor: pointer;
+@include responsive() using ($vars) {
+  .figure-container {
+    font-size: 0;
+    box-shadow: inset map_get($vars, $shadow1), inset map_get($vars, $shadow2);
+    pointer-events: none;
+    cursor: pointer;
 
-  * {
-    pointer-events: all;
-    position: relative;
-    z-index: -2;
+    * {
+      pointer-events: all;
+      position: relative;
+      z-index: -2;
+    }
+  }
+
+  .primitive-text,
+  .primitive-anchor,
+  .figure-container {
+    margin-top: map_get($vars, $line-height);
+  }
+
+  .primitive-text {
+    text-align: left;
   }
 }
-
-.primitive-text,
-.primitive-anchor,
-.figure-container {
-  margin-top: $line-height;
-}
-
-.primitive-text {
-  text-align: left;
-}