Skip to content

Instantly share code, notes, and snippets.

@thesved

thesved/day-night.md

Last active June 29, 2020 21:58
Show Gist options
  • Save thesved/6e9eac8e0141f547f21c5c78c3bcc614 to your computer and use it in GitHub Desktop.
Save thesved/6e9eac8e0141f547f21c5c78c3bcc614 to your computer and use it in GitHub Desktop.
Download ZIP
Roam Research day-night css
Raw
day-night.md

core

/* IMPORT CORE THEME */
@import url('https://azlen.github.io/roam-themes/core.css');

/* GOOGLE FONTS */
@import url('https://fonts.googleapis.com/css2?family=family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap');	

canvas[data-id="layer2-node"] {	
    filter: invert(1) hue-rotate(110deg) saturate(2.5);	
}

:root {	
    --page-width: 800px;
    
    --header-font: "Source Sans Pro", "Inter", sans-serif;	
    --body-font: "Source Sans Pro", "Inter", sans-serif;	
}

day

:root {
	--bg-color: #EEEEEE;
    --page-color: rgba(255, 255, 255, 0.95);
    	
    --text-color: #000000;
    --icon-color: #5c7080; /* #5c7080 */
    --bullet-color: 203, 203, 203;
    	
    --page-shadow: 0px 8px 14px rgba(0, 0, 0, 0.05);
    	
    --color-primary: 47, 155, 249;/*73, 197, 91;*/
    --color-primary-contrast: #FFFFFF;
    --color-secondary: 147, 100, 235;
    --color-secondary-contrast: #FFFFFF;
    --color-highlight: hsl(50,100%,50%);
}

/* better highlight */
.roam-highlight {
  	font-weight: 300;
}

strong {
  font-weight: 800;
}

night

:root {
    --bg-color: hsl(0,0%,3%);
    --page-color: hsl(10,10%,10%);
    
    --text-color: hsl(0, 0%, 90%);
    --icon-color: rgb(102, 102, 102);
    --bullet-color: 105, 105, 105;
    
    --page-shadow: 0px 8px 14px rgba(255, 255, 255, 0.1);
    --box-shadow-color: 164, 219, 255;
    
    --color-primary: 47, 155, 249;
    --color-primary-contrast: #FFFFFF;
    --color-secondary: 228, 78, 244;
    --color-secondary-contrast: #FFFFFF;
  
    --color-highlight: hsl(50,100%,20%);
}

/* left border */
.block-border-left {
    border-left: 1px solid hsl(204,4%,15%);
}

/* suggestion and popover box shadow */
.bp3-popover, .bp3-elevation-3 {
    -webkit-box-shadow: 0 0 0 1px rgba(var(--box-shadow-color),0.1), 0 2px 4px rgba(var(--box-shadow-color),0.2), 0 8px 24px rgba(var(--box-shadow-color),0.2);
    box-shadow: 0 0 0 1px rgba(var(--box-shadow-color),0.1), 0 2px 4px rgba(var(--box-shadow-color),0.2), 0 8px 24px rgba(var(--box-shadow-color),0.2);
}

/* roam toolkit preview shadow */
#roam-toolkit-iframe-preview {
  	box-shadow: rgba(var(--box-shadow-color), 0.2) 0px 0px 5px 3px!important;
}

/* lighter highlight text */
.roam-article, #roam-right-sidebar-content {
    font-weight: 200;
}

/* font weight contrast fix */
.roam-highlight {
    font-weight: 200;
}
.roam-highlight strong {
  	font-weight: 900;
}
strong {
  	font-weight: 800;
}

/* fix search */
.rm-find-or-create-wrapper .rm-menu-item[style*="background"] {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* emoji mart fix */
.emoji-mart, .emoji-mart input, .emoji-mart-category-label span {
	color: inherit!important;
	background: inherit!important;
	border-color: inherit!important;
}

/* CODE BLOCK STYLING */
/* modified from https://codemirror.net/demo/theme.html#night */
.CodeMirror { background: var(--bg-color) !important; color: #f8f8f8 !important; }
div.CodeMirror-selected { background: #447 !important;  }
.CodeMirror-line::selection, .CodeMirror-line > span::selection, .CodeMirror-line > span > span::selection { background: rgba(68, 68, 119, .99); }
.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: rgba(68, 68, 119, .99); }
.CodeMirror-gutters { background: var(--bg-color); border-right: 1px solid #252525; }
.CodeMirror-guttermarker { color: white !important; }
.CodeMirror-guttermarker-subtle { color: #bbb !important; }
.CodeMirror-linenumber { color: #f8f8f8; }
.CodeMirror-cursor { border-left: 1px solid white !important; }
span.cm-qualifier { color: #666666 !important; }
span.cm-comment { color: #C71FF9 !important; }
span.cm-atom { color: #B58AFD !important; }
span.cm-number, span.cm-attribute { color: #ffd500 !important; }
span.cm-keyword { color: #599eff !important; }
span.cm-string { color: #37f14a !important; }
span.cm-meta { color: #369BFF !important; }
span.cm-variable-2, span.cm-tag { color: #99b2ff !important; }
span.cm-variable-3, span.cm-def, span.cm-type { color: white !important; }
span.cm-bracket { color: #8da6ce !important; }
span.cm-builtin, pan.cm-special { color: #ff9e59 !important; }
span.cm-link { color: #845dc4 !important; }
span.cm-error { color: #F41000 !important; }
.CodeMirror-activeline-background { background: #1C005A !important; }
.CodeMirror-matchingbracket { outline:1px solid grey !important; color:white !important; }

general fixes

/* help bar fixes */
#buffer > div {
    background-color: var(--page-color)!important;
}

@media only screen and (max-width: 600px) {
  iframe#launcher-frame {
    display:none;
  }
  
  .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages {
    height: 50vh!important;
  }
}

/* roam toolkit iframe order */
#roam-toolkit-iframe-preview {
	z-index:9999!important;
}

/* stronger reference button */
.block-ref-count-button {
    opacity:1!important;
}

/* nicer bullet points */
.controls .simple-bullet-outer.roam-bullet-closed {
    border:2px solid rgb(var(--bullet-color)) !important;
    background-color:transparent!important;
}
.controls .simple-bullet-outer.roam-bullet-closed .simple-bullet-inner {
    background-color:transparent!important;
}

.simple-bullet-inner {
    background-color: rgba(var(--bullet-color), 0.4)!important;
}

/* enable sidebar scroll */
.roam-sidebar-container {
  overflow-y:auto;
}
.roam-sidebar-content {
  overflow-y:auto;
}

/* filter icon color when selected */
.bp3-icon-filter[style*="color"], .bp3-icon-filter[style*="color"]::before {
    color: rgb(var(--color-primary)) !important;
}

/* fix date dropdown overflow on mobile */
body > .bp3-portal .bp3-menu {
	max-height: 100vh;
	overflow-y: auto;
}

/* sidebar X to the left */
#roam-right-sidebar-content > div .bp3-icon-minus ~ .bp3-button.bp3-icon-cross {
	right:auto!important;
	left:0!important;
}

@media only screen and (max-width: 600px) {
	#roam-right-sidebar-content > * > .flex-h-box {
	    padding-top: 35px!important;
	}
}

/* sidebar h1 fix */
#roam-right-sidebar-content > div .bp3-icon-plus ~ h1 {
    margin-top: 0!important;
}

/* source code type selector z-index fix */
.roam-block div[style*="z-index: 1000"], .roam-block div[style*="z-index:1000"] {
    z-index:10!important;
}

/* color comment tag */
.rm-page-ref-tag[data-tag='comment'] {
    background-color: rgb(0, 128, 0);
}

/* link fix */
a[href^='http'], .rm-alias-external {
  text-decoration: underline;
  color: rgb(var(--color-secondary))!important;
  font-weight: inherit!important;
}

a[href^='http']:active, a[href^='http']:hover, a[href^='http']:focus {
  text-decoration: none!important;
  border-bottom:1px dashed;
  color: rgb(var(--color-secondary))!important;
}

/* checkbox right margin */
.check-container {
    margin-right: 5px;
}

/* help z-index */
#buffer {
  	z-index:11;
}

/* normal weight page links */
.rm-page-ref {
    font-weight: bold!important;
}

/* left sidebar */
.roam-body .roam-app .roam-sidebar-container {
	bottom: 0!important;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment