scss: set root vars depending of the theme

templates/css/stylesheet.php

@@ -1,42 +1,70 @@
+<?php
+
+function putVars(array $vars)
+{
+    foreach ($vars as $key => $value) {
+        echo sprintf(
+            "--side-menu-%s: %s;\n",
+            $key,
+            'opener' === $key
+                ? sprintf('url("%s")', image_path('side_menu', $value.'.svg'))
+                : $value
+        );
+    }
+}
+?>
+
 :root {
-  <?php foreach ($_['vars'] as $key => $value): ?>
-    <?php if ($key === 'opener'): ?>
-      --side-menu-<?php echo $key ?>: url('<?php print_unescaped(image_path('side_menu', $value.'.svg')); ?>');
-    <?php else: ?>
-      --side-menu-<?php echo $key ?>: <?php echo $value ?>;
-    <?php endif; ?>
-  <?php endforeach; ?>
+    <?php putVars($_['vars']['dark']); ?>
 }
 
-<?php if ($_['opener-only']): ?>
+@media (prefers-color-scheme: light) {
+  :root {
+    <?php putVars($_['vars']['light']); ?>
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  <?php putVars($_['vars']['dark']); ?>
+}
+
+body[data-theme-dark], body[data-theme-dark-highcontrast] {
+  <?php putVars($_['vars']['dark']); ?>
+}
+
+body[data-theme-light], body[data-theme-light-highcontrast] {
+  <?php putVars($_['vars']['light']); ?>
+}
+
+<?php if ($_['opener-only']) { ?>
   #nextcloud {
     display: none;
   }
-<?php endif; ?>
+<?php } ?>
 
-<?php if ($_['size-text'] === 'hidden'): ?>
+<?php if ('hidden' === $_['size-text']) { ?>
   .cm-apps {
-    <?php if ($_['size-icon'] === 'big'): ?>
+    <?php if ('big' === $_['size-icon']) { ?>
       width: 55px;
-    <?php else: ?>
+    <?php } else { ?>
       width: 52px;
-    <?php endif; ?>
+    <?php } ?>
   }
 
   .cm .cm-opener {
-    <?php if ($_['size-icon'] === 'big'): ?>
+    <?php if ('big' === $_['size-icon']) { ?>
       margin-left: 1px;
-    <?php else: ?>
+    <?php } else { ?>
       margin-left: 0px;
-    <?php endif; ?>
+    <?php } ?>
   }
-<?php endif; ?>
+<?php } ?>
 
-<?php if ($_['size-icon'] === 'hidden'): ?>
+<?php if ('hidden' === $_['size-icon']) { ?>
   .cm-app-icon {
     display: none;
   }
-<?php elseif ($_['size-icon'] === 'small'): ?>
+<?php } elseif ('small' === $_['size-icon']) { ?>
   .cm-app-icon svg {
     width: 15px;
     height: 15px;
@@ -46,7 +74,7 @@
     width: 15px;
     height: 15px;
   }
-<?php elseif ($_['size-icon'] === 'normal'): ?>
+<?php } elseif ('normal' === $_['size-icon']) { ?>
   .cm-app-icon svg {
     width: 20px;
     height: 20px;
@@ -56,7 +84,7 @@
     width: 20px;
     height: 20px;
   }
-<?php elseif ($_['size-icon'] === 'big'): ?>
+<?php } elseif ('big' === $_['size-icon']) { ?>
   .cm-app-icon svg {
     width: 23px;
     height: 23px;
@@ -66,23 +94,23 @@
     width: 23px;
     height: 23px;
   }
-<?php endif; ?>
+<?php } ?>
 
-<?php if ($_['size-text'] === 'hidden'): ?>
+<?php if ('hidden' === $_['size-text']) { ?>
   .cm-app-text {
     display: none;
   }
-<?php elseif ($_['size-text'] === 'small'): ?>
+<?php } elseif ('small' === $_['size-text']) { ?>
   .cm-app-text {
     font-size: 12px;
   }
-<?php elseif ($_['size-text'] === 'big'): ?>
+<?php } elseif ('big' === $_['size-text']) { ?>
   .cm-app-text {
     font-size: 16px;
   }
-<?php endif; ?>
+<?php } ?>
 
-<?php if ($_['always-displayed']): ?>
+<?php if ($_['always-displayed']) { ?>
   #content {
     left: 53px;
     width: calc(100% - (var(--body-container-margin) * 2) - 62px);
@@ -92,4 +120,4 @@
     width: calc(100% - (var(--body-container-margin) * 2) - 60px);
     margin-left: 11px;
   }
-<?php endif; ?>
+<?php } ?>