Skip to content

Instantly share code, notes, and snippets.

@brianwisti

brianwisti/notionish-dark.css

Created August 28, 2022 02:26
Show Gist options
  • Save brianwisti/29653609d4ba6e389dcb065458001584 to your computer and use it in GitHub Desktop.
Save brianwisti/29653609d4ba6e389dcb065458001584 to your computer and use it in GitHub Desktop.
Download ZIP
Quick dump of CSS output from a Notion-ish style I set up in Trilium Notes
Raw
notionish-dark.css
:root {
--system-stack-sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
--system-stack-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
--system-stack-monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
}
:root {
--notion-fg-default: rgb(255, 255, 255);
--notion-fg-gray: rgb(151, 154, 155);
--notion-fg-brown: rgb(147, 114, 100);
--notion-fg-orange: rgb(255, 163, 68);
--notion-fg-yellow: rgb(225, 220, 73);
--notion-fg-green: rgb(77, 171, 154);
--notion-fg-blue: rgb(82, 156, 202);
--notion-fg-purple: rgb(154, 109, 215);
--notion-fg-pink: rgb(226, 85, 161);
--notion-fg-red: rgb(255, 115, 105);
--notion-bg-default: rgb(47, 52, 55);
--notion-bg-gray: rgb(69, 75, 78);
--notion-bg-brown: rgb(67, 64, 64);
--notion-bg-orange: rgb(89, 74, 58);
--notion-bg-yellow: rgb(89, 86, 59);
--notion-bg-green: rgb(53, 76, 75);
--notion-bg-blue: rgb(54, 73, 84);
--notion-bg-purple: rgb(68, 63, 87);
--notion-bg-pink: rgb(83, 59, 76);
--notion-bg-red: rgb(89, 65, 65);
--notion-select-default: rgb(80, 85, 88);
--notion-select-gray: rgb(151, 154, 155);
--notion-select-brown: rgb(147, 114, 100);
--notion-select-orange: rgb(255, 163, 68);
--notion-select-yellow: rgb(255, 220, 73);
--notion-select-green: rgb(77, 171, 154);
--notion-select-blue: rgb(82, 156, 202);
--notion-select-purple: rgb(154, 109, 215);
--notion-select-pink: rgb(226, 85, 161);
--notion-select-red: rgb(255, 115, 105);
}
:root {
--rg-prose-font: var(--system-stack-sans-serif);
--rg-prose-size: 16px;
--theme-style: dark;
--main-font-family: var(--rg-prose-font);
--main-font-size: var(--rg-prose-size);
--tree-font-family: var(--rg-prose-font);
--tree-font-size: calc(var(--rg-prose-size) * 0.8);
--detail-font-family: var(--rg-prose-font);
--detail-font-size: var(--rg-prose-size);
--monospace-font-family: var(--system-stack-monospace);
--monospace-font-size: var(--rg-prose-size);
--main-background-color: var(--notion-bg-default);
--main-border-color: var(--notion-fg-gray);
--main-text-color: var(--notion-fg-default);
--accented-background-color: var(--notion-bg-blue);
--more-accented-background-color: var(--notion-bg-gray);
--button-background-color: var(--accented-background-color);
--button-border-color: var(--more-accented-background-color);
--button-text-color: var(--main-text-color);
--button-disabled-background-color: var(--more-accented-background-color);
--button-disabled-text-color: var(--main-text-color);
--button-border-color: var(--notion-bg-gray);
--button-text-color: var(--notion-fg-default);
--button-border-radius: 5px;
--primary-button-background-color: var(--notion-bg-blue);
--primary-button-text-color: var(--notion-bg-default);
--primary-button-border-color: var(--notion-select-blue);
--muted-text-color: var(--notion-select-gray);
--input-text-color: var(--main-text-color);
--input-background-color: transparent;
--hover-item-text-color: var(--main-text-color);
--hover-item-background-color: transparent;
--hover-item-border-color: var(--main-border-color);
--active-item-text-color: var(--main-text-color);
--active-item-background-color: var(--accented-background-color);
--active-item-border-color: transparent;
--menu-text-color: var(--main-text-color);
--menu-background-color: var(--main-background-color);
--modal-background-color: var(--main-background-color);
--modal-backdrop-color: var(--main-text-color);
--left-pane-background-color: var(--main-background-color);
--left-pane-text-color: var(--main-text-color);
--launcher-pane-background-color: var(--accented-background-color);
--launcher-pane-text-color: var(--main-text-color);
--active-tab-background-color: var(--accented-background-color);
--active-tab-hover-background-color: var(--notion-select-default);
--active-tab-text-color: var(--main-text-color);
--inactive-tab-background-color: var(--notion-bg-gray);
--inactive-tab-hover-background-color: var(--notion-select-default);
--inactive-tab-text-color: var(--muted-text-color);
--scrollbar-border-color: var(--more-accented-background-color);
--tooltip-background-color: var(--notion-select-default);
--link-color: var(--notion-fg-blue);
--mermaid-theme: default;
}
.CodeMirror {
font-family: var(--monospace-font-family);
color: var(--main-text-color);
background: var(--main-background-color);
}
.CodeMirror-activeline-background {
background: var(--notion-bg-gray);
}
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
background-color: var(--main-background-color);
}
.CodeMirror-gutters {
background-color: var(--more-accented-color);
border-color: var(--accented-color);
}
.CodeMirror-linenumber {
color: var(--muted-text-color);
}
.CodeMirror-guttermarker {
color: var(--main-text-color);
}
.CodeMirror-guttermarker-subtle {
color: var(--muted-text-color);
}
.CodeMirror-cursor {
border-left-color: var(--main-text-color);
}
.cm-fat-cursor .CodeMirror-cursor {
background: var(--notion-bg-green);
}
.CodeMirror-matchingtag {
background: var(--notion-bg-orange);
}
.CodeMirror-ruler {
border-color: var(--accented-color);
}
.CodeMirror-selected {
background: var(--notion-select-default);
}
.CodeMirror-focused .CodeMirror-selected {
background: var(--notion-select-default);
}
.CodeMirror div.CodeMirror-secondarycursor {
border-color: var(--accented-background-color);
}
.CodeMirror span.CodeMirror-matchingbracket {
color: var(--notion-fg-green);
}
.CodeMirror span.CodeMirror-nonmatchingbracket {
color: var(--notion-fg-red);
}
.cm-fat-cursor-mark {
background-color: rgba(20, 255, 20, 0.5);
}
.cm-animate-fat-cursor {
background-color: var(--notion-bg-green);
}
/* DEFAULT THEME */
.cm-s-default .cm-atom {
color: var(--notion-fg-blue);
}
.cm-s-default .cm-attribute {
color: var(--notion-fg-blue);
}
.cm-s-default .cm-bracket {
color: var(--notion-fg-gray);
}
.cm-s-default .cm-buitin {
color: var(--notion-fg-green);
}
.cm-s-default .cm-comment {
color: var(--notion-fg-gray);
}
.cm-s-default .cm-def {
color: var(--notion-fg-blue);
}
.cm-s-default .cm-error {
color: var(--notion-fg-red);
}
.cm-s-default .cm-header {
color: var(--notion-fg-blue);
}
.cm-s-default .cm-hr {
color: var(--notion-fg-gray);
}
.cm-s-default .cm-invalidchar {
color: var(--notion-fg-red);
}
.cm-s-default .cm-keyword {
color: var(--notion-fg-purple);
}
.cm-s-default .cm-link {
color: var(--notion-fg-blue);
}
.cm-s-default .cm-meta {
color: var(--notion-fg-gray);
}
.cm-s-default .cm-number {
color: var(--notion-fg-green);
}
.cm-s-default .cm-qualifier {
color: var(--notion-fg-gray);
}
.cm-s-default .cm-quote {
color: var(--notion-fg-green);
}
.cm-s-default .cm-string {
color: var(--notion-fg-red);
}
.cm-s-default .cm-string-2 {
color: var(--notion-fg-orange);
}
.cm-s-default .cm-tag {
color: var(--notion-fg-green);
}
.cm-s-default .cm-type {
color: var(--notion-fg-green);
}
.cm-s-default .cm-variable-2 {
color: var(--notion-fg-blue);
}
.cm-s-default .cm-variable-3 {
color: var(--notion-fg-green);
}
.cm-negative {
color: var(--notion-fg-red);
}
.cm-positive {
color: var(--notion-fg-green);
}
.cm-searching {
background-color: var(--notion-bg-yellow);
}
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
background: var(--notion-select-default);
}
.CodeMirror-line::-moz-selection,
.CodeMirror-line > span::-moz-selection,
.CodeMirror-line > span > span::-moz-selection {
background: var(--notion-select-default);
}
ul.fancytree-container {
padding-left: 0;
}
ul.fancytree-container li {
list-style: none;
}
span.fancytree-node.fancytree-hide {
display: none;
}
.fancytree-title {
margin-left: 0.4375em;
outline: none;
position: relative;
top: 0.125em;
}
.fancytree-node {
height: 2.375em;
padding: 0.25em;
border: 1px solid transparent;
border-radius: 5px;
}
.fancytree-node:not(.fancytree-loading) .fancytree-expander:before {
top: 0.125em;
margin-right: 0.3125em;
}
.fancytree-loading span.fancytree-expander {
width: 1em;
height: 1em;
margin-left: 0.3125em;
margin-right: 0.5em;
margin-top: 0.25em;
margin-bottom: 0.125em;
}
.fancytree-loading span.fancytree-expander:after {
width: 0.75em;
height: 0.75em;
margin-top: 0.25em;
margin-left: 0.0625em;
border-width: 0.0625em;
border-style: solid;
}
ul.fancytree-container {
outline: none;
background-color: inherit;
}
.fancytree-custom-icon {
font-size: 1.2em;
}
span.fancytree-node.protected > span.fancytree-custom-icon {
filter: drop-shadow(2px 2px 2px var(--main-text-color));
}
/* first nesting level has lower left padding to avoid extra left padding. Other levels are not affected */
.ui-fancytree > li > ul {
padding-left: 0.3125em;
}
.ui-fancytree ul {
padding-left: 1.25em;
}
.bx.tree-item-button {
margin-left: 0.5em;
padding: 0.0625em;
border: 1px solid transparent;
border-radius: 5px;
}
#fancytree-drop-marker.fancytree-drop-after, #fancytree-drop-marker.fancytree-drop-before {
width: 100px;
/* marker is by default position: relative which doesn't make sense */
position: absolute !important;
/* heaving a height helps with positioning since the algorithm calculating "top" takes it into account */
height: 19px;
}
input.note-title {
font-weight: 500;
}
Raw
notionish-light.css
:root {
--system-stack-sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
--system-stack-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
--system-stack-monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
}
:root {
--notion-fg-default: rgb(55, 53, 47);
--notion-fg-gray: rgb(155, 154, 151);
--notion-fg-brown: rgb(100, 71, 58);
--notion-fg-orange: rgb(217, 115, 13);
--notion-fg-yellow: rgb(223, 171, 1);
--notion-fg-green: rgb(15, 123, 108);
--notion-fg-blue: rgb(11, 110, 153);
--notion-fg-purple: rgb(105, 64, 165);
--notion-fg-pink: rgb(173, 26, 114);
--notion-fg-red: rgb(224, 62, 62);
--notion-bg-default: rgb(255, 255, 255);
--notion-bg-gray: rgb(235, 236, 237);
--notion-bg-brown: rgb(233, 229, 227);
--notion-bg-orange: rgb(250, 235, 221);
--notion-bg-yellow: rgb(251, 243, 219);
--notion-bg-green: rgb(221, 237, 234);
--notion-bg-blue: rgb(221, 235, 241);
--notion-bg-purple: rgb(234, 228, 242);
--notion-bg-pink: rgb(244, 223, 235);
--notion-bg-red: rgb(251, 228, 228);
--notion-select-default: rgb(206, 205, 202);
--notion-select-gray: rgb(155, 154, 151);
--notion-select-brown: rgb(140, 46, 0);
--notion-select-orange: rgb(245, 93, 0);
--notion-select-yellow: rgb(233, 168, 0);
--notion-select-green: rgb(0, 135, 107);
--notion-select-blue: rgb(0, 120, 223);
--notion-select-purple: rgb(103, 36, 222);
--notion-select-pink: rgb(221, 0, 129);
--notion-select-red: rgb(255, 0, 26);
}
:root {
--rg-prose-font: var(--system-stack-sans-serif);
--rg-prose-size: 16px;
--theme-style: light;
--main-font-family: var(--rg-prose-font);
--main-font-size: var(--rg-prose-size);
--tree-font-family: var(--rg-prose-font);
--tree-font-size: calc(var(--rg-prose-size) * 0.8);
--detail-font-family: var(--rg-prose-font);
--detail-font-size: var(--rg-prose-size);
--monospace-font-family: var(--system-stack-monospace);
--monospace-font-size: var(--rg-prose-size);
--main-background-color: var(--notion-bg-default);
--main-border-color: var(--notion-fg-gray);
--main-text-color: var(--notion-fg-default);
--accented-background-color: var(--notion-bg-blue);
--more-accented-background-color: var(--notion-bg-gray);
--button-background-color: var(--accented-background-color);
--button-border-color: var(--more-accented-background-color);
--button-text-color: var(--main-text-color);
--button-disabled-background-color: var(--more-accented-background-color);
--button-disabled-text-color: var(--main-text-color);
--button-border-color: var(--notion-bg-gray);
--button-text-color: var(--notion-fg-default);
--button-border-radius: 5px;
--primary-button-background-color: var(--notion-bg-blue);
--primary-button-text-color: var(--notion-bg-default);
--primary-button-border-color: var(--notion-select-blue);
--muted-text-color: var(--notion-select-gray);
--input-text-color: var(--main-text-color);
--input-background-color: transparent;
--hover-item-text-color: var(--main-text-color);
--hover-item-background-color: transparent;
--hover-item-border-color: var(--main-border-color);
--active-item-text-color: var(--main-text-color);
--active-item-background-color: var(--accented-background-color);
--active-item-border-color: transparent;
--menu-text-color: var(--main-text-color);
--menu-background-color: var(--main-background-color);
--modal-background-color: var(--main-background-color);
--modal-backdrop-color: var(--main-text-color);
--left-pane-background-color: var(--main-background-color);
--left-pane-text-color: var(--main-text-color);
--launcher-pane-background-color: var(--accented-background-color);
--launcher-pane-text-color: var(--main-text-color);
--active-tab-background-color: var(--accented-background-color);
--active-tab-hover-background-color: var(--notion-select-default);
--active-tab-text-color: var(--main-text-color);
--inactive-tab-background-color: var(--notion-bg-gray);
--inactive-tab-hover-background-color: var(--notion-select-default);
--inactive-tab-text-color: var(--muted-text-color);
--scrollbar-border-color: var(--more-accented-background-color);
--tooltip-background-color: var(--notion-select-default);
--link-color: var(--notion-fg-blue);
--mermaid-theme: default;
}
.CodeMirror {
font-family: var(--monospace-font-family);
color: var(--main-text-color);
background: var(--main-background-color);
}
.CodeMirror-activeline-background {
background: var(--notion-bg-gray);
}
.CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
background-color: var(--main-background-color);
}
.CodeMirror-gutters {
background-color: var(--more-accented-color);
border-color: var(--accented-color);
}
.CodeMirror-linenumber {
color: var(--muted-text-color);
}
.CodeMirror-guttermarker {
color: var(--main-text-color);
}
.CodeMirror-guttermarker-subtle {
color: var(--muted-text-color);
}
.CodeMirror-cursor {
border-left-color: var(--main-text-color);
}
.cm-fat-cursor .CodeMirror-cursor {
background: var(--notion-bg-green);
}
.CodeMirror-matchingtag {
background: var(--notion-bg-orange);
}
.CodeMirror-ruler {
border-color: var(--accented-color);
}
.CodeMirror-selected {
background: var(--notion-select-default);
}
.CodeMirror-focused .CodeMirror-selected {
background: var(--notion-select-default);
}
.CodeMirror div.CodeMirror-secondarycursor {
border-color: var(--accented-background-color);
}
.CodeMirror span.CodeMirror-matchingbracket {
color: var(--notion-fg-green);
}
.CodeMirror span.CodeMirror-nonmatchingbracket {
color: var(--notion-fg-red);
}
.cm-fat-cursor-mark {
background-color: rgba(20, 255, 20, 0.5);
}
.cm-animate-fat-cursor {
background-color: var(--notion-bg-green);
}
/* DEFAULT THEME */
.cm-s-default .cm-atom {
color: var(--notion-fg-blue);
}
.cm-s-default .cm-attribute {
color: var(--notion-fg-blue);
}
.cm-s-default .cm-bracket {
color: var(--notion-fg-gray);
}
.cm-s-default .cm-buitin {
color: var(--notion-fg-green);
}
.cm-s-default .cm-comment {
color: var(--notion-fg-gray);
}
.cm-s-default .cm-def {
color: var(--notion-fg-blue);
}
.cm-s-default .cm-error {
color: var(--notion-fg-red);
}
.cm-s-default .cm-header {
color: var(--notion-fg-blue);
}
.cm-s-default .cm-hr {
color: var(--notion-fg-gray);
}
.cm-s-default .cm-invalidchar {
color: var(--notion-fg-red);
}
.cm-s-default .cm-keyword {
color: var(--notion-fg-purple);
}
.cm-s-default .cm-link {
color: var(--notion-fg-blue);
}
.cm-s-default .cm-meta {
color: var(--notion-fg-gray);
}
.cm-s-default .cm-number {
color: var(--notion-fg-green);
}
.cm-s-default .cm-qualifier {
color: var(--notion-fg-gray);
}
.cm-s-default .cm-quote {
color: var(--notion-fg-green);
}
.cm-s-default .cm-string {
color: var(--notion-fg-red);
}
.cm-s-default .cm-string-2 {
color: var(--notion-fg-orange);
}
.cm-s-default .cm-tag {
color: var(--notion-fg-green);
}
.cm-s-default .cm-type {
color: var(--notion-fg-green);
}
.cm-s-default .cm-variable-2 {
color: var(--notion-fg-blue);
}
.cm-s-default .cm-variable-3 {
color: var(--notion-fg-green);
}
.cm-negative {
color: var(--notion-fg-red);
}
.cm-positive {
color: var(--notion-fg-green);
}
.cm-searching {
background-color: var(--notion-bg-yellow);
}
.CodeMirror-line::selection,
.CodeMirror-line > span::selection,
.CodeMirror-line > span > span::selection {
background: var(--notion-select-default);
}
.CodeMirror-line::-moz-selection,
.CodeMirror-line > span::-moz-selection,
.CodeMirror-line > span > span::-moz-selection {
background: var(--notion-select-default);
}
ul.fancytree-container {
padding-left: 0;
}
ul.fancytree-container li {
list-style: none;
}
span.fancytree-node.fancytree-hide {
display: none;
}
.fancytree-title {
margin-left: 0.4375em;
outline: none;
position: relative;
top: 0.125em;
}
.fancytree-node {
height: 2.375em;
padding: 0.25em;
border: 1px solid transparent;
border-radius: 5px;
}
.fancytree-node:not(.fancytree-loading) .fancytree-expander:before {
top: 0.125em;
margin-right: 0.3125em;
}
.fancytree-loading span.fancytree-expander {
width: 1em;
height: 1em;
margin-left: 0.3125em;
margin-right: 0.5em;
margin-top: 0.25em;
margin-bottom: 0.125em;
}
.fancytree-loading span.fancytree-expander:after {
width: 0.75em;
height: 0.75em;
margin-top: 0.25em;
margin-left: 0.0625em;
border-width: 0.0625em;
border-style: solid;
}
ul.fancytree-container {
outline: none;
background-color: inherit;
}
.fancytree-custom-icon {
font-size: 1.2em;
}
span.fancytree-node.protected > span.fancytree-custom-icon {
filter: drop-shadow(2px 2px 2px var(--main-text-color));
}
/* first nesting level has lower left padding to avoid extra left padding. Other levels are not affected */
.ui-fancytree > li > ul {
padding-left: 0.3125em;
}
.ui-fancytree ul {
padding-left: 1.25em;
}
.bx.tree-item-button {
margin-left: 0.5em;
padding: 0.0625em;
border: 1px solid transparent;
border-radius: 5px;
}
#fancytree-drop-marker.fancytree-drop-after, #fancytree-drop-marker.fancytree-drop-before {
width: 100px;
/* marker is by default position: relative which doesn't make sense */
position: absolute !important;
/* heaving a height helps with positioning since the algorithm calculating "top" takes it into account */
height: 19px;
}
:root {
--rg-prose-font: var(--system-stack-sans-serif);
--rg-prose-size: 16px;
--theme-style: light;
--main-font-family: var(--rg-prose-font);
--main-font-size: var(--rg-prose-size);
--tree-font-family: var(--rg-prose-font);
--tree-font-size: calc(var(--rg-prose-size) * 0.8);
--detail-font-family: var(--rg-prose-font);
--detail-font-size: var(--rg-prose-size);
--monospace-font-family: var(--system-stack-monospace);
--monospace-font-size: var(--rg-prose-size);
--main-background-color: var(--notion-bg-default);
--main-border-color: var(--notion-fg-gray);
--main-text-color: var(--notion-fg-default);
--accented-background-color: var(--notion-bg-blue);
--more-accented-background-color: var(--notion-bg-gray);
--button-background-color: var(--accented-background-color);
--button-border-color: var(--more-accented-background-color);
--button-text-color: var(--main-text-color);
--button-disabled-background-color: var(--more-accented-background-color);
--button-disabled-text-color: var(--main-text-color);
--button-border-color: var(--notion-bg-gray);
--button-text-color: var(--notion-fg-default);
--button-border-radius: 5px;
--primary-button-background-color: var(--notion-bg-blue);
--primary-button-text-color: var(--notion-bg-default);
--primary-button-border-color: var(--notion-select-blue);
--muted-text-color: var(--notion-select-gray);
--input-text-color: var(--main-text-color);
--input-background-color: transparent;
--hover-item-text-color: var(--main-text-color);
--hover-item-background-color: transparent;
--hover-item-border-color: var(--main-border-color);
--active-item-text-color: var(--main-text-color);
--active-item-background-color: var(--accented-background-color);
--active-item-border-color: transparent;
--menu-text-color: var(--main-text-color);
--menu-background-color: var(--main-background-color);
--modal-background-color: var(--main-background-color);
--modal-backdrop-color: var(--main-text-color);
--left-pane-background-color: var(--main-background-color);
--left-pane-text-color: var(--main-text-color);
--launcher-pane-background-color: var(--accented-background-color);
--launcher-pane-text-color: var(--main-text-color);
--active-tab-background-color: var(--accented-background-color);
--active-tab-hover-background-color: var(--notion-select-default);
--active-tab-text-color: var(--main-text-color);
--inactive-tab-background-color: var(--notion-bg-gray);
--inactive-tab-hover-background-color: var(--notion-select-default);
--inactive-tab-text-color: var(--muted-text-color);
--scrollbar-border-color: var(--more-accented-background-color);
--tooltip-background-color: var(--notion-select-default);
--link-color: var(--notion-fg-blue);
--mermaid-theme: default;
}
input.note-title {
font-weight: 500;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment