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
excellent thanks, i'll put this to my queue for adding it.