use radio button to switch between light/dark mode

Joseph5610 · Mar 17, 2023 · d2d69e4 · d2d69e4
1 parent a875812
commit d2d69e4
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 22 deletions.
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -96,6 +96,8 @@ dependencies {
     implementation("io.humble:humble-video-all:$humbleVersion")
     implementation("uk.co.caprica:vlcj:$vlcjVersion")
 
+    implementation("com.github.Dansoftowner:jSystemThemeDetector:3.8")
+
     testRuntimeOnly("org.junit.jupiter:junit-jupiter-engine:$junitVersion")
     testImplementation("org.junit.jupiter:junit-jupiter-api:$junitVersion")
     testImplementation("org.testfx:testfx-core:$testFxVersion")

diff --git a/src/main/kotlin/online/hudacek/fxradio/FxRadio.kt b/src/main/kotlin/online/hudacek/fxradio/FxRadio.kt
@@ -35,6 +35,7 @@ import online.hudacek.fxradio.util.macos.MacUtils
 import online.hudacek.fxradio.util.saveProperties
 import online.hudacek.fxradio.util.value
 import online.hudacek.fxradio.viewmodel.PlayerViewModel
+import online.hudacek.fxradio.viewmodel.PreferencesViewModel
 import org.apache.logging.log4j.LogManager
 import tornadofx.App
 import tornadofx.FX
@@ -71,6 +72,7 @@ open class FxRadio(
 
     private val trayIcon: TrayIcon by inject()
     private val playerViewModel: PlayerViewModel by inject()
+    private val preferencesViewModel: PreferencesViewModel by inject()
 
     /**
      * override app.config path to ${user.home}/.fxradio
@@ -106,7 +108,9 @@ open class FxRadio(
             // Disable built-in tornadofx layout debugger
             FX.layoutDebuggerShortcut = null
         }
+
         trayIcon.createIcon()
+        MacUtils.setAppearance(preferencesViewModel.darkModeProperty.value)
     }
 
     override fun stop() {

diff --git a/src/main/kotlin/online/hudacek/fxradio/ui/fragment/PreferencesFragment.kt b/src/main/kotlin/online/hudacek/fxradio/ui/fragment/PreferencesFragment.kt
@@ -112,11 +112,20 @@ class PreferencesFragment : BaseFragment() {
 
                 field(messages["menu.app.darkmode"]) {
                     labelContainer.alignment = Pos.CENTER_RIGHT
-                    checkbox {
-                        bind(preferencesViewModel.darkModeProperty)
-                        action {
-                            preferencesViewModel.commit()
+                    togglegroup {
+                        radiobutton(messages["menu.app.light"], value = false, group = this) {
+                            action {
+                                preferencesViewModel.commit()
+                            }
+                            addClass(Styles.colorRadioButton)
+                        }
+                        radiobutton(messages["menu.app.dark"], value = true, group = this) {
+                            action {
+                                preferencesViewModel.commit()
+                            }
+                            addClass(Styles.colorRadioButton)
                         }
+                        bind(preferencesViewModel.darkModeProperty)
                     }
                 }
             }

diff --git a/src/main/kotlin/online/hudacek/fxradio/ui/style/Styles.kt b/src/main/kotlin/online/hudacek/fxradio/ui/style/Styles.kt
@@ -103,9 +103,9 @@ class Styles : Stylesheet() {
             borderRadius += box(4.px)
             backgroundColor += c(colors.background)
             borderColor += box(c(colors.backgroundBorder))
-            maxWidth = 280.px
-            minWidth = 280.px
-            prefWidth = 280.px
+            maxWidth = 300.px
+            minWidth = 300.px
+            prefWidth = 300.px
             alignment = Pos.CENTER
             prefHeight = 40.px
             minHeight = 40.px

diff --git a/src/main/kotlin/online/hudacek/fxradio/ui/style/StylesDark.kt b/src/main/kotlin/online/hudacek/fxradio/ui/style/StylesDark.kt
@@ -119,9 +119,9 @@ class StylesDark : Stylesheet() {
             borderRadius += box(4.px)
             backgroundColor += c(colors.playerBox)
             borderColor += box(c(colors.backgroundBorder))
-            maxWidth = 280.px
-            minWidth = 280.px
-            prefWidth = 280.px
+            maxWidth = 300.px
+            minWidth = 300.px
+            prefWidth = 300.px
             alignment = Pos.CENTER
             prefHeight = 40.px
             minHeight = 40.px
@@ -472,6 +472,8 @@ class StylesDark : Stylesheet() {
         }
 
         colorRadioButton {
+            baseColor = c(colors.primary)
+            textFill = c(colors.label)
             and(selected) {
                 radio {
                     dot {

diff --git a/src/main/kotlin/online/hudacek/fxradio/ui/view/library/LibraryTitleFragment.kt b/src/main/kotlin/online/hudacek/fxradio/ui/view/library/LibraryTitleFragment.kt
@@ -20,14 +20,17 @@ package online.hudacek.fxradio.ui.view.library
 
 import javafx.beans.property.BooleanProperty
 import javafx.scene.layout.Priority
+import javafx.scene.text.Font
 import javafx.util.Duration
 import online.hudacek.fxradio.ui.BaseFragment
+import online.hudacek.fxradio.ui.style.Styles
 import online.hudacek.fxradio.ui.util.make
 import online.hudacek.fxradio.ui.util.showWhen
 import online.hudacek.fxradio.ui.util.smallLabel
 import online.hudacek.fxradio.util.toObservable
 import org.controlsfx.glyphfont.FontAwesome
 import org.controlsfx.glyphfont.Glyph
+import tornadofx.addClass
 import tornadofx.hbox
 import tornadofx.hgrow
 import tornadofx.onLeftClick
@@ -82,6 +85,7 @@ class LibraryTitleFragment : BaseFragment() {
     override val root = hbox {
         smallLabel(libraryTitle) {
             paddingLeft = 10.0
+            addClass(Styles.boldText)
         }
         region { hgrow = Priority.ALWAYS }
         vbox {

diff --git a/src/main/kotlin/online/hudacek/fxradio/ui/view/stations/StationsHeaderView.kt b/src/main/kotlin/online/hudacek/fxradio/ui/view/stations/StationsHeaderView.kt
@@ -72,6 +72,7 @@ class StationsHeaderView : BaseView() {
                     paddingTop = 8.0
                     paddingBottom = 8.0
                     addClass(Styles.subheader)
+                    addClass(Styles.boldText)
                 }
 
                 label(searchViewModel.queryBinding) {
@@ -84,6 +85,7 @@ class StationsHeaderView : BaseView() {
                     }
                     addClass(Styles.grayTextColor)
                     addClass(Styles.subheader)
+                    addClass(Styles.boldText)
                 }
             }
         }

diff --git a/src/main/kotlin/online/hudacek/fxradio/util/macos/MacUtils.kt b/src/main/kotlin/online/hudacek/fxradio/util/macos/MacUtils.kt
@@ -18,16 +18,38 @@
 
 package online.hudacek.fxradio.util.macos
 
+import de.jangassen.jfa.appkit.NSAppearance
+import de.jangassen.jfa.appkit.NSApplication
 import online.hudacek.fxradio.util.Command
 import org.controlsfx.tools.Platform
 
 object MacUtils {
 
     val isMac = Platform.getCurrent() == Platform.OSX
 
+    private val darkAppearance by lazy {
+        NSAppearance.appearanceNamed(NSAppearance.NSAppearanceName.NSAppearanceNameVibrantDark)
+    }
+
+    private val lightAppearance by lazy {
+        NSAppearance.appearanceNamed(NSAppearance.NSAppearanceName.NSAppearanceNameVibrantLight)
+    }
+
     val isSystemDarkMode: Boolean
         get() = Command("defaults read -g AppleInterfaceStyle").exec() == "Dark"
 
     val systemAccentColor: Int
         get() = Command("defaults read -g AppleAccentColor").exec().toIntOrNull() ?: Int.MIN_VALUE
+
+
+    fun setAppearance(isDark: Boolean) {
+        if (!isMac) return
+        NSApplication.sharedApplication().setAppearance(
+            if (isDark) {
+                darkAppearance
+            } else {
+                lightAppearance
+            }
+        )
+    }
 }
diff --git a/src/main/kotlin/online/hudacek/fxradio/util/macos/NSMenuHelper.kt b/src/main/kotlin/online/hudacek/fxradio/util/macos/NSMenuHelper.kt
@@ -19,7 +19,6 @@
 package online.hudacek.fxradio.util.macos
 
 import de.jangassen.MenuToolkit
-import de.jangassen.model.AppearanceMode
 import javafx.scene.control.Menu
 import javafx.scene.control.MenuBar
 import javafx.scene.control.MenuItem
@@ -35,9 +34,7 @@ import tornadofx.get
  */
 class NSMenuHelper : Component() {
 
-    private val tk = MenuToolkit.toolkit(FX.locale).apply {
-        setAppearanceMode(AppearanceMode.AUTO)
-    }
+    private val tk by lazy { MenuToolkit.toolkit(FX.locale) }
 
     /**
      * macOS style default About Menu

diff --git a/src/main/kotlin/online/hudacek/fxradio/viewmodel/PreferencesViewModel.kt b/src/main/kotlin/online/hudacek/fxradio/viewmodel/PreferencesViewModel.kt
@@ -18,17 +18,14 @@
 
 package online.hudacek.fxradio.viewmodel
 
+import com.jthemedetecor.OsThemeDetector
 import javafx.beans.property.BooleanProperty
 import javafx.beans.property.ObjectProperty
 import online.hudacek.fxradio.FxRadio
 import online.hudacek.fxradio.ui.style.AccentColor
 import online.hudacek.fxradio.ui.style.Appearance
-import online.hudacek.fxradio.util.Properties
-import online.hudacek.fxradio.util.Property
+import online.hudacek.fxradio.util.*
 import online.hudacek.fxradio.util.macos.MacUtils
-import online.hudacek.fxradio.util.reloadStylesheets
-import online.hudacek.fxradio.util.save
-import online.hudacek.fxradio.util.value
 import tornadofx.booleanProperty
 import tornadofx.property
 
@@ -64,5 +61,6 @@ class PreferencesViewModel : BaseViewModel<Preferences>(Preferences()) {
         Properties.UseTrayIcon.save(useTrayIconProperty.value)
         Properties.DarkMode.save(darkModeProperty.value)
         reloadStylesheets(darkModeProperty.value)
+        MacUtils.setAppearance(darkModeProperty.value)
     }
 }
diff --git a/src/main/resources/Messages.properties b/src/main/resources/Messages.properties
@@ -12,7 +12,7 @@ close=Close
 cancel=Cancel
 save=Save
 open=Open
-search=Search radio directory
+search=Search
 loading=Loading...
 countries=Countries
 library=Library
@@ -69,14 +69,17 @@ app.preferences=Preferences
 app.appearance=App Appearance
 app.useSystemColor=Use system accent color:
 app.accentColor=Accent color:
-app.darkMode=Dark Mode
+app.darkMode=App Theme
 app.trayIcon=System Tray Icon
 app.trayIcon.enable=Enable Tray Icon:
 menu.app.quit=Quit
 menu.app.about=About
 menu.app.attributions=Attributions
 menu.app.server=Change API server
-menu.app.darkmode=Enable dark mode:
+menu.app.darkmode=Select App Theme:
+menu.app.dark=Dark
+menu.app.light=Light
+menu.app.system=System
 menu.player.controls=_Playback
 menu.player.stop=Stop
 menu.player.start=Play