color scheme, compositor fix

examples/basic.css

@@ -1,44 +1,62 @@
 /* CSS file for basic.py */
 
-$primary: #20639b;
-
 App > Screen {
   layout: dock;
   docks: side=left/1;
-  background: $primary;
+  background: $background;
+  color: $on-background;
 }
 
 #sidebar {
-  color: #09312e;
-  background: #3caea3;
+  color: $on-primary;
+  background: $primary;
   dock: side;
   width: 30;
   offset-x: -100%;
-
+  layout: dock;
   transition: offset 500ms in_out_cubic;
-  border-right: outer #09312e;
 }
 
 #sidebar.-active {
   offset-x: 0;
 }
 
+#sidebar .title {
+  height: 1;
+  background: $secondary-darken1;
+  color: $on-secondary-darken1;
+  border-right: vkey $secondary-darken2;
+}
+
+#sidebar .user {
+  height: 8;
+  background: $secondary;
+  color: $on-secondary;
+  border-right: vkey $secondary-darken2;
+}
+
+#sidebar .content {
+  background: $secondary-lighten1;
+  color: $on-secondary-lighten1;
+  border-right: vkey $secondary-darken2;
+}
+
 #header {
-  color: white;
-  background: #173f5f;
+  color: $on-primary;
+  background: $primary;
   height: 3;
-  border: hkey white;
+  border: hkey $primary-darken2;
 }
 
 #content {
-  color: white;
-  background: $primary;
+  color: $on-background;
+  background: $background;
   border-bottom: hkey #0f2b41;
 }
 
 #footer {
-  color: #3a3009;
-  background: #f6d55c;
+  color: $on-accent1;
+  background: $accent1;
 
-  height: 3;
+  height: 1;
 }

examples/basic.py

@@ -15,8 +15,21 @@ class BasicApp(App):
             header=Widget(),
             content=Widget(),
             footer=Widget(),
-            sidebar=Widget(),
+            sidebar=Widget(
+                Widget(classes={"title"}),
+                Widget(classes={"user"}),
+                Widget(classes={"content"}),
+            ),
         )
 
+    async def on_key(self, event) -> None:
+        await self.dispatch_key(event)
+
+    def key_d(self):
+        self.dark = not self.dark
+
+    def key_x(self):
+        self.panic(self.tree)
+
 
 BasicApp.run(css_file="basic.css", watch_css=True, log="textual.log")

examples/borders.css

@@ -4,14 +4,14 @@ Screen {
 
 #borders {
   layout: vertical;
-  text-background: #212121;
+  background: #212121;
   overflow-y: scroll;
 }
 
 Lorem.border {
   height: 12;
   margin: 2 4;
-  text-background: #303f9f;
+  background: #303f9f;
 }
 
 Lorem.round {