├── README.md ├── roam-bear-gotham.css ├── roam-bear-gotham.png ├── roam-bear-panic.css ├── roam-bear-panic.png ├── roam-dark.css └── roam-dark.png /README.md: -------------------------------------------------------------------------------- 1 | # Roam Research Dark Theme Collection 2 | 3 | This is my personal collection of dark theme for [Roam Research](https://roamresearch.com). Currently, not of all element on Roam get dark mode but this is sufficient enough for my daily note taking. If you find any element that need to be changed, please let me know. 4 | 5 | ## Screenshot 6 | 7 | ### Roam Dark 8 | This is my default dark theme. Inspired by John Sundell's [Xcode theme](https://github.com/JohnSundell/XcodeTheme) 9 | 10 | ![](/roam-dark.png) 11 | 12 | ### Roam Gotham 13 | This one is based on [Bear app](https://bear.app/) Gotham theme 14 | 15 | ![](/roam-bear-gotham.png) 16 | 17 | ### Roam Panic 18 | This one is based on [Bear app](https://bear.app/) Panic theme 19 | 20 | 21 | ![](/roam-bear-panic.png) 22 | 23 | ## How to use 24 | You can use [Stylus](https://add0n.com/stylus.html) then copy paste the css to apply theme. 25 | 26 | I'm currently using [Roam Toolkit](https://chrome.google.com/webstore/detail/roam-toolkit/ebckolanhdjilblnkcgcgifaikppnhba) extension. Copy the CSS, choose Custom CSS on extension menu then paste and save. -------------------------------------------------------------------------------- /roam-bear-gotham.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 16px; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 4 | letter-spacing: -0.001em; 5 | line-height: 1.5; 6 | -webkit-font-smoothing: antialiased; 7 | text-rendering: optimizeLegibility; 8 | } 9 | 10 | @media (prefers-color-scheme: dark) { 11 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button { 12 | padding: 8px 20px; 13 | font-weight: 900; 14 | cursor: pointer; 15 | font-size: 16px; 16 | color: #2eb88c; 17 | } 18 | 19 | 20 | /* Background color for the rest of body */ 21 | body { 22 | background-color: #11151c; 23 | font-size: 16px; 24 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 25 | letter-spacing: -0.001em; 26 | line-height: 1.5; 27 | -webkit-font-smoothing: antialiased; 28 | text-rendering: optimizeLegibility; 29 | } 30 | 31 | /* Header - Note title */ 32 | .roam-app h1 { 33 | color: #2eb88c !important; 34 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 35 | font-weight: bold; 36 | } 37 | 38 | /* primary text colour */ 39 | .roam-app { 40 | color: #6aa9b9 !important; 41 | } 42 | 43 | /*topbar*/ 44 | .roam-topbar { 45 | background-color: #11151c; 46 | border-bottom: 1px solid #1c373e; 47 | } 48 | 49 | /*sidebar*/ 50 | .roam-body .roam-app .roam-sidebar-container { 51 | background-color: #11151c; 52 | border-right: 1px solid #1c373e; 53 | } 54 | 55 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper { 56 | color: #2eb88c; 57 | } 58 | 59 | .flex-v-box .starred-pages-wrapper:first-child { 60 | background-color: #1c373e; 61 | } 62 | 63 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { 64 | color: #2eb88c 65 | } 66 | 67 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { 68 | color: white; 69 | } 70 | 71 | /*right sidebar*/ 72 | #right-sidebar { 73 | background-color: #11151c !important; 74 | border-left: 1px solid #1c373e; 75 | font-size: 15px; 76 | } 77 | 78 | #right-sidebar .flex-h-box .bp3-button .bp3-minimal .bp3-small { 79 | color: #2eb88c; 80 | } 81 | 82 | /*border between page in daily notes*/ 83 | .roam-log-container .roam-log-page { 84 | border-top: 1px solid #1c373e; 85 | } 86 | 87 | /* hashtags */ 88 | .rm-page-ref-tag { 89 | color: #d4fef0 !important; 90 | background: #1a6950; 91 | padding: .1em .6em; 92 | border-radius: 12px; 93 | 94 | } 95 | 96 | .block-border-left { 97 | border-left: 1px solid #1c373e; 98 | } 99 | 100 | .rm-block-ref { 101 | border-bottom: 1px solid #2eb88c; 102 | } 103 | 104 | .rm-block-ref:hover { 105 | background: #091722; 106 | border: 1px solid #112a3f; 107 | } 108 | 109 | .rm-page-ref-tag:hover { 110 | text-decoration: underline; 111 | } 112 | 113 | /* the bright blue highlight color */ 114 | .block-highlight-blue { 115 | background-color: #1c2e3e; 116 | } 117 | 118 | /* the reference boxes at the bottom */ 119 | .rm-reference-item { 120 | background-color: #0B1721; 121 | margin-top: 12px; 122 | border: 1px solid #1E3745; 123 | border-radius: 4px; 124 | } 125 | 126 | .rm-reference-item .roam-block { 127 | padding-top: 8px; 128 | padding-bottom: 8px; 129 | } 130 | 131 | .rm-reference-item .controls { 132 | padding-top: 10px; 133 | padding-bottom: 4px; 134 | } 135 | 136 | .rm-page-ref.rm-page-ref-link-color { 137 | color: #f2825a; 138 | } 139 | 140 | .rm-page-ref:hover { 141 | color: #ff895e; 142 | } 143 | 144 | .rm-page-ref.rm-page-ref-link-color { 145 | color: #f2825a; 146 | } 147 | 148 | a { 149 | color: #f2825a; 150 | } 151 | 152 | a:focus { 153 | color: #f2825a; 154 | } 155 | 156 | a:hover { 157 | color: #ff895e; 158 | } 159 | 160 | .rm-level2 { 161 | color: #2eb88c; 162 | font-weight: 700; 163 | } 164 | 165 | .rm-level3 { 166 | color: #2eb88c; 167 | font-weight: 500; 168 | } 169 | 170 | code { 171 | color: #a0a2b6; 172 | background: #091722; 173 | border: 1px solid #112a3f; 174 | padding: 0.3em 0.4em; 175 | border-radius: 3px; 176 | } 177 | 178 | 179 | /* CodeMirror */ 180 | .CodeMirror { 181 | background: #091722; 182 | color: #589cab; 183 | } 184 | 185 | .CodeMirror-lines { 186 | color: #a0a2b6 187 | } 188 | 189 | .CodeMirror-gutters { 190 | background-color: #091722; 191 | border-right: 1px solid #112a3f; 192 | } 193 | 194 | .CodeMirror-activeline-background { 195 | background: #0D2030; 196 | } 197 | 198 | .cm-s-default .cm-keyword { 199 | color: #5393a2; 200 | } 201 | 202 | .cm-s-default .cm-bracket .CodeMirror-matchingbracket { 203 | text-decoration: #5393a2; 204 | color: white !important; 205 | } 206 | 207 | } -------------------------------------------------------------------------------- /roam-bear-gotham.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adityadaniel/roam-dark-theme/9aa95a08166bb1001c3cf689014ddf8f05bc24e3/roam-bear-gotham.png -------------------------------------------------------------------------------- /roam-bear-panic.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 16px; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 4 | letter-spacing: -0.001em; 5 | line-height: 1.5; 6 | -webkit-font-smoothing: antialiased; 7 | text-rendering: optimizeLegibility; 8 | } 9 | 10 | @media (prefers-color-scheme: dark) { 11 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button { 12 | padding: 8px 20px; 13 | font-weight: 900; 14 | cursor: pointer; 15 | font-size: 16px; 16 | color: #f9b637; 17 | } 18 | 19 | 20 | /* Background color for the rest of body */ 21 | body { 22 | background-color: #111c2a; 23 | font-size: 16px; 24 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 25 | letter-spacing: -0.001em; 26 | line-height: 1.5; 27 | -webkit-font-smoothing: antialiased; 28 | text-rendering: optimizeLegibility; 29 | } 30 | 31 | /* styles page titling */ 32 | 33 | /* Header - Note title */ 34 | .roam-app h1 { 35 | color: #f9b637 !important; 36 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 37 | font-weight: bold; 38 | } 39 | 40 | /* primary text colour */ 41 | .roam-app { 42 | color: #f6f7ed !important; 43 | } 44 | 45 | /*topbar*/ 46 | .roam-topbar { 47 | background-color: #111c2a; 48 | border-bottom: 1px solid #090b10; 49 | } 50 | 51 | /*sidebar*/ 52 | .roam-body .roam-app .roam-sidebar-container { 53 | background-color: #111c2a; 54 | border-right: 1px solid #090b10; 55 | } 56 | 57 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper { 58 | color: #f9b637; 59 | } 60 | 61 | .flex-v-box .starred-pages-wrapper:first-child { 62 | background-color: #090b10; 63 | } 64 | 65 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { 66 | color: #f9b637 67 | } 68 | 69 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { 70 | color: #f9b637; 71 | } 72 | 73 | /*right sidebar*/ 74 | #right-sidebar { 75 | background-color: #111c2a !important; 76 | border-left: 1px solid #090b10; 77 | font-size: 15px; 78 | } 79 | 80 | #right-sidebar .flex-h-box .bp3-button .bp3-minimal .bp3-small { 81 | color: #f9b637; 82 | } 83 | 84 | /*border between page in daily notes*/ 85 | .roam-log-container .roam-log-page { 86 | border-top: 1px solid #8e743d; 87 | } 88 | 89 | /* hashtags */ 90 | .rm-page-ref-tag { 91 | color: #f6f7ed !important; 92 | background: #6f4ebb; 93 | padding: .1em .6em; 94 | border-radius: 12px; 95 | } 96 | 97 | /* square brackets color */ 98 | .rm-page-ref-brackets { 99 | color: #8e743d; 100 | } 101 | 102 | .block-border-left { 103 | border-left: 1px solid #8e743d; 104 | } 105 | 106 | .rm-block-ref { 107 | border-bottom: 1px solid #f9b637; 108 | } 109 | 110 | .rm-block-ref:hover { 111 | background: #091722; 112 | border: 1px solid #112a3f; 113 | } 114 | 115 | .rm-page-ref-tag:hover { 116 | text-decoration: underline; 117 | } 118 | 119 | /* the bright blue highlight color */ 120 | .block-highlight-blue { 121 | background-color: #1c2e3e; 122 | } 123 | 124 | /* the reference boxes at the bottom */ 125 | .rm-reference-item { 126 | background-color: #172133; 127 | margin-top: 12px; 128 | border: 1px solid #1E3745; 129 | border-radius: 4px; 130 | } 131 | 132 | .rm-reference-item .roam-block { 133 | padding-top: 8px; 134 | padding-bottom: 8px; 135 | } 136 | 137 | .rm-reference-item .controls { 138 | padding-top: 10px; 139 | padding-bottom: 4px; 140 | } 141 | 142 | .rm-page-ref.rm-page-ref-link-color { 143 | color: #53c1dc; 144 | } 145 | 146 | .rm-page-ref:hover { 147 | color: #53c1dc; 148 | } 149 | 150 | .rm-page-ref.rm-page-ref-link-color { 151 | color: #53c1dc; 152 | } 153 | 154 | /* pop up page completion */ 155 | .bp3-text-overflow-ellipsis { 156 | color: #111c2a !important; 157 | } 158 | 159 | .bp3-elevation-3 { 160 | color: #111c2a !important; 161 | border: 1px solid #2d4562; 162 | } 163 | 164 | a { 165 | color: #53c1dc; 166 | } 167 | 168 | a:focus { 169 | color: #53c1dc; 170 | } 171 | 172 | a:hover { 173 | color: #53c1dc; 174 | } 175 | 176 | .rm-level2 { 177 | color: #f9b637; 178 | font-weight: 700; 179 | } 180 | 181 | .rm-level3 { 182 | color: #f9b637; 183 | font-weight: 500; 184 | } 185 | 186 | code { 187 | color: #f6f7ee; 188 | background: #162133; 189 | border: 1px solid #2d4562; 190 | padding: 0.3em 0.4em; 191 | border-radius: 3px; 192 | } 193 | 194 | 195 | /* CodeMirror */ 196 | .CodeMirror { 197 | background: #091722; 198 | color: #589cab; 199 | } 200 | 201 | .CodeMirror-lines { 202 | color: #a0a2b6 203 | } 204 | 205 | .CodeMirror-gutters { 206 | background-color: #091722; 207 | border-right: 1px solid #112a3f; 208 | } 209 | 210 | .CodeMirror-activeline-background { 211 | background: #0D2030; 212 | } 213 | 214 | .cm-s-default .cm-keyword { 215 | color: #5393a2; 216 | } 217 | 218 | .cm-s-default .cm-bracket .CodeMirror-matchingbracket { 219 | text-decoration: #5393a2; 220 | color: white !important; 221 | } 222 | 223 | } -------------------------------------------------------------------------------- /roam-bear-panic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adityadaniel/roam-dark-theme/9aa95a08166bb1001c3cf689014ddf8f05bc24e3/roam-bear-panic.png -------------------------------------------------------------------------------- /roam-dark.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-size: 16px; 3 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 4 | letter-spacing: -0.001em; 5 | line-height: 1.5; 6 | -webkit-font-smoothing: antialiased; 7 | text-rendering: optimizeLegibility; 8 | } 9 | 10 | @media (prefers-color-scheme: dark) { 11 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .log-button { 12 | padding: 8px 20px; 13 | font-weight: 900; 14 | cursor: pointer; 15 | font-size: 16px; 16 | color: #6bdefe; 17 | } 18 | 19 | 20 | /* Background color for the rest of body */ 21 | body { 22 | background-color: #191919; 23 | font-size: 16px; 24 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 25 | letter-spacing: -0.001em; 26 | line-height: 1.5; 27 | -webkit-font-smoothing: antialiased; 28 | text-rendering: optimizeLegibility; 29 | } 30 | 31 | /* Header - Note title */ 32 | .roam-app h1 { 33 | color: #6bdefe !important; 34 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; 35 | font-weight: bold; 36 | } 37 | 38 | /* primary text colour */ 39 | .roam-app { 40 | color: #a4b9b9 !important; 41 | } 42 | 43 | /*topbar*/ 44 | .roam-topbar { 45 | background-color: #2b2b2b; 46 | border-bottom: 1px solid #292929; 47 | } 48 | 49 | /*sidebar*/ 50 | .roam-body .roam-app .roam-sidebar-container { 51 | background-color: #11151c; 52 | border-right: 1px solid #292929; 53 | } 54 | 55 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper { 56 | color: #6bdefe; 57 | } 58 | 59 | .flex-v-box .starred-pages-wrapper:first-child { 60 | background-color: #292929; 61 | } 62 | 63 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page { 64 | color: #6bdefe 65 | } 66 | 67 | .roam-body .roam-app .roam-sidebar-container .roam-sidebar-content .starred-pages-wrapper .starred-pages .page:hover { 68 | color: white; 69 | } 70 | 71 | /*right sidebar*/ 72 | #right-sidebar { 73 | background-color: #1f1f1f !important; 74 | border-left: 1px solid #292929; 75 | font-size: 15px; 76 | } 77 | 78 | #right-sidebar .flex-h-box .bp3-button .bp3-minimal .bp3-small { 79 | color: #6bdefe; 80 | } 81 | 82 | /*border between page in daily notes*/ 83 | .roam-log-container .roam-log-page { 84 | border-top: 1px solid #292929; 85 | } 86 | 87 | /* hashtags */ 88 | .rm-page-ref-tag { 89 | color: #d4fef0 !important; 90 | background: #1a6950; 91 | padding: .1em .6em; 92 | border-radius: 12px; 93 | 94 | } 95 | 96 | .block-border-left { 97 | border-left: 1px solid #292929; 98 | } 99 | 100 | .rm-block-ref { 101 | border-bottom: 1px solid #6bdefe; 102 | } 103 | 104 | .rm-block-ref:hover { 105 | background: #091722; 106 | border: 1px solid #112a3f; 107 | } 108 | 109 | .rm-page-ref-tag:hover { 110 | text-decoration: underline; 111 | } 112 | 113 | /* the bright blue highlight color */ 114 | .block-highlight-blue { 115 | background-color: #1c2e3e; 116 | } 117 | 118 | /* the reference boxes at the bottom */ 119 | .rm-reference-item { 120 | background-color: #0B1721; 121 | margin-top: 12px; 122 | border: 1px solid #1E3745; 123 | border-radius: 4px; 124 | } 125 | 126 | .rm-reference-item .roam-block { 127 | padding-top: 8px; 128 | padding-bottom: 8px; 129 | } 130 | 131 | .rm-reference-item .controls { 132 | padding-top: 10px; 133 | padding-bottom: 4px; 134 | } 135 | 136 | .rm-page-ref.rm-page-ref-link-color { 137 | color: #5DD8FF; 138 | } 139 | 140 | .rm-page-ref:hover { 141 | color: #ff895e; 142 | } 143 | 144 | .rm-page-ref.rm-page-ref-link-color { 145 | color: #5DD8FF; 146 | } 147 | 148 | a { 149 | color: #5DD8FF; 150 | } 151 | 152 | a:focus { 153 | color: #5DD8FF; 154 | } 155 | 156 | a:hover { 157 | color: #5DD8FF; 158 | } 159 | 160 | .rm-level2 { 161 | color: #6bdefe; 162 | font-weight: 700; 163 | } 164 | 165 | .rm-level3 { 166 | color: #6bdefe; 167 | font-weight: 500; 168 | } 169 | 170 | code { 171 | color: #a0a2b6; 172 | background: #091722; 173 | border: 1px solid #112a3f; 174 | padding: 0.3em 0.4em; 175 | border-radius: 3px; 176 | } 177 | 178 | 179 | /* CodeMirror */ 180 | .CodeMirror { 181 | background: #091722; 182 | color: #589cab; 183 | } 184 | 185 | .CodeMirror-lines { 186 | color: #a0a2b6 187 | } 188 | 189 | .CodeMirror-gutters { 190 | background-color: #091722; 191 | border-right: 1px solid #112a3f; 192 | } 193 | 194 | .CodeMirror-activeline-background { 195 | background: #0D2030; 196 | } 197 | 198 | .cm-s-default .cm-keyword { 199 | color: #5393a2; 200 | } 201 | 202 | .cm-s-default .cm-bracket .CodeMirror-matchingbracket { 203 | text-decoration: #5393a2; 204 | color: white !important; 205 | } 206 | 207 | } -------------------------------------------------------------------------------- /roam-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adityadaniel/roam-dark-theme/9aa95a08166bb1001c3cf689014ddf8f05bc24e3/roam-dark.png --------------------------------------------------------------------------------