Use CSS to set dark colour scheme

src/alsa-scarlett-gui.css

@@ -1,8 +1,15 @@
+.window-content {
+  background: black;
+  color: white;
+  padding: 15px;
+}
+
 .routing-group {
-  background: #EEE;
+  background: #181818;
   padding: 5px;
-  border: 1px solid #DDD;
+  border: 1px solid #303030;
   border-radius: 5px;
+  color: #d0d0d0;
 }
 
 .route-label {
@@ -22,8 +29,17 @@
 
 button {
   padding: 0px 5px 0px 5px;
+  border: 1px solid #181818;
+  background: linear-gradient(175deg, #101010, #181818);
+  box-shadow: none;
+  font-weight: bold;
+  color: #808080;
 }
 
-dial {
-  background: black;
+button:checked {
+  color: #ffffff;
+}
+
+button:hover {
+  background: #202020;
 }

src/iface-mixer.c

@@ -571,7 +571,8 @@ static GtkWidget *create_main_window_controls(struct alsa_card *card) {
   int x = 0;
 
   GtkWidget *top = gtk_grid_new();
-  gtk_widget_set_margin(top, 10);
+  gtk_widget_add_css_class(top, "window-content");
+  gtk_widget_add_css_class(top, "iface-mixer");
   gtk_grid_set_spacing(GTK_GRID(top), 10);
 
   int input_count = get_max_elem_by_name(

src/iface-no-mixer.c

@@ -14,13 +14,14 @@ GtkWidget *create_iface_no_mixer_main(struct alsa_card *card) {
   GArray *elems = card->elems;
 
   GtkWidget *grid = gtk_grid_new();
+  gtk_widget_add_css_class(grid, "window-content");
+  gtk_widget_add_css_class(grid, "iface-no-mixer");
+  gtk_grid_set_spacing(GTK_GRID(grid), 10);
+
   GtkWidget *label_ic = gtk_label_new("Input Controls");
   GtkWidget *vert_sep = gtk_separator_new(GTK_ORIENTATION_VERTICAL);
   GtkWidget *label_oc = gtk_label_new("Output Controls");
 
-  gtk_widget_set_margin(grid, 10);
-  gtk_grid_set_spacing(GTK_GRID(grid), 10);
-
   gtk_grid_attach(GTK_GRID(grid), label_ic, 0, 0, 1, 1);
   gtk_grid_attach(GTK_GRID(grid), vert_sep, 1, 0, 1, 3);
   gtk_grid_attach(GTK_GRID(grid), label_oc, 2, 0, 1, 1);

src/window-levels.c

@@ -65,9 +65,10 @@ static struct alsa_elem *get_level_meter_elem(struct alsa_card *card) {
 
 GtkWidget *create_levels_controls(struct alsa_card *card) {
   GtkWidget *levels_top = gtk_grid_new();
-  GtkGrid *grid = GTK_GRID(levels_top);
+  gtk_widget_add_css_class(levels_top, "window-content");
+  gtk_widget_add_css_class(levels_top, "window-levels");
 
-  gtk_widget_set_margin(GTK_WIDGET(grid), 5);
+  GtkGrid *grid = GTK_GRID(levels_top);
 
   GtkWidget *count_labels[MAX_MUX_IN] = { NULL };
 

src/window-mixer.c

@@ -26,14 +26,15 @@ static struct routing_snk *get_mixer_r_snk(
 
 GtkWidget *create_mixer_controls(struct alsa_card *card) {
   GtkWidget *mixer_top = gtk_grid_new();
-  GArray *elems = card->elems;
+  gtk_widget_add_css_class(mixer_top, "window-content");
+  gtk_widget_add_css_class(mixer_top, "window-mixer");
 
   gtk_widget_set_halign(mixer_top, GTK_ALIGN_CENTER);
   gtk_widget_set_valign(mixer_top, GTK_ALIGN_CENTER);
-
-  gtk_widget_set_margin(mixer_top, 5);
   gtk_grid_set_column_homogeneous(GTK_GRID(mixer_top), TRUE);
 
+  GArray *elems = card->elems;
+
   // create the Mix X labels on the left and right of the grid
   for (int i = 0; i < card->routing_in_count[PC_MIX]; i++) {
     char name[10];

src/window-routing.c

@@ -974,6 +974,8 @@ GtkWidget *create_routing_controls(struct alsa_card *card) {
   create_routing_grid(card);
 
   GtkWidget *routing_overlay = gtk_overlay_new();
+  gtk_widget_add_css_class(routing_overlay, "window-content");
+  gtk_widget_add_css_class(routing_overlay, "window-routing");
 
   gtk_overlay_set_child(GTK_OVERLAY(routing_overlay), card->routing_grid);
 

src/window-startup.c

@@ -154,7 +154,8 @@ GtkWidget *create_startup_controls(struct alsa_card *card) {
   int grid_y = 0;
 
   GtkWidget *grid = gtk_grid_new();
-  gtk_widget_set_margin(grid, 20);
+  gtk_widget_add_css_class(grid, "window-content");
+  gtk_widget_add_css_class(grid, "window-startup");
   gtk_grid_set_column_spacing(GTK_GRID(grid), 20);
 
   add_standalone_control(elems, grid, &grid_y);