Add default styling for nih_plug_vizia GUIs

nih_plug_vizia/assets/theme.css

@@ -0,0 +1 @@
+/* Default styling for the widgets included in nih_plug_vizia */

nih_plug_vizia/src/assets.rs

@@ -6,7 +6,8 @@ use vizia::Context;
 // This module provides a re-export and simple font wrappers around the re-exported fonts.
 pub use nih_plug_assets::*;
 
-/// Register the fonts from this module so they can be used with VIZIA.
+/// Register the fonts from this module so they can be used with VIZIA. This is automatically called
+/// for you when using [`create_vizia_editor()`][super::create_vizia_editor()].
 pub fn register_fonts(cx: &mut Context) {
     cx.add_font_mem(NOTO_SANS_REGULAR, fonts::NOTO_SANS_REGULAR);
     cx.add_font_mem(NOTO_SANS_REGULAR_ITALIC, fonts::NOTO_SANS_REGULAR_ITALIC);

nih_plug_vizia/src/lib.rs

@@ -5,7 +5,7 @@ use crossbeam::atomic::AtomicCell;
 use nih_plug::prelude::{Editor, GuiContext, ParamSetter, ParentWindowHandle};
 use std::sync::atomic::{AtomicBool, Ordering};
 use std::sync::Arc;
-use vizia::{Application, Context, Model, WindowDescription};
+use vizia::{Application, Color, Context, Entity, Model, PropSet, WindowDescription};
 
 // Re-export for convenience
 pub use vizia;
@@ -89,6 +89,22 @@ impl Editor for ViziaEditor {
         let window = Application::new(window_description, move |cx| {
             let setter = ParamSetter::new(context.as_ref());
 
+            // Set some default styles to match the iced integration
+            // TODO: Maybe add a way to override this behavior
+            // NOTE: vizia's font rendering looks way too dark and thick. Going one font weight
+            //       lower seems to compensate for this.
+            assets::register_fonts(cx);
+            cx.set_default_font(assets::NOTO_SANS_LIGHT);
+
+            // TOOD: `:root { background-color: #fafafa; }` in a stylesheet doesn't work
+            Entity::root().set_background_color(cx, Color::rgb(250, 250, 250));
+            // VIZIA uses points instead of pixels, this is 20px
+            cx.add_theme("* { font-size: 15; }");
+
+            // There doesn't seem to be any way to bundle styles with a widget, so we'll always
+            // include the style sheet for our custom widgets at context creation
+            widgets::register_theme(cx);
+
             // Any widget can change the parameters by emitting `ParamEvent` events. This model will
             // handle them automatically.
             widgets::ParamModel {

nih_plug_vizia/src/widgets.rs

@@ -9,7 +9,13 @@ use nih_plug::param::internals::ParamPtr;
 use nih_plug::prelude::{GuiContext, Param};
 use std::sync::Arc;
 
-use vizia::{Message, Model};
+use vizia::{Context, Model};
+
+/// Register the default theme for the widgets exported by this module. This is automatically called
+/// for you when using [`create_vizia_editor()`][super::create_vizia_editor()].
+pub fn register_theme(cx: &mut Context) {
+    cx.add_theme(include_str!("../assets/theme.css"));
+}
 
 /// An event that updates a parameter's value. Since NIH-plug manages the parameters, interacting
 /// with parameter values with VIZIA works a little different from updating any other state. These

plugins/examples/gain-gui-vizia/src/editor.rs

@@ -10,12 +10,7 @@ use crate::GainParams;
 /// VIZIA uses points instead of pixels for text
 const POINT_SCALE: f32 = 0.75;
 
-const STYLE: &str = r#"
+const STYLE: &str = r#""#;
-* {
-    /* VIZIA uses points instead of pixels */
-    font-size: 15; /* 20px */
-}
-"#;
 
 // Makes sense to also define this here, makes it a bit easier to keep track of
 pub(crate) fn default_state() -> Arc<ViziaState> {
@@ -28,8 +23,6 @@ pub(crate) fn create(
     editor_state: Arc<ViziaState>,
 ) -> Option<Box<dyn Editor>> {
     create_vizia_editor(editor_state, |cx, setter| {
-        // TOOD: `:root { background-color: #fafafa; }` in a stylesheet doesn't work
-        Entity::root().set_background_color(cx, Color::rgb(250, 250, 250));
         cx.add_theme(STYLE);
 
         // NOTE: vizia's font rendering looks way too dark and thick. Going one font weight lower