Custom Color Schemes for Stipple Apps

[TheCedarPrince]

I would love the Genie Framework to provide themes for users!
For example, I have to following code:

using DataFrames
using Stipple
using StippleUI

import RDatasets: dataset

WEB_TRANSPORT = Genie.WebChannels

data = DataFrames.insertcols!(dataset("datasets", "iris"))

@reactive mutable struct IrisModel <: ReactiveModel
  iris_data::R{DataTable} = DataTable(data)
  table_pagination::DataTablePagination =
    DataTablePagination(rows_per_page=50) 

end

Stipple.register_components(IrisModel)

function ui(model::IrisModel)
  page(
    model, class="container", title="Iris Flowers Clustering", head_content=Genie.Assets.favicon_support(),

    prepend = style(
    """
    tr:nth-child(even) {
      background: #F8F8F8 !important;
    }

    .st-module {
      background-color: #FFF;
      border-radius: 2px;
      box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.04);
    }

    .stipple-core .st-module > h5,
    .stipple-core .st-module > h6 {
      border-bottom: 0px !important;
    }
    """
    ),

    [
      heading("Iris data k-means clustering")

      row([
        cell(class="st-module", [
          h5("Iris data")
          table(:iris_data; pagination=:table_pagination, dense=true, flat=true, style="height: 350px;")
        ])
      ])
    ]
  )
end

route("/") do
  init(IrisModel(), transport = WEB_TRANSPORT) |> ui |> html
end

up(9000; async = true, server = Stipple.bootstrap())

Which produces the following image:

Rather than having to prepend a style manually in CSS, it would be nice to have something like this:

style("st-module" => (element = :table, color_scheme = :blues))

Where the color_scheme is something that Genie could provide with default colors for a given widget, in this case the element, :table.
This gets rid of someone having to know CSS and instead could work with nice themes quickly.
Any thoughts on this?

[AbhimanyuAryan]

Thanks @TheCedarPrince

[essenciary]

Yes, Stipple already uses a theme called 'stipple-blue' which is the only one we have :) So themes are part of the original architecture but more dedicated work is needed to actually support them and build them (ie needs integration with Quasar themes, support for night mode, etc).

[TheCedarPrince]

Ah got it!
Exciting how it is on the roadmap and curious to see where it goes. :)

[jochenkrattenmacher]

I have a related issue which I thought I'd mention here. Currently I am trying to change the styles of my headings, and it seems a little cumbersome at the moment. Basically, it seems one needs to use !important for changes of font size? Is there any easy way to use one's custom css file instead of the one supplied by Stipple (stipplecore.css), or to overwrite the definitions in it?

UPDATE (IN JULY): The following works conveniently enough for my current purposes:

function theme1()
    [link(href = "$folder/style.css", rel = "stylesheet"), ""]
end
push!(Stipple.Layout.THEMES, theme1)

with style.css:

.stipple-core h1 {
    font-size: 3em;
    line-height: 1em;
}

[essenciary]

There is a bool option called core_theme which can be disabled and this should remove some of the styling (but would also leave you responsible for styling more of the elements). When you call Stipple.init you can pass core_theme = false and take it from there.

[jochenkrattenmacher]

Thanks! I don't seem to get that work for me though :/ I am not sure whether that's my fault or we have a bug here. This code below still produces a page which loads stipplecore.css:

using Genie.Router
using Stipple

@reactive! mutable struct Presentation <: ReactiveModel
    current_id::R{Int8} = 1
end

function init_presentation()
    presentation = Stipple.init(Presentation, core_theme = false)
    on(presentation.isready) do ready
        ready || return
        push!(presentation)        
    end
    presentation
end

function ui(presentation)
    page(presentation, "",
    [
        h1("slide 1"),
    ]
    )
end

route("/") do
  init_presentation() |> ui |> html
end

up(8080, open_browser = true)

I get the same result if I try Stipple.init(Presentation; core_theme = false) instead (semicolon instead of comma)

[essenciary]

Yes, I suspect it's a bug. Can you please open an issue?