Added brightness and battery control to Dracula theme. HiDPI problems fixed.

themes/dracula/css/style.css

@@ -21,12 +21,14 @@
   --yellow: #F1FA8C;
 
   --animation-duration: 300ms;
+
+  --base-font-size: 16px;
 }
 
 /* High DPI */
 
 @media screen and (min-width: 3000px) and (min-height: 1200px) {
-  html {
+  #screen {
     zoom: 2.0;
   }
 }
@@ -34,23 +36,27 @@
 /* Basic */
 
 html {
-  height: 100vh;
-  width: 100vw;
-  background-color: black;
-  font-size: 16px;
+  color: var(--fg0);
+  background-color:  var(--bg0);
+  font-family: system-ui;
+
+  min-height: 100%;
+  position: relative;
+
+  font-size: var(--base-font-size);
   text-rendering: optimizeSpeed;
   image-rendering: pixelated;
 }
 html * {
   font-family: system-ui;
-  font-size: 16px;
+  font-size: inherit;
   transition: var(--animation-duration);
   color: var(--fg0);
 }
 
 body {
-  height: 100vh;
-  width: 100vw;
+  display: flex;
+  min-height: 100vh;
   margin: 0;
   overflow-x: hidden;
   background-color: var(--bg0);
@@ -101,8 +107,7 @@ body {
 }
 
 #screen {
-  height: 100vh;
-  width: 100vw;
+  width: 100%;
   position: relative;
   display: flex;
   align-items: center;
@@ -539,6 +544,26 @@ button {
   overflow-y: hidden;
 }
 
+/* system-bar */
+#system-bar {
+  display: flex;
+  position: fixed;
+  bottom: 0;
+  width: -webkit-fill-available;
+  height: 1.5em;
+  padding: 5px;
+
+  justify-content: flex-end;
+  align-items: center;
+
+  background-color: var(--bg1);
+}
+#system-bar > * {
+  font-weight: bold;
+  margin: 2px;
+  cursor: default;
+}
+
 /* Animations */
 
 @keyframes shake {

themes/dracula/index.html

@@ -106,6 +106,11 @@
       <span class="mdi mdi-menu mdi-24px"></span>
     </button>
 
+    <div id="system-bar">
+      <div id="brightness-label"></div>
+      <div id="battery-label"></div>
+    </div>
+
     <div id="sidebar" class="panel hide">
       <h3>Background selector</h3>
       <button id="close-panel-button" class="button">
@@ -134,6 +139,8 @@
   <script src="js/backgrounds.js"></script>
   <script src="js/time-date.js"></script>
   <script src="js/power.js"></script>
+  <script src="js/battery.js"></script>
+  <script src="js/brightness.js"></script>
   <script src="js/index.js"></script>
 </body>
 </html>

themes/dracula/js/battery.js

@@ -0,0 +1,37 @@
+class Battery {
+  constructor() {
+    this._battery = document.querySelector("#battery-label")
+    this._info = {}
+    this._init()
+  }
+
+  _updateData() {
+    this._info = lightdm.batteryData
+    var level = this._info.level
+    var state = this._info.state
+    var icon = 0
+    var charging = ""
+    var blevel = Math.floor(level / 10) * 10
+    icon = `-${blevel}`
+    charging = state == "Charging" ? "-charging" : ""
+
+    if (blevel < 10) icon = "-outline"
+    if (state == "Full" ) { icon = ""; charging = ""}
+    if (level >= 0) {
+      this._battery.style.visibility = "visible"
+      this._battery.innerHTML = `<span class="mdi mdi-battery${charging}${icon}"></span> ${level}%`
+    } else {
+      this._battery.innerHTML = ""
+      this._battery.style.visibility = "hidden"
+    }
+  }
+
+  _setTimer() {
+    if (!lightdm.can_access_battery) return
+    this._updateData()
+  }
+
+  _init() {
+    this._setTimer()
+  }
+}

themes/dracula/js/brightness.js

@@ -0,0 +1,28 @@
+class Brightness {
+  constructor() {
+    this._brightness = document.querySelector("#brightness-label")
+    this._level = 0
+    this._init()
+  }
+
+  _updateData() {
+    this._level = lightdm.brightness
+    if (this._level >= 0) {
+      this._brightness.style.visibility = "visible"
+      var icon = this._level > 50 ? 7: this._level > 10 ? 6 : 5
+      this._brightness.innerHTML = `<span class="mdi mdi-brightness-${icon}"></span> ${this._level}%`
+    } else {
+      this._brightness.innerHTML = ""
+      this._brightness.style.visibility = "hidden"
+    }
+  }
+
+  _setTimer() {
+    if (!lightdm.can_access_brightness) return
+    this._updateData()
+  }
+
+  _init() {
+    this._setTimer()
+  }
+}

themes/dracula/js/index.js

@@ -27,6 +27,8 @@ async function initGreeter() {
 
   lightdm.brightness_update?.connect(() => brightness._updateData())
 
+  lightdm.battery_update?.connect(() => battery._updateData())
+
   accounts = new Accounts()
 
   sessions = new Sessions()
@@ -42,9 +44,9 @@ async function initGreeter() {
 
   power = new Power()
 
-  //battery = new Battery()
+  battery = new Battery()
 
-  //brightness = new Brightness()
+  brightness = new Brightness()
 
 }
 

themes/gruvbox/css/style.css

@@ -41,26 +41,38 @@
 
   color-scheme: light dark;
   --animation-duration: 300ms;
+
+  --base-font-size: 16px;
 }
 
+/* High DPI */
+
+@media screen and (min-width: 3000px) and (min-height: 1200px) {
+  #screen {
+    zoom: 2.0;
+  }
+}
 
 html {
-  height: 100vh;
-  width: 100vw;
   color: var(--fg);
-  background: black;
+  background-color: var(--bg0);
+  min-height: 100%;
+  position: relative;
+
   font-family: system-ui;
-  font-size: 16px;
+  font-size: var(--base-font-size);
+  text-rendering: optimizeSpeed;
+  image-rendering: pixelated;
 }
 
 html > * {
   font-family: system-ui;
-  font-size: 16px;
+  font-size: inherit;
 }
 
 body {
-  height: 100vh;
-  width: 100vw;
+  display: flex;
+  min-height:  100vh;
   margin: 0;
   transition: var(--animation-duration);
 }
@@ -128,8 +140,7 @@ button {
 }
 
 #screen {
-  height: 100vh;
-  width: 100vw;
+  width: 100%;
   position: relative;
   display: flex;
   align-items: center;

themes/gruvbox/js/battery.js

@@ -29,12 +29,6 @@ class Battery {
   _setTimer() {
     if (!lightdm.can_access_battery) return
     this._updateData()
-    setTimeout(() => {
-      this._updateData()
-    }, 5 * 1000)
-    setInterval(() => {
-      this._updateData()
-    }, 20 * 1000) // Every 20 seconds
   }
 
   _init() {