Skip to content

Instantly share code, notes, and snippets.

@guilherme-teodoro
Last active December 16, 2020 15:43
Show Gist options
  • Save guilherme-teodoro/ca15a0a9fabd5d78e21c43d44cd1d4f4 to your computer and use it in GitHub Desktop.
Save guilherme-teodoro/ca15a0a9fabd5d78e21c43d44cd1d4f4 to your computer and use it in GitHub Desktop.
[Stylus] Basecamp 3 - Dark mode
body {
background: #191919;
color: white;
}
h1 {
color: white;
}
.nav__bar {
border-bottom: 1px solid #ffffff1c;
}
.nav__bar,
.nav__main {
background: #212121;
color: white;
}
.nav__link,
.unread-badge {
filter: invert(1);
color: black;
}
.nav__link--me .avatar,
.nav__link--accounts {
filter: inherit;
}
.card {
background: #101010;
color: white;
border: 1px solid rgba(0, 0, 0, 0.2);
}
.date_divider span,
.latest-activity span,
.latest-activity__project-headline span,
.project-index__header span {
background: none;
color: white;
}
.panel.filterable-projects {
background: none;
}
.panel--project {
background: rgba(255, 255, 255, 0.04);
box-shadow: none;
color: white;
}
.chat-line__bubble {
background: rgba(255, 255, 255, 0.1);
color: white;
}
time {
color: white;
}
.chat-line--me .chat-line__bubble {
background: #0e0e0e;
}
.btn {
filter: invert(1);
color: black;
}
.project-avatars__edit:after {
box-shadow: none;
}
.recording-breadcrumbs {
background: #272727;
box-shadow: none;
}
.chat,
.chat__header,
.panel {
background: #212121;
box-shadow: none;
border: 1px solid #383838;
}
.chat, .chat__header {
border: none;
}
.chat-line--mention .chat-line__bubble {
background: #46403d;
}
.person-title {
color: rgb(109, 109, 109);
}
.panel.flush--ends {
background: none;
border: none;
}
.thread__subscriptions {
border-top: 1px solid #353535;
}
.chat__header-block,
.decorated {
color: white;
}
.chat a {
color: #8aa8cd;
}
.input {
background: #323232;
border-color: #1b1b1b;
color: white;
}
.chat__emoji-button,
.chat__attach-button {
filter: brightness(1000);
}
.recordable {
background: none;
color: white;
}
trix-toolbar {
background: none;
}
trix-toolbar .trix-button {
filter: invert(1)
}
.push_half--bottom {
color: white;
}
.nav-menu__sheet {
background: #131313;
}
.nav-menu.expanded:after {
border-bottom-color: #131313;
}
.thread-entry {
background-color: #171717;
}
.thread-entry__avatar {
box-shadow: 0 0 0 5px #222222;
}
.prompt {
color: white;
display: block;
width: 100%;
background: #1f1f1f;
border: 1px solid #313131;
}
.trix-contained-input {
background: #212121;
border-color: #333333;
}
.sticky-trix-toolbar {
border-bottom-color: #3a3a3a;
}
trix-editor {
background: #060606;
color: white;
}
.break > span {
background: none;
}
.break:before {
display: none;
}
.thread__subscriptions .thread-entry {
background: none;
}
.message__date a,
.message__date .link_button {
color: white;
text-decoration: none;
}
.card--app .card__description {
text-shadow: none;
}
.latest-activity:before {
border-left: 1px solid rgba(255, 255, 255, 0.1);
}
.report-menu__item--selected {
background: #4e4e4e;
}
.help-button__icon {
display: none;
}
.boost {
background: #0e0e0e;
color: white;
border: 1px solid #ffffff1c;
}
.message .boosts,
.document .boosts,
.recordable .boosts,
.boosts-report .boosts {
background: none;
}
.boost-form.expanded .input--boost {
background: none;
}
.message__attribution {
border-color: #3c3c3c;
}
.chat-line__avatar .avatar {
background: none;
box-shadow: 0 0 0 4px #1a1a1a;
}
.card--app .card__header,
.messages-table--for-card {
border-color: #2d2d2d;
}
.sheet {
background: #151515;
}
.sheet--shadowed {
box-shadow: none;
}
.panel--profile {
background: none;
}
bc-suggestion-select bc-suggestion-option {
background: #252525;
}
.emoji-picker__modal {
background: #131313;
}
.emoji-picker__toggle:after, .emoji-picker__toggle:before {
display: none;
}
.chat__typing-status {
background: none;
color: white;
}
.search__exclude-chat {
background: #403c12;
}
.search-result--selected {
background: #2b3661;
}
.notice--for-recording {
background: #171717;
}
.push_half--top {
background: #101010;
box-shadow: none;
}
.options-menu__content {
background: #191919;
}
.options-menu__expansion-toggle::after {
display: none;
}
.recording-color--white {
background: transparent !important;
}
.todolist-group__header .break::after {
background: linear-gradient(to right, rgba(255,255,255,0) 0%, #212121 100%);
}
.latest-activity__full-width .activity-item {
background: #212121;
}
.expanded .options-menu__expansion-toggle:before {
display: none;
}
.todo.selected {
background-color: #151515;
}
.todo-edit-menu {
background: #191919;
border: 1px solid #2b2b2b;
}
.action-menu:before, .action-menu:after {
display: none;
}
.action-list+.action-list {
border-top: 1px solid #313131;
}
@guilherme-teodoro
Copy link
Author

guilherme-teodoro commented Aug 6, 2019

Preview:

3 basecamp com_4253466_projects (1)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment