While Fossil does not "store" empty directories, it would still be nice to see distinct icons for collapsed and expanded directories.

The simplest way to implement this feature is to define a more specific style

.filetree .dir:has(> .collapsed) > div.filetreeline > a

The :has() pseudo-class is relatively new, but supposedly has good adoption rate. This style is more specific and takes precedence over more generic already defined variant without :has(). If a particular browser does not support :has(), it should ignore the style falling back to present behavior.

Here is a patch (against the tip) for the default skin derived from the current directory display style:

Index: src/default.css
==================================================================
--- src/default.css
+++ src/default.css
@@ -341,10 +341,15 @@
 }
 .filetree .dir > div.filetreeline > a {
   background-image: url("data:image/gif;base64,R0lGODlhEAAQAJEAAP/WVCIiI\
 v\/\/\/wAAACH5BAEHAAIALAAAAAAQABAAAAInlI9pwa3XYniCgQtkrAFfLXkiFo1jaXpo\
 +jUs6b5Z/K4siDu5RPUFADs=");
+}
+.filetree .dir:has(> .collapsed) > div.filetreeline > a {
+  background-image: url("data:image/gif;base64,R0lGODlhEAAQAJEAAP/WVCIiI\
+v\/\/\/wAAACH5BAEAAAIALAAAAAAQABAAAAIylI9pwa3XYniCgQtkrAFfLXkiFonDIJbemTbY\
+CaOfe8XsbK0ySb873hm1QMRJUUJJFgAAOw==");
 }
 div.filetreeage {
  display: table-cell;
  padding-left: 1.5em;
  text-align: right;