Style fault on DarkTheme

[Fabian]

Describe the Issue

The dark theme has different components with an unsuitable style:

• Button background color on focus, active is green, purple
• Button font style and size do not matche to the content style
• Button text color is black
• Input checkbox is invisible if checked (same color as the background)

To Reproduce

$Theme = Get-UDTheme DarkDefault

$Dashboard = New-UDDashboard -Title "Test" -Theme $Theme -Content {
    New-UDInput -Title "Test Input" -Endpoint {
        Param([bool]$Boolean)
    }

    New-UDTabContainer -Tabs {
        New-UDTab -Text "Tab 1" -Content {
            New-UDElement -Tag 'div' -Content { "Tab 1 Content"}
        }
        New-UDTab -Text "Tab 2" -Content {
            New-UDElement -Tag 'div' -Content { "Tab 2 Content"}
        }
        New-UDTab -Text "Tab 3" -Content {
            New-UDElement -Tag 'div' -Content { "Tab 3 Content"}
        }
    }
}

Start-UDDashboard -Dashboard $Dashboard -Port 80 -Force

Expected behavior

I like the following style changes:

$Theme = New-UDTheme -name "DarkDefaultFixed" -Parent DarkDefault -Definition @{    
    #change button font style and size
    '.mdc-tab' = @{
        'font-familiy' = '-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif'
        'font-size' = '14px'
        'font-width' = '400'        
    }
    #change button underline color
    '.mdc-tab-indicator--active .mdc-tab-indicator__content' = @{
        'border-color' = 'white'
    }
    #change active button background color
    'button.mdc-tab--active.mdc-ripple-upgraded.mdc-tab--active.mdc-tab' = @{
        'background-color' = 'rgba(51, 51, 51, 1)'
    }
    #change inactive button color
    '.mdc-tab .mdc-tab__text-label' = @{
        'color' = 'white'
    }
    #change active button color
    '.mdc-tab--active.mdc-tab__text-label' = @{
        'color' = 'white'
    }
    #fix button green background flicker after click and bevore active
    'button:focus' = @{
        'background-color' = 'rgba(90,90,90,1)'
    }
    #fix button background color bevor click
    '.mdc-tab__ripple::before' = @{
        'background-color' = 'rgba(90, 90, 90, 1)'
    }
    #fix button background color after click
    '.mdc-tab__ripple::after' = @{
        'background-color' = 'rgba(90, 90, 90, 1)'
    }
    #Fix checkbox visibility if checked
    '[type="checkbox"]:checked + span:not(.lever)::before' = @{
        'border-bottom' = '2px solid rgba(90, 90, 90, 1)'
        'border-right' = '2px solid rgba(90, 90, 90, 1)'
    }
}

Screenshots

https://i.imgur.com/p9x4CHW.png

Version Information

• Operating System: Windows 10
• PowerShell Version: 5.1
• Universal Dashboard Version: 2.9.0
• UD Hosting Method: Powershell, IIS