Styling doesn't respect dark themes

[jpike88]

[danielmoncada]

@jpike88 before forking this, when I was using this original package, we had the same issue. We went ahead and used ::ngdeep it get around this. Even though it's deprecated, it works great. All investigate and native solution.

[jpike88]

I use these styles:

@media (prefers-color-scheme: dark) {
    .owl-dt-container {
        background-color: #303030;
        color: white;
    }

    .owl-dt-calendar-control {
        color: white;
    }

    .owl-dt-control-button-arrow svg {
        fill: white;
    }

    .owl-dt-calendar-table .owl-dt-calendar-cell {
        color: rgba(255, 255, 255, 0.85);
    }

    .owl-dt-calendar-table .owl-dt-calendar-header {
        color: rgba(255, 255, 255, 0.4);
    }

    .owl-dt-timer-input {
        background-color: #666;
    }

    .owl-dt-control-content {
        color: white;
    }
}

.owl-dt-control-content {
    text-transform: uppercase;
    font-family: Roboto, "Helvetica Neue", sans-serif;
    font-size: 14px;
    font-weight: 500;
}

[danielmoncada]

This is SASS, but you get the idea. This should work:

::ng-deep 
    .owl-dt-container 
        background-color: #303030
        color: white

::ng-deep 
    .owl-dt-calendar-control 
    .owl-dt-calendar-cell
        color: white

::ng-deep 
    .owl-dt-control-button-arrow svg 
        fill: white

::ng-deep 
    .owl-dt-calendar-table 
    .owl-dt-calendar-cell 
        color: rgba(255, 255, 255, 0.85)

::ng-deep 
    .owl-dt-calendar-table 
    .owl-dt-calendar-header 
        color: rgba(255, 255, 255, 0.4)

::ng-deep 
    .owl-dt-timer-input 
        background-color: #666

::ng-deep 
    .owl-dt-control-content 
        color: white

[danielmoncada]

@jpike88 did this work for you?

[jpike88]

yep, worked alright. though the extra owl-dt-control-content was necessary for it to fall in line with angular material