diff --git a/am/modules/alert-manager-sk/alert-manager-sk.scss b/am/modules/alert-manager-sk/alert-manager-sk.scss
index 9e69b46..9a3be57 100644
--- a/am/modules/alert-manager-sk/alert-manager-sk.scss
+++ b/am/modules/alert-manager-sk/alert-manager-sk.scss
@@ -1,4 +1,4 @@
-@import '~elements-sk/colors';
+@import '../themes/themes.scss';
 
 alert-manager-sk {
   spinner-sk[active] {
@@ -40,7 +40,7 @@
   }
 
   .bot-incident-list {
-    color: var(--gray);
+    color: var(--inactive);
   }
 
   .bot-incident-elem {
@@ -50,7 +50,7 @@
 
   h2 {
     align-items: center;
-    color: var(--red);
+    color: var(--active);
     margin: 0;
     padding: 0;
     font-size: 14px;
@@ -62,23 +62,23 @@
   }
 
   h2.assigned {
-    color: var(--orange);
+    color: var(--assigned);
   }
 
   h2.inactive {
-    color: var(--gray);
+    color: var(--inactive);
   }
 
   h2.selected {
-    background: var(--white);
+    background: var(--selected);
   }
 
   h2.silenced {
-    color: var(--green);
+    color: var(--silenced);
   }
 
   .silences h2.inactive {
-    color: var(--gray);
+    color: var(--inactive);
   }
 
   footer {
@@ -101,12 +101,13 @@
 
   tabs-sk {
     padding: 5px 0 0 5px;
-    border-bottom: dotted var(--gray) 1px;
+    border-bottom: dotted var(--on-background) 1px;
 
     button {
       border: none;
-      background: var(--white);
-      color: var(--gray);
+      background: var(--surface);
+      color: var(--on-surface);
+      fill: var(--on-surface);
     }
   }
 
@@ -150,36 +151,36 @@
     padding: 1em;
 
     h2 {
-      color: var(--blue);
+      color: var(--primary);
       display: flex;
       justify-content: space-between;
     }
   }
 
   comment-icon-sk, alarm-off-icon-sk, thumbs-up-down-icon-sk {
-    fill: var(--green);
+    fill: var(--icons);
     padding: 0.2em 0.6em;
   }
 
   .inactive comment-icon-sk {
-    fill: gray;
+    fill: var(--inactive);
   }
 
   person-icon-sk {
-    fill: var(--light-orange);
+    fill: var(--assigned-person);
   }
 
   .assigned-circle {
     border: solid;
-    border-color: var(--light-orange);
+    border-color: var(--assigned-person);
     border-radius: 50%;
-    color: var(--light-orange);
+    color: var(--assigned-person);
     padding: 0.2em;
   }
 
   notifications-icon-sk {
     padding: 0 0.6em;
-    fill: var(--blue);
+    fill: var(--primary);
   }
 
   .invisible {
@@ -193,22 +194,22 @@
 
   header {
     grid-area: header;
-    color: var(--blue);
-    fill: var(--blue);
+    color: var(--primary);
+    fill: var(--primary);
     padding: 0.4em;
     justify-content: flex-end;
     display: flex;
 
     login-sk .email,
     login-sk .logInOut {
-      color: var(--blue);
+      color: var(--primary);
     }
   }
 
   header,
   .edit,
   footer {
-    border-left: solid 1px black;
+    border-left: solid 1px var(--on-background);
   }
 
   display: grid;
diff --git a/am/modules/alert-manager-sk/alert-manager-sk.ts b/am/modules/alert-manager-sk/alert-manager-sk.ts
index 6c76b39..ab702e0 100644
--- a/am/modules/alert-manager-sk/alert-manager-sk.ts
+++ b/am/modules/alert-manager-sk/alert-manager-sk.ts
@@ -34,6 +34,7 @@
 import { Login } from '../../../infra-sk/modules/login';
 import { BotChooserSk } from '../bot-chooser-sk/bot-chooser-sk';
 import { EmailChooserSk } from '../email-chooser-sk/email-chooser-sk';
+import '../../../infra-sk/modules/theme-chooser-sk';
 
 import * as paramset from '../paramset';
 import { displaySilence, expiresIn } from '../am';
@@ -130,7 +131,10 @@
   }
 
   private static template = (ele: AlertManagerSk) => html`
-<header>${ele.infraGardener()}</header>
+<header>
+  ${ele.infraGardener()}
+  <theme-chooser-sk></theme-chooser-sk>
+</header>
 <section class=nav>
   <tabs-sk @tab-selected-sk=${ele.tabSwitch} selected=${ele.state.tab}>
     <button>Mine</button>
diff --git a/am/modules/bot-chooser-sk/bot-chooser-sk.scss b/am/modules/bot-chooser-sk/bot-chooser-sk.scss
index 4d6591d..2942272 100644
--- a/am/modules/bot-chooser-sk/bot-chooser-sk.scss
+++ b/am/modules/bot-chooser-sk/bot-chooser-sk.scss
@@ -3,7 +3,7 @@
 bot-chooser-sk {
   dialog-sk {
     h2 {
-      color: var(--blue);
+      color: var(--primary);
       margin: 0;
     }
   }
diff --git a/am/modules/email-chooser-sk/email-chooser-sk.scss b/am/modules/email-chooser-sk/email-chooser-sk.scss
index c2cc020..1336aeb 100644
--- a/am/modules/email-chooser-sk/email-chooser-sk.scss
+++ b/am/modules/email-chooser-sk/email-chooser-sk.scss
@@ -3,7 +3,7 @@
 email-chooser-sk {
   dialog-sk {
     h2 {
-      color: var(--blue);
+      color: var(--primary);
       margin: 0;
     }
   }
diff --git a/am/modules/incident-sk/incident-sk.scss b/am/modules/incident-sk/incident-sk.scss
index 49c1e07..0348d5d 100644
--- a/am/modules/incident-sk/incident-sk.scss
+++ b/am/modules/incident-sk/incident-sk.scss
@@ -39,7 +39,7 @@
   }
 
   td a {
-    color: var(--blue);
+    color: var(--primary);
   }
 
   textarea {
@@ -48,7 +48,7 @@
   }
 
   p {
-    background: var(--white);
+    background: var(--comments);
     padding: 0.5em;
     display: block;
     border-radius: 0.5em;
@@ -65,27 +65,27 @@
 
   .date {
     margin: 0 1em;
-    color: var(--orange);
+    color: var(--assigned);
   }
 
   .author {
-    color: var(--green);
+    color: var(--icons);
   }
 
   .flaky,
   .recently-expired-silence {
     font-size: 0.75em;
-    color: var(--black);
+    color: var(--background);
   }
 
   delete-icon-sk {
-    fill: var(--gray);
+    fill: var(--on-background);
     cursor: pointer;
     border: solid transparent 1px;
   }
 
   delete-icon-sk:hover {
-    border: solid var(--gray) 1px;
+    border: solid var(--on-background) 1px;
   }
 
   .meta {
@@ -121,5 +121,6 @@
 
 incident-sk[minimized] {
   margin: 1em;
-  background: var(--dark-white);
+  background: var(--minimized);
+  border-radius: 0.5em;
 }
diff --git a/am/modules/silence-sk/silence-sk.scss b/am/modules/silence-sk/silence-sk.scss
index 273c3fe..6508df4 100644
--- a/am/modules/silence-sk/silence-sk.scss
+++ b/am/modules/silence-sk/silence-sk.scss
@@ -35,21 +35,21 @@
 
   .date {
     margin: 0 1em;
-    color: var(--orange);
+    color: var(--assigned);
   }
 
   .author {
-    color: var(--green);
+    color: var(--icons);
   }
 
   delete-icon-sk {
-    fill: var(--gray);
+    fill: var(--on-background);
     cursor: pointer;
     border: solid transparent 1px;
   }
 
   delete-icon-sk:hover {
-    border: solid var(--gray) 1px;
+    border: solid var(--on-background) 1px;
   }
 
   input.duration {
@@ -66,7 +66,6 @@
 
   section.notes,
   section.addNote {
-    max-width: 40em;
     margin: 1em;
   }
 
@@ -80,6 +79,9 @@
 
   .matches {
     margin: 1em;
+    background-color: var(--selected);
+    border-radius: 0.5em;
+    padding: 0.5em;
 
     h1 {
       margin: 0;
@@ -88,26 +90,26 @@
 
     h2 {
       padding: 0.2em 1em;
-      color: var(--blue);
+      color: var(--primary);
     }
   }
 
   h2 {
     align-items: center;
-    color: var(--red);
+    color: var(--active);
     margin: 0;
     padding: 0.2em 1em;
     font-size: 14px;
     cursor: pointer;
-    color: var(--blue);
+    color: var(--primary);
   }
 
   h2.inactive {
-    color: var(--gray);
+    color: var(--inactive);
   }
 
   p {
-    background: var(--white);
+    background: var(--comments);
     padding: 0.5em;
     display: block;
     border-radius: 0.5em;
@@ -130,5 +132,9 @@
 
 silence-sk[collapsable] {
   margin: 1em;
-  background: var(--dark-white);
+  background: var(--minimized);
+  border-radius: 0.5em;
+  p, input, textarea {
+    background: var(--background);
+  }
 }
diff --git a/am/modules/themes/themes.scss b/am/modules/themes/themes.scss
new file mode 100644
index 0000000..472e74e
--- /dev/null
+++ b/am/modules/themes/themes.scss
@@ -0,0 +1,48 @@
+@import '~elements-sk/themes/themes';
+
+.body-sk.darkmode {
+  --primary: var(--light-blue);
+  --primary-variant: var(--light-blue-200);
+  --on-primary-variant: var(--black);
+  --dark-grayish-blue: #8899A6;
+  --dark-desaturated-blue: #192734;
+
+  --active: var(--red-300);
+  --inactive: var(--dark-grayish-blue);
+  --silenced: var(--green-300);
+  --assigned: var(--orange-300);
+  --selected: var(--dark-desaturated-blue);
+
+  --minimized: var(--dark-desaturated-blue);
+  --comments: var(--dark-desaturated-blue);
+  --icons: var(--green-300);
+  --disabled: var(--grey-700);
+}
+
+.body-sk {
+  --primary: var(--blue-800);
+  --primary-variant: var(--light-blue-600);
+  --secondary: var(--green-500);
+  --very-dark-gray: #4F4F4F;
+
+  --active: var(--red);
+  --inactive: var(--very-dark-gray);
+  --silenced: var(--green);
+  --assigned: var(--orange);
+  --assigned-person: var(--light-orange);
+  --selected: var(--dark-white);
+
+  --minimized: var(--dark-white);
+  --comments: var(--dark-white);
+  --icons: var(--green);
+
+  input, textarea {
+    border: solid 1px var(--on-surface);
+    color: solid 1px var(--on-surface);
+    background: solid 1px var(--surface);
+  }
+
+  a {
+    color: var(--primary);
+  }
+}
diff --git a/am/pages/index.html b/am/pages/index.html
index 16def70..9f9b56d 100644
--- a/am/pages/index.html
+++ b/am/pages/index.html
@@ -7,7 +7,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link id=favicon rel="icon" type="image/png" href="/static/icon-active.png">
 </head>
-<body>
+<body class="body-sk">
   <alert-manager-sk></alert-manager-sk>
 </body>
 </html>