Universal Dashboard v3 Progress

Universal Dashboard UD Development
7

what you guys think about the new theme file and approach ,

let start from the end the result is this

image
image433×598 41.5 KB

but instead of defining the style in the component you define the look in the theme, so in the example i want to create 3 avatars in different sizes
so in the theme file i do this

@{  
    name       = "basic"
    definition = @{
        colors   = @{
            primary    = "#df5656"
            secondary  = "#fdc533"
            background = "#c1c1c1"
            text       = "#333"
            muted      = "#d6d6d6"
        }
        modes    = @{
            dark = @{
                primary    = "#eaa22222"
                secondary  = "#fdc533"
                background = "#333"
                text       = "#fff"
                muted      = "#ccc"
            }
        }
        avatars = @{
            small = @{
                width = '24px'
                height = '24px'
                margin = '16px'
                borderRadius = '50%'
            }
            medium = @{
                width = '48px'
                height = '48px'
                margin = '16px'
                borderRadius = '50%'
            }
            large = @{
                width = '96px'
                height = '96px'
                margin = '16px'
                borderRadius = '50%'
            }
        }   
    }
}

I create new “section” name avatars and set the sizes with there props

and in the powershell function New-UDMUAvatar instead of using the property -Style @{…}
i use the -Variant property, for example, New-UDMUAvatar … -Variant small, this will create an avatar image with all the styles that we define in the theme avatars small.

New-UDAvatar -Image 'https://avatars2.githubusercontent.com/u/34351424?s=460&v=4' -Alt 'alon gvili avatar' -Id 'avatarContent' -Variant small
New-UDAvatar -Image 'https://avatars2.githubusercontent.com/u/34351424?s=460&v=4' -Alt 'alon gvili avatar' -Id 'avatarContent' -Variant medium
New-UDAvatar -Image 'https://avatars2.githubusercontent.com/u/34351424?s=460&v=4' -Alt 'alon gvili avatar' -Id 'avatarContent' -Variant large

Dark Color Mode

the new theme comes with built-in support for dark mode
to enable the dark theme you need to add this section

modes    = @{
            dark = @{
                primary    = "#eaa22222"
                secondary  = "#fdc533"
                background = "#333"
                text       = "#fff"
                muted      = "#ccc"
            }
        }

and to use the dark the or toggle between light and dark you can use New-UDToggleColorMode button

When the theme is light the icon will be image and when dark image

Notes

  • The new theme will give you support for dynamic spacing and fontSize base on the media breakpoint
    so you don’t need to deal with how the text look in different screens.

  • my main goal is to remove the properties: style,fontColor,backgroundColor from all the components, you can manage all of this in the theme

  • and for you component and module authors i will tell you that it so easy to add the theme support to you components, i will write small doc on How To do it

10 Likes