Extensions Blog Press Contribute Forum FAQ Videos Changelog About Contact English
Chrome extensions you can't live without!
Extensions Blog Press Contribute Support About
Forum FAQ Videos Changelog Bio Contact

Dark Red Theme

I made this theme based on my settings in the calendar, so there may be some issues with different colors when different settings are enabled. I checked it with the built-in themes and skins and it seems to work with all of them except the dark theme which uses color inversion making this theme light, and the [Cal events] Black font which only makes the font black for future full-day events. The blue and green themes work with this theme, but I made a few more things red, so those will stay red even if you add these themes as well. If you don't like red, you can change the "--primary-color" and "--accent-color" colors (at the bottom of the code) to whatever you want.




/*background color*/

body.popup app-toolbar,

#betaCalendar .fc-month-view .timedEvent .fc-content:hover .fc-title,

app-header,

.fc-unthemed .fc-list-item:hover td {

    background-color: var(--primary-background-color) !important;

}

paper-item:hover,

paper-icon-item:hover,

textarea,

.ui-datepicker,

#skinsDialog .addButton,

#betaCalendar .fc-basic-view .fc-week-number {

    background-color: var(--secondary-background-color) !important;

}

.fc-unthemed .fc-list-heading td {

    background-color: #444;

}

#mainContent {

    background-color: #000b !important;

}

#betaCalendar.highlightWeekends .fc-sat, #betaCalendar.highlightWeekends .fc-sun {

    background-color: var(--primary-background-color);

    opacity: 0.8;

}

.fc-unthemed .fc-list-empty {

    background-color: #0000;

}

body {

    background-color: #000;

}



/*scroll bar*/

::-webkit-scrollbar,

::-webkit-scrollbar-corner {

    background-color: var(--secondary-background-color);

}

::-webkit-resizer {

    background-color: var(--primary-background-color);

}

::-webkit-scrollbar-track {

    box-shadow: inset 0 0 10px var(--line-color); 

    border-radius: 10px;

}

::-webkit-scrollbar-thumb {

    background-color: var(--accent-color); 

    border-radius: 10px;

}

::-webkit-scrollbar-thumb:hover {

    background-color: var(--primary-color);

}



/*text color, boldness, and opacity*/

#betaCalendar .fc-basic-view .fc-week-number,

#betaCalendar .fc-basic-view .fc-day-number,

#calendarTitle,

.ui-datepicker-title,

#betaCalendar .fc-month-view .timedEvent .fc-title,

body.popup app-toolbar,

.ui-datepicker,

thead,

.fc-unthemed .fc-list-heading td,

.fc-unthemed .fc-list-empty {

    color: var(--primary-text-color);

    font-weight: 500;

}

.dayOfYear,

#betaCalendar .fc-month-view .timedEvent .fc-time,

#betaCalendar .fc-custom-view .timedEvent .fc-time,

paper-item:hover,

paper-icon-item:hover,

textarea,

#mainContent,

app-header,

#betaCalendar.highlightPastDays .fc-event.pastEvent .fc-content .fc-time,

#betaCalendar.highlightPastDays .fc-event.pastEvent .fc-content .fc-title,

#betaCalendar .fc-list-item {

    color: var(--secondary-text-color);

    font-weight: 500;

}

#betaCalendar.highlightPastDays .fc-past,

#betaCalendar.highlightPastDays .pastEvent .eventColorIndicator,

#betaCalendar.highlightPastDays .pastEvent .fc-time,

#betaCalendar.highlightPastDays .pastEvent .fc-content .fc-title {

    opacity: 0.5 !important;

}



/*sidebar calendar*/

.ui-state-default {

    color: var(--secondary-text-color) !important;

}

.ui-state-default:hover {

    color: #000 !important;

}



/*today highlight*/

.ui-state-highlight,

.ui-widget-content .ui-state-highlight,

.ui-widget-header .ui-state-highlight,

#betaCalendar .fc-today .fc-day-number {

    background-color: var(--accent-color) !important;

}

.ui-state-highlight:hover,

.ui-widget-content .ui-state-highlight:hover,

.ui-widget-header .ui-state-highlight:hover {

    background-color: var(--primary-color) !important;

}

#betaCalendar th.fc-today,

.agendaDay.today .agendaDateWrapper {

    color: var(--primary-color) !important;

}



/*lines*/

textarea,

textarea:focus,

.fc-unthemed .fc-popover,

.fc-unthemed .fc-row,

.fc-unthemed hr,

.fc-unthemed tbody,

.fc-unthemed td,

.fc-unthemed th,

.fc-unthemed thead,

.fc-view {

    border-color: var(--line-color) !important;

    outline-color: var(--line-color);

}

.separator,

.fc-unthemed .fc-divider {

    background-color: var(--line-color);

}



/*icons*/

paper-icon-button,

paper-dialog .buttons paper-icon-button {

    color: var(--primary-color);

    --iron-icon_-_opacity: 0.7;

}



/*OK button*/

paper-button[raised].colored {

    background-color: var(--accent-color) !important;

    color: var(--primary-text-color);

    font-weight: 700;

}



/*links*/

a,

a:visited {

    color: var(--primary-color);

}



/*user variables*/

* {

    --primary-background-color: #222;

    --secondary-background-color: #000;

    --primary-text-color: #aaa;

    --secondary-text-color: #888;

    --primary-color: #f44;

    --accent-color: #a00;

    --line-color: #444;

    --today-color-with-transparency: #4448;

    --today-color-full-transparency: #4440;

}




Comments

  • Very cool, I might add this to the collection, thanks for sharing.

  • Here's an updated version with a few minor changes:



    /*background color*/

    body.popup app-toolbar,

    #betaCalendar .fc-month-view .timedEvent .fc-content:hover .fc-title,

    app-header,

    .fc-unthemed .fc-list-item:hover td {

        background-color: var(--primary-background-color) !important;

    }

    paper-item:hover,

    paper-icon-item:hover,

    textarea,

    .ui-datepicker,

    #skinsDialog .addButton,

    #betaCalendar .fc-basic-view .fc-week-number {

        background-color: var(--secondary-background-color) !important;

    }

    .fc-unthemed .fc-list-heading td {

        background-color: #444;

    }

    #mainContent {

        background-color: #000b !important;

    }

    #betaCalendar.highlightWeekends .fc-sat,

    #betaCalendar.highlightWeekends .fc-sun{

        background-color: #444a;

    }

    .fc-unthemed .fc-list-empty,

    .fc-day-top {

        background-color: #0000 !important;

    }

    body {

        background-color: #000;

    }



    /*scroll bar*/

    ::-webkit-scrollbar,

    ::-webkit-scrollbar-corner {

        background-color: var(--secondary-background-color);

    }

    ::-webkit-resizer {

        background-color: var(--primary-background-color);

    }

    ::-webkit-scrollbar-track {

        box-shadow: inset 0 0 10px var(--line-color); 

        border-radius: 10px;

    }

    ::-webkit-scrollbar-thumb {

        background-color: var(--accent-color); 

        border-radius: 10px;

    }

    ::-webkit-scrollbar-thumb:hover {

        background-color: var(--primary-color);

    }



    /*text color, boldness, and opacity*/

    #betaCalendar .fc-basic-view .fc-week-number,

    #betaCalendar .fc-basic-view .fc-day-number,

    #calendarTitle,

    .ui-datepicker-title,

    #betaCalendar .fc-month-view .timedEvent .fc-title,

    body.popup app-toolbar,

    .ui-datepicker,

    thead,

    .fc-unthemed .fc-list-heading td,

    .fc-unthemed .fc-list-empty {

        color: var(--primary-text-color);

        font-weight: 500;

    }

    .dayOfYear,

    #betaCalendar .fc-month-view .timedEvent .fc-time,

    #betaCalendar .fc-custom-view .timedEvent .fc-time,

    paper-item:hover,

    paper-icon-item:hover,

    textarea,

    #mainContent,

    app-header,

    #betaCalendar.highlightPastDays .fc-event.pastEvent .fc-content .fc-time,

    #betaCalendar.highlightPastDays .fc-event.pastEvent .fc-content .fc-title,

    #betaCalendar .fc-list-item {

        color: var(--secondary-text-color);

        font-weight: 500;

    }

    #betaCalendar.highlightPastDays .fc-past,

    #betaCalendar.highlightPastDays .pastEvent .eventColorIndicator,

    #betaCalendar.highlightPastDays .pastEvent .fc-time,

    #betaCalendar.highlightPastDays .pastEvent .fc-content .fc-title {

        opacity: 0.5 !important;

    }



    /*sidebar calendar*/

    .ui-state-default {

        color: var(--secondary-text-color) !important;

    }

    .ui-state-default:hover {

        color: #000 !important;

    }



    /*today highlight*/

    .ui-state-highlight,

    .ui-widget-content .ui-state-highlight,

    .ui-widget-header .ui-state-highlight,

    #betaCalendar .fc-today .fc-day-number {

        background-color: var(--accent-color) !important;

    }

    .ui-state-highlight:hover,

    .ui-widget-content .ui-state-highlight:hover,

    .ui-widget-header .ui-state-highlight:hover {

        background-color: var(--primary-color) !important;

    }

    #betaCalendar th.fc-today,

    .agendaDay.today .agendaDateWrapper {

        color: var(--primary-color) !important;

    }



    /*lines*/

    textarea,

    textarea:focus,

    .fc-unthemed .fc-popover,

    .fc-unthemed .fc-row,

    .fc-unthemed hr,

    .fc-unthemed tbody,

    .fc-unthemed td,

    .fc-unthemed th,

    .fc-unthemed thead,

    .fc-view {

        border-color: var(--line-color) !important;

        outline-color: var(--line-color);

    }

    .separator,

    .fc-unthemed .fc-divider {

        background-color: var(--line-color);

    }



    /*icons*/

    paper-icon-button,

    paper-dialog .buttons paper-icon-button {

        color: var(--primary-color);

        --iron-icon_-_opacity: 0.7;

    }



    /*OK button*/

    paper-button[raised].colored {

        background-color: var(--accent-color) !important;

        color: var(--primary-text-color);

        font-weight: 700;

    }



    /*links*/

    a,

    a:visited {

        color: var(--primary-color);

    }



    /*user variables*/

    * {

        --primary-background-color: #222;

        --secondary-background-color: #000;

        --primary-text-color: #aaa;

        --secondary-text-color: #888;

        --primary-color: #f44;

        --accent-color: #a00;

        --line-color: #444;

        --today-color-with-transparency: #4448;

        --today-color-full-transparency: #4440;

    }

  • Here's a gmail version:




    /*background color*/

    .mail,

    app-header,

    app-toolbar,

    .label {

           background-color: var(--primary-background-color) !important;

    }

    paper-item:hover,

    paper-icon-item:hover,

    textarea,

    #skinsDialog .addButton,

    #accountAvatars {

           background-color: var(--secondary-background-color) !important;

    }

    .accountHeader {

           background-color: #0008 !important;

    }

    #accountAvatars {

           height: 100vh;

           margin-top: 0;

           padding-top: 2vh;

    }

    app-drawer-layout {

           background-color: #000b !important;

    }

    body {

           background-color: #000;

    }



    /*scroll bar*/

    ::-webkit-scrollbar,

    ::-webkit-scrollbar-corner {

           background-color: var(--secondary-background-color);

    }

    ::-webkit-resizer {

           background-color: var(--primary-background-color);

    }

    ::-webkit-scrollbar-track {

           box-shadow: inset 0 0 10px var(--line-color);

           border-radius: 10px;

    }

    ::-webkit-scrollbar-thumb {

           background-color: var(--accent-color);

           border-radius: 10px;

    }

    ::-webkit-scrollbar-thumb:hover {

           background-color: var(--primary-color);

    }



    /*text color*/

    #titleLabel,

    .accountTitle,

    .unreadCount,

    .unread,

    .labelName {

           color: var(--primary-text-color);

    }

    paper-item:hover,

    paper-icon-item:hover,

    textarea,

    app-header,

    html:not(.searchInputVisible) #inboxSection app-header-layout app-toolbar paper-icon-button:not(#menu),

    .snippet {

           color: var(--secondary-text-color) !important;

    }



    /*lines*/

    textarea,

    textarea:focus,

    .mail

    {

           border-color: var(--line-color) !important;

           outline-color: var(--line-color);

    }

    .separator {

           background-color: var(--line-color);

    }




    /*colors*/

    paper-icon-button,

    paper-dialog .buttons paper-icon-button,

    paper-swatch-picker:host(paper-icon-button) {

           color: var(--primary-color);

           --iron-icon_-_opacity: 0.7;

    }

    .labelName {

           background-color: var(--accent-color);

    }



    /*OK button*/

    paper-button[raised].colored {

           background-color: var(--accent-color) !important;

           color: var(--primary-text-color);

           font-weight: 700;

    }



    /*links*/

    a,

    a:visited {

           color: var(--primary-color);

    }



    /*user variables*/

    * {

           --primary-background-color: #222;

           --secondary-background-color: #000;

           --primary-text-color: #aaa;

           --secondary-text-color: #888;

           --primary-color: #f44;

           --accent-color: #a00;

           --line-color: #444;

    }

  • And finally, here's a theme that works for both:




    /*background color*/

    .mail,

    body.popup app-toolbar:not(.accountHeader),

    #betaCalendar .fc-month-view .timedEvent .fc-content:hover .fc-title,

    app-header,

    .fc-unthemed .fc-list-item:hover td,

    .label {

        background-color: var(--primary-background-color) !important;

    }

    paper-item:hover,

    paper-icon-item:hover,

    textarea,

    .ui-datepicker,

    #skinsDialog .addButton,

    #betaCalendar .fc-basic-view .fc-week-number,

    #accountAvatars {

        background-color: var(--secondary-background-color) !important;

    }

    .accountHeader {

        background-color: #0008 !important;

    }

    #accountAvatars {

        height: 100vh;

        margin-top: 0;

        padding-top: 2vh;

    }

    .fc-unthemed .fc-list-heading td {

        background-color: #444;

    }

    app-drawer-layout,

    #mainContent {

        background-color: #000b !important;

    }

    #betaCalendar.highlightWeekends .fc-sat,

    #betaCalendar.highlightWeekends .fc-sun{

        background-color: #444a;

    }

    .fc-unthemed .fc-list-empty,

    .fc-day-top {

        background-color: #0000 !important;

    }

    body {

        background-color: #000;

    }



    /*scroll bar*/

    ::-webkit-scrollbar,

    ::-webkit-scrollbar-corner {

        background-color: var(--secondary-background-color);

    }

    ::-webkit-resizer {

        background-color: var(--primary-background-color);

    }

    ::-webkit-scrollbar-track {

        box-shadow: inset 0 0 10px var(--line-color);

        border-radius: 10px;

    }

    ::-webkit-scrollbar-thumb {

        background-color: var(--accent-color);

        border-radius: 10px;

    }

    ::-webkit-scrollbar-thumb:hover {

        background-color: var(--primary-color);

    }



    /*text color, boldness, and opacity*/

    #titleLabel,

    .accountTitle,

    .unreadCount,

    .unread,

    .labelName {

        color: var(--primary-text-color);

    }

    #betaCalendar .fc-basic-view .fc-week-number,

    #betaCalendar .fc-basic-view .fc-day-number,

    #calendarTitle,

    .ui-datepicker-title,

    #betaCalendar .fc-month-view .timedEvent .fc-title,

    body.popup app-toolbar,

    .ui-datepicker,

    thead,

    .fc-unthemed .fc-list-heading td,

    .fc-unthemed .fc-list-empty {

        color: var(--primary-text-color);

        font-weight: 500;

    }

    .dayOfYear,

    #betaCalendar .fc-month-view .timedEvent .fc-time,

    #betaCalendar .fc-custom-view .timedEvent .fc-time,

    paper-item:hover,

    paper-icon-item:hover,

    textarea,

    #mainContent,

    app-header,

    #betaCalendar.highlightPastDays .fc-event.pastEvent .fc-content .fc-time,

    #betaCalendar.highlightPastDays .fc-event.pastEvent .fc-content .fc-title,

    #betaCalendar .fc-list-item {

        color: var(--secondary-text-color);

        font-weight: 500;

    }

    html:not(.searchInputVisible) #inboxSection app-header-layout app-toolbar paper-icon-button:not(#menu),

    .snippet {

        color: var(--secondary-text-color);

    }

    #betaCalendar.highlightPastDays .fc-past,

    #betaCalendar.highlightPastDays .pastEvent .eventColorIndicator,

    #betaCalendar.highlightPastDays .pastEvent .fc-time,

    #betaCalendar.highlightPastDays .pastEvent .fc-content .fc-title {

        opacity: 0.5 !important;

    }



    /*sidebar calendar*/

    .ui-state-default {

        color: var(--secondary-text-color) !important;

    }

    .ui-state-default:hover {

        color: #000 !important;

    }



    /*today highlight*/

    .ui-state-highlight,

    .ui-widget-content .ui-state-highlight,

    .ui-widget-header .ui-state-highlight,

    #betaCalendar .fc-today .fc-day-number {

        background-color: var(--accent-color) !important;

    }

    .ui-state-highlight:hover,

    .ui-widget-content .ui-state-highlight:hover,

    .ui-widget-header .ui-state-highlight:hover {

        background-color: var(--primary-color) !important;

    }

    #betaCalendar th.fc-today,

    .agendaDay.today .agendaDateWrapper {

        color: var(--primary-color) !important;

    }



    /*lines*/

    textarea,

    textarea:focus,

    .mail,

    .fc-unthemed .fc-popover,

    .fc-unthemed .fc-row,

    .fc-unthemed hr,

    .fc-unthemed tbody,

    .fc-unthemed td,

    .fc-unthemed th,

    .fc-unthemed thead,

    .fc-view {

        border-color: var(--line-color) !important;

        outline-color: var(--line-color);

    }

    .separator,

    .fc-unthemed .fc-divider {

        background-color: var(--line-color);

    }



    /*colors*/

    paper-icon-button,

    paper-dialog .buttons paper-icon-button {

        color: var(--primary-color);

        --iron-icon_-_opacity: 0.7;

    }

    .labelName {

        background-color: var(--accent-color);

    }



    /*OK button*/

    paper-button[raised].colored {

        background-color: var(--accent-color) !important;

        color: var(--primary-text-color);

        font-weight: 700;

    }



    /*links*/

    a,

    a:visited {

        color: var(--primary-color);

    }



    /*user variables*/

    * {

        --primary-background-color: #222;

        --secondary-background-color: #000;

        --primary-text-color: #aaa;

        --secondary-text-color: #888;

        --primary-color: #f44;

        --accent-color: #a00;

        --line-color: #444;

        --today-color-with-transparency: #4448;

        --today-color-full-transparency: #4440;

    }

  • ok good news, i've added your theme to the list: [Theme] Dark by Graves

    if you want I can add a link to your profile, website etc.

    let me know if you have a better title suggestion.

  • Great! Thanks.

    Only suggestion is maybe by Occam rather than by Graves.

    And thanks for offering linking, but I'm fine without that.

This website uses cookies to ensure you get the best experience on our website. More info
Got it!