Neutrino is displaying its widgets using HTML and CSS. This means that the look of the application is not native. However, neutrino provides the ability to style and theme your app to match your platform look n feel. Two ways of styling are possible : user-defined styles and neutrino-defined themes.

If you look at the HTML code produced by neutrino, you will notice that you set a name for every widget you create. Internally, neutrino use these names as ids for the produced HTML tags. You can thus write SCSS (or CSS) as a string and attach it to the Window with the set_style function. Here is an example using the counter created in this page :

// main.rs

// ...

fn main() {
    let counter = Rc::new(RefCell::new(Counter::new()));

    let listener = MyButtonListener::new(Rc::clone(&counter));

    let mut button = Button::new("my_button");
    button.set_text("0");
    button.set_listener(Box::new(listener));

    let style = r#"
        #my_button {
            background: lime;
        }
    "#;

    let mut window = Window::new();
    window.set_title("Add data");
    window.set_size(320, 240);
    window.set_child(Box::new(button));
    window.set_style(style);

    App::run(window);
}

You can even change the whole style of your application. Here is what login example looks like :

If you created a custom CSS stylesheet and you want to make it available to others, you can create a Theme. In neutrino, Themes stylesheets are SASS files contained in src/www/<Theme>.scss. You just have to put your theme file there and the build.rs script will provide it in the Theme enum. You will then be able to use it with the function set_theme of Window.

For now, five themes are provided :

Default - easy to understand to make other themes

Breeze - KDE Plasma default theme

Adwaita - Gnome default theme

OSX - Mac OSX theme

Fluent - Windows Fluent UI

You can run these examples by running the commands :

neutrino run --example demo default
neutrino run --example demo breeze
neutrino run --example demo adwaita
neutrino run --example demo osx
neutrino run --example demo fluent

As we saw with our image viewer, it is possible to import local images into an app. However, neutrino already contains some icons in the icons.rs enums. If you want to add more, it is simple : add your camel case named icons into the src/www/icons/<IconTheme> folder. The build.rs script will automatically create the icon theme enum for you to use.

You can now style how you want your application ! And don't forget, if you made a theme, you can make a Pull Request for it to be integrated directly into neutrino.