Download html

app/components/_variables.css

@@ -3,6 +3,18 @@
 @import "open-props/gray.shadow.min.css";
 @import "open-props/gray-hsl.shadow.min.css";
 
+:root {
+  --layer-1: 10;
+  --theme-bd-2: #ffffff;
+  --theme-bg: #f0f0f0;
+  --theme-text_color: #333333;
+  --theme-icon_color: #666666;
+  --theme-icon_hover-bg: #e0e0e0;
+  --theme-icon_active-bg: #cccccc;
+  --neon-pink: #ff007f;
+  --shadow-2: 0 0.25em 0.5em hsla(0, 76%, 44%, 0.1);
+}
+
 :host {
   --theme-bg: white;
   --theme-bd: hsl(0 0% 100% / var(--theme-bd-opacity));

app/components/_variables_dark.css

@@ -1,10 +1,10 @@
 :host {
-  --theme-bg: hsl(0 0% 10%);
+  --theme-bg: hsl(14, 96%, 49%);
   --theme-bd: hsl(0 0% 10% / var(--theme-bd-opacity));
   --theme-bd-2: hsl(0 0% 10% / var(--theme-bd-2-opacity));
   --theme-color: hsl(330deg 65% 75%);
   --theme-text_color: hsl(0 0% 90%);
   --theme-icon_color: hsl(0 0% 80%);
-  --theme-icon_hover-bg: hsl(0 0% 15%);
-  --theme-icon_active-bg: hsl(0 0% 20%);
+  --theme-icon_hover-bg: hsl(0, 97%, 44%);
+  --theme-icon_active-bg: hsl(0, 100%, 46%);
 }

app/components/hotkey-map/hotkeys.element.js

@@ -1,5 +1,6 @@
 import $        from 'blingblingjs'
 import hotkeys  from 'hotkeys-js'
+import { metaKey } from '../../utilities/'
 
 import { GuidesHotkeys }        from './guides.element'
 import { InspectorHotkeys }     from './inspector.element'
@@ -14,6 +15,7 @@ import { PositionHotkeys }      from './position.element'
 import { FontHotkeys }          from './font.element'
 import { TextHotkeys }          from './text.element'
 import { SearchHotkeys }        from './search.element'
+import { undoLastEvent, redoLastEvent } from '../../features/history'
 
 export class Hotkeys extends HTMLElement {
 
@@ -47,6 +49,8 @@ export class Hotkeys extends HTMLElement {
         : this.showTool())
 
     hotkeys('esc', e => this.hideTool())
+    hotkeys(`${metaKey}+z`, (e) => undoLastEvent());
+    hotkeys(`${metaKey}+shift+z`, (e) => redoLastEvent());
   }
 
   disconnectedCallback() {}