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

Theme Suggestion - Arc Dark

Made this quickly. It's based off the "Dark Red by Occam" theme but it's Unix Arc Dark themed.


Good for those of us running Arc but might not be perfect, haven't played around with it much.


/*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: #5f626e !important;


}


#accountAvatars {


   height: 100vh;


   margin-top: 0;


   padding-top: 2vh;


}


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


   background-color: #5f626e;


}


app-drawer-layout,


#mainContent {


   background-color: #383c4a !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: #5f626e;


}






/*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: 1 !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: #5f626e !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: #383c4a;


   --secondary-background-color: #22242d;


   --primary-text-color: #fff;


   --secondary-text-color: #afb1b6;

Comments

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