A dark mode theme for digital ocean built for the chrome extension Stylebot.

digital-ocean-dark-mode.css

/**
 * This theme is _not_ perfect in the slightest, but it achieves my goal of 
 * making a dark theme for much of the DO UI.
 * Suggestions are welcome, and will be implemented to this theme at my own discretion. 
 */

.Button--blue {
    background: #3490DC;
}

.Button.is-disabled, .Button[disabled] {
    background: #1C3D5A;
    border-color: #1C3D5A ;
}

.Resource-description,.Tabs li.is-active>a {
    color: #DAE1E7;
}

.aurora-container.with-side-nav .aurora-container-right .aurora-body, .aurora-container-right, nav, table, th, tr ,h1, h2, h3, h4, h5, input, select,.ember-power-select-trigger, .Footer, .unbuttonized, .dropletCreate .Tabs-pane .distro .distro-version .distro-dropdown-trigger, .dropletCreate .size-column.carousel .wrap::after, .pricing, .aurora-region-chooser, .resource-list-no-table .fleet-resource-list-item, .Box, .bui-GridContainer, .fleet-add-resource .Button, .Modal-content {
    background: #12283A;
    color: #fff;
}

.details span {
    color: #BCDEFA;
}

.details strong {
    color: white;
}

.Modal-backdrop {
    background: rgba(18,40,58, 0.7);
}

.ember-view {
    color: #6CB2EB;
}

.ember-view.unbuttonized {
    color: #fff;
}

.is-grey {
    background: #3D4852;
}

.size-chooser-table--row.current > div {
    border: 0;
}

.unbuttonized.selected {
    background: #2779BD;
    border-color: #2779BD;
}

input.Input--floatLabel.FloatLabel-input.ember-text-field.ember-view {
    background-color: #22292F;
    color: #fff;
}

table {
    box-shadow: 0 0 0 2px #3D4852;
}

* {
    border-color: #3D4852 ;
}

.Divider, hr, .Hint {
    background-color: #3D4852;
}

.flex-card-group .flex-card .flex-card-body .link-copy, .fleet--learn-more-link a, .aurora-check label {
    color: #71b2e3 ;
}

.flex-card-group .flex-card .flex-card-body .link-copy ~ p {
    color: #fff;
}

.side-nav, .dropdown-view, .menu-dropdownItems, .dropdown-menu-item-button {
    background-color: #1C3D5A;
    color: white;
}

.aurora-container.with-side-nav .side-nav .side-nav-section.groups h5 {
    padding-top: 25px;
}

.aurora-dropdown-menu .menu-dropdown .fleet-select .item {
    background: cornflowerblue;
}

Thanks a lot! Although still a bit buggy, it's a great theme. A couple changes of mine:

1. Remove borders from the top menu:

div.nav_controls_v2 {
    border-style: none;
}

I also changed the colour of the search box:

input.Input--floatLabel.FloatLabel-input.ember-text-field.ember-view {
    background-color: #1C3D5A;
    color: #fff;
}

Also, I've found some text to be dark, that fixes it:

p.bui-u-mt--small.bui-u-textDefault {
    color: #ffffff;
}

a.Button.Button--blue.u-mb-3.ember-view {
    color: #ffffff;
}

@nickelghost yea this definitely isn't perfect by any stretch, but it does get people most of the way there with their current design 😄

Since I posted this snippet, I've discovered that browser extensions like Dark Reader exist and do a much better job, and it does it for every site instead of just DO.