1 files changed, 24 insertions, 4 deletions

diff --git a/src/ui.js b/src/ui.js
index 7ee919f..1bb44b2 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -5,6 +5,13 @@ import * as dom from './dom';
 dom.css`
 body {
   --theme-backdrop: #1e1e1e;
+  --theme-note-bg: #eeeeee;
+  --theme-note-fg: #363636;
+  --theme-header-fg: #121212;
+}
+
+body.darktheme {
+  --theme-backdrop: #1e1e1e;
   --theme-note-bg: #363636;
   --theme-note-fg: #eeeeee;
   --theme-header-fg: #121212;
@@ -36,11 +43,17 @@ section {
   overflow: hidden;
 
   width: 350px;
-
+  color: var(--theme-note-fg);
   background: var(--theme-note-bg);
+
   border-radius: 0.4em;
 }
 
+section.tombstone {
+  color: var(--theme-note-bg);
+  background: var(--theme-note-fg);
+}
+
 section > header {
   display: flex;
   flex-direction: row;
@@ -74,18 +87,25 @@ section > header > .time {
 
 section > main {
   padding: 1em;
-  background: var(--theme-note-fg);
   font-family: serif;
 }
+
+section.tombstone > main {
+  font-family: inherit;
+}
 `;
 
 const colors = new ColorHash({ lightness: 0.8 });
-export const Note = ({ id, attributedTo, published, content, smallHeader = false }) => {
+export const Note = ({ id, type, attributedTo, published, content, smallHeader = false }) => {
   const backgroundColor = attributedTo.color || colors.hex(attributedTo.id);
   const username = attributedTo.name || attributedTo.preferredUsername;
 
   return (
-    <section dataset={{ id }} css={{ '--theme-header-bg': backgroundColor }}>
+    <section
+      css={{ '--theme-header-bg': backgroundColor }}
+      class={type === 'Tombstone' ? 'tombstone' : ''}
+      dataset={{ id }}
+    >
       {smallHeader
         ? <header class="small" />
         : <header>