Hereâs my minimalist, full-width dark theme.
FEATURES:
- Text style: Cochin
- True black background and off-white text
- Larger text
- Parent bullets look like WorkFlowy
- Text takes up the full page (while preserving the option for narrow document layout)
- Headings are smaller
- and H2 is italic
- Hide sidebars except on mouseover
- Checkboxes take the place of bullets and are circles (and blue when checked)
- Inline items are blue and have full text wrapping (also works in notes)
- Dates are borderless and blue, future dates are darker
- H3 gives column-style layout with sidescrolling when root node
- Breadcrumbs are smaller and expand on mouseover
- Root node text is smaller
- Sub-bullet text is bigger
- Notes text is not greyed out and bigger
- Backlinks display right after bullets
- Searches hide notes except on mouseover (also in backlinks)
- CSS Code box is larger
Thanks to this forumâBullets like WorkFlowy, Hide Opacity, and some other snippets were taken from people here.
Check it out at my Dynalist, https://dynalist.io/d/H282O62PaS1PvBAyO8KrgDPC, or the code here.
/* GENERAL */
/*stops scrolling to the right, and fixes bottom margin - disable if using columns */
.is-desktop .DocumentContainer {
max-height: 97% !important;
}
/* column view on wide layout, accomodates up to 10 columns */
.is-desktop .Node.is-currentRoot > .is-heading3 ~ .Node-children {
width: 10200px !important;
}
.is-desktop .Document-rootNode > .Node.is-currentRoot > .is-heading3 ~ .Node-children > .Node-outer {
display: inline-block;
vertical-align: top;
}
.is-desktop .Document-rootNode > .Node.is-currentRoot > .is-heading3 ~ .Node-children > .Node-outer > .Node {
width: 500px;
margin: 10px;
}
.is-desktop .Node-isCurrentRoot > .is-heading3 {
max-width: 10000px !important;
}
/* CHANGE FONT */
/* change to Cochin */
.node-line, .Node-note, .Node-renderedNote, node.inline-item, .DocumentBreadcrumb-item, .DocumentBreadcrumb-delimiter, .flat-search-breadcrumb-item, .flat-search-breadcrumb-delimiter, .search-ui-container, .search-ui-searchbar, .search-ui-document-title {
font-family: "Cochin";
}
/* change color of notes to off-white */
.Node-note, .Node-renderedNote {
color: #DFDCDA;
}
/* inline items are blue and unbordered and wrap fully */
.node-inline-item {
border: none;
color: #82CFFF;
background-color: transparent !important;
overflow-wrap: break-word !important;
white-space: normal !important;
overflow: visible !important;
}
/* RESIZING FONTS */
/* basic font and line size */
.node-line, .Node-note, .Node-renderedNote {
font-size: 180%;
line-height: 125% !important;
}
/* slightly more space between bullet and note */
.node-line {
padding-bottom: 0.1em;
}
/* title font smaller and bold */
.Node.is-currentRoot > .Node-self > .node-line {
font-size: 130%;
font-weight: bold;
}
/* inline item text size and alignment */
.node-inline-item {
font-size: 80% !important;
line-height: 125% !important;
vertical-align: middle;
margin-bottom: 0.2em;
padding: 0px;
}
/* make space for first-line note display */
.Node:not(.is-currentRoot) > .Node-self.is-showingNoteFirstLine:not(.is-noteEmpty) .Node-renderedNote {
height: 1.25em !important;
}
/* breadcrumb text size smaller */
.DocumentBreadcrumb-item, .DocumentBreadcrumb-delimiter, .flat-search-breadcrumb-item, .flat-search-breadcrumb-delimiter {
font-size: 100%;
}
/* SMALLER HEADINGS */
.Node-self.is-heading1 .Node-content, .Node-self.is-heading1 .Node-renderedContent {
font-size: 150% !important; /* is 26px vs 20px */
font-weight: bold;
}
.Node-self.is-heading2 .Node-content, .Node-self.is-heading2 .Node-renderedContent {
font-size: 150% !important; /* is 24px vs 20px */
font-style: italic !important;
font-weight: 100 !important;
}
.Node-self.is-heading3 .Node-content, .Node-self.is-heading3 .Node-renderedContent {
font-size: 165% !important; /* is 22px vs 20px */
color: blue !important;
font-weight: bold !important;
}
/* COLOR LABELS */
.set-color-label[data-color="3"], .Node-contentContainer.mod-color-label-3 {
background: gold !important;
color: #fdfdfd !important;
}
.set-color-label[data-color="1"], .Node-contentContainer.mod-color-label-1 {
background: #a11b1b !important;
color: #fdfdfd !important;
}
/* FIXING VERTICAL PLACEMENTS */
/* checkbox height and alignment */
.is-desktop .Node.has-checkbox > .Node-self > .Node-checkbox { margin-top: 0.8em; }
.is-desktop .Node.has-checkbox > .is-heading1 > .Node-checkbox { margin-top: 1.5em; }
/* backlink counter vertical placement */
.is-desktop .node-backlink-counter { margin-top: 1em; }
.is-desktop .is-heading1 .node-backlink-counter { margin-top: 1.7em; }
/* plus sign vertical placement (margin top) */
.is-desktop .node-icon { margin-top: 1.4em; }
.is-desktop .is-heading1 .node-icon { margin-top: 2.6em; }
/* bullet placement */
.is-desktop .Node-bullet { margin-top: .5em; }
.is-desktop .is-heading1 .Node-bullet { margin-top: 1em; }
/* MOBILE */
/*line height on mobile */
.is-mobile .node-line, .is-mobile node.inline-item, .is-mobile .is-largeFont .Node-note, .is-mobile .is-largeFont .Node-renderedNote {
line-height: 125% !important;
}
/* title font mobile */
.is-mobile .node-line {
font-size: 125%;
}
/* note font mobile */
.is-mobile .Node-note, .is-mobile .Node-renderedNote {
font-size: 150%;
}
/*stops scrolling to the right - MOBILE */
.is-mobile .DocumentContainer {
overflow-x: hidden;
max-width: 100%;
}
/* ENLARGE CSS CODE BOX */
/*change size of custom CSS input box in settings */
.js-update-setting.setting-text-field[data-key="custom_css"] { height:25em; }
/* make it wider */
.setting-left { width: 25%; }
.setting-right { width: 75%; }
/* BULLETS LIKE WORKFLOWY */
.is-desktop .Node-self.is-collapsed.is-parent > .Node-bullet:before {
content: "\e90d";
border-radius: 50%;
background-color: rgba(43,45,47,255);
color: rgba(168,160,149,255);
}
.is-desktop .AppContainer.is-using-bullet-to-zoom .Node-bullet:before {
background-color: transparent;
color: rgba(168,160,149,255);
}
/* on mobile */
.is-mobile .Node-self.is-collapsed.is-parent > .Node-bullet:before {
content: "\e90d";
border-radius: 50%;
background-color: rgba(43,45,47,255);
color: rgba(168,160,149,255);
}
.is-mobile .AppContainer.is-using-bullet-to-zoom .Node-bullet:before {
background-color: transparent;
color: rgba(168,160,149,255);
}
/* Hover colours */
.is-desktop .AppContainer.is-using-bullet-to-zoom .Node-bullet:hover:before {
background-color: #aaa;
}
.is-desktop .Node-self.is-collapsed.is-parent > .Node-bullet:hover:before {
content: "\e90d";
background-color: #aaa;
}
.is-desktop .Node-self.is-collapsed > .Node-bullet:hover:before {
content: "\e90a";
background-color: #aaa;
}
/* Size of bullet */
.Node-bullet:before {
font-size: 18.5px;
}
/* CHECKBOXES */
/* don't render bullet if checkbox exists */
.Node-outer > .Node.has-checkbox >
.Node-self > .Node-bullet {
display: none;
}
/* keep notes from pushing over */
.Node.has-checkbox > .Node-self .Node-renderedNote, .Node.has-checkbox > .Node-self .Node-note {
margin-left: -20px;
}
/* checkbox alignment left/right */
.Node.has-checkbox > .Node-self > .Node-checkbox {
display: inline-block;
vertical-align: top;
margin-left: 3px;
margin-right: 3px;
}
/* checkboxes are transparent and circular */
.Node-checkbox:before {
border: 1px solid #636363;
background: transparent;
opacity: 1;
border-radius: 30px;
}
/* when checked it turns blue */
.Node.is-checked .Node-checkbox:before {
border: 1px #529cca !important;
background: #529cca !important;
}
/* DATE STYLE */
/* dates in future are dark blue and show full text */
.Node-contentContainer .node-time, .Node-noteContainer .node-time {
font-style: normal;
font-weight: bold;
font-size: 90% !important;
vertical-align: top;
margin-top: 0.1em;
color: #498AB3;
}
/*remove calendar icon from date icons*/
.node-time:before, .node-time.is-overdue:before { content: none; }
/* overdue dates are light blue */
.node-time.is-overdue {
color: #82CFFF !important;
}
/* LINK STYLE */
/* Don't show icon for Dynalist links. */
.node-link-internal.is-displayed:before {
content: none;
}
/* SEARCH BACKLINKS BREADCRUMBS APPEARANCE */
/* breadcrumbs are longer and colored */
.DocumentBreadcrumb-item, .DocumentBreadcrumb-delimiter, .flat-search-breadcrumb-item, .flat-search-breadcrumb-delimiter {
cursor: default;
color: #DFDCDA;
}
/* max width desktop */
.is-desktop .DocumentBreadcrumb-item, .is-desktop .DocumentBreadcrumb-delimiter, .is-desktop .flat-search-breadcrumb-item, .is-desktop .flat-search-breadcrumb-delimiter { max-width: 33%; }
/* max width mobile */
.is-mobile .DocumentBreadcrumb-item, .is-mobile .DocumentBreadcrumb-delimiter, .is-mobile .flat-search-breadcrumb-item, .is-mobile .flat-search-breadcrumb-delimiter { max-width: 40%; }
/* Breadcrumb shows full name on hover */
.DocumentBreadcrumb-item:hover, .flat-search-breadcrumb-item:hover {
overflow: visible;
overflow-wrap: break-word;
white-space: normal;
}
/* no header in search */
.search-ui-header, .search-ui-document-title-note {
display: none;
}
/* full width searchUI searchbar */
.is-desktop .search-ui-searchbar {
width: 40%;
}
.is-desktop .document-backlinks-container {
margin: 0 0 0 -15px !important;
}
/* search container is full width */
.is-desktop .search-ui-container {
padding: 5px 10px;
}
/* keep note lines in search */
.search-ui-container .node-line, .search-ui-container .Node-renderedNote {
font-size: 125% !important;
}
/* no notes in search */
.search-ui-container .Node-noteContainer, .is-searching ~ .Document-rootNode .Node-noteContainer, .document-backlinks-container .Node-noteContainer {
display: none;
}
/* show notes on hover */
.search-ui-container .Node-self:not(.is-noteEmpty):hover .Node-noteContainer, .is-searching ~ .Document-rootNode .Node-self:not(.is-noteEmpty):hover .Node-noteContainer, .document-backlinks-container .Node-self:not(.is-noteEmpty):hover .Node-noteContainer {
display: inline-block !important;
}
/* wider left margin on search */
.is-searching
/* nodes are closer together */
.search-ui-container .Node-self {
padding-top: 0px;
padding-bottom: 0px;
}
/* bullet placement */
.is-desktop .search-ui-container .Node-bullet {
margin-top: 0em;
}
/* no plus signs for backlinks */
.document-backlinks-container .node-hover, .search-ui-container .node-hover {
display: none;
}
/* no pointer if you mouse over a breadcrumb which has a link */
.is-desktop .flat-search-breadcrumb-item .node-inline-item {
cursor: default;
}
/* hide "referenced in" text */
.document-backlinks-container .search-ui-summary {
display: none;
}
/* no margins for backlinks */
.is-desktop .document-backlinks-container {
margin: 0px 45px;
}
/* no blue hover when you mouse over backlinks */
.document-backlinks-container .Node.has-hover, .search-ui-container .Node.has-hover {
background-color: transparent;
}
/* keep pointer on hover */
.document-backlinks-container .Node {
cursor: pointer !important;
}
/* HIDE MOD MENUS AND HOVERS */
/* Hide the mod menu hover */
.is-desktop .node-icon.mod-menu {
display: none;
}
/* node icon appearance (+/- sign) */
.node-icon {
font-family: "IcoMoon", sans-serif !important;
font-size: 100% !important;
}
/* hiding backlink counter on root node */
.Node.is-currentRoot > .Node-self > .node-hover, .Node.is-currentRoot > .Node-self > .node-backlink-counter {
display: none;
}
/* WIDTH */
/* fixes node width */
.Node-self {
width: 100%;
padding-left: 0;
margin-left: 0;
}
/* removes bottom space before backlinks */
.Document-bottomSpace {
min-height: 0px;
}
/* remove left and right margins */
.is-desktop .DocumentContainer:not(.is-centerDocument) .Document-rootNode, .is-desktop .DocumentBreadcrumb {
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
/* document width adjusted so it doesn't spill over */
.is-desktop .DocumentContainer:not(.is-centerDocument) .Document {
padding 0 !important:
margin: 0 0 0 0 !important;
width: calc(100% - 5px) !important;
}
.is-desktop .DocumentContainer:not(.is-centerDocument) {
padding-left: 17px;
padding-right: 5px;
}
/* allows for narrow document layout */
.is-desktop .DocumentContainer.is-centerDocument .Document, .is-desktop .DocumentContainer.is-centerDocument .DocumentBreadcrumb {
max-width: 820px;
margin-left: auto;
margin-right: auto;
}
/* BACKGROUNDS */
/* black search tools background */
.DocumentTools-overlay {
background: transparent;
box-shadow: 0 0 3px 3px transparent;
}
/* black search backgrounds */
.AppContainer, .DocumentSearch, .search-ui-container, .search-ui-searchbar, .search-ui-sort-options, .search-ui-document-title, .search-ui-document-title-icon {
background: #000000;
}
/* HIDE OPACITY */
.leftPaneContainer, .leftPaneContainer-nav, .leftPaneContainer-panes, .TagPane-tags, .FilePane-files, .BookmarkPane-bookmarks, .Pane-header {
background-color: #000000 !important;
}
.LeftPaneSlidebarContainer.is-closed {
display: none;
width: 0px;
}
/* hides sidebars' opacity when not moused */
.LeftPaneContainer-nav,
.LeftPaneSplitter,
.AppHeader,
.DocumentTools-icon,
.status-bar
{
opacity: 0;
}
/* show sidebar opacities on hover */
.AppHeader:hover, .LeftPaneContainer,
.DocumentTools-icon:hover,
.status-bar:hover, .LeftPaneContainer-panes
{
opacity: 1 !important;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background: #000000 !important;
}
Maybe I will post it separately after my exams are over.