abhayprasanna.github.io - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #typescript #golang #go #linux #nodejs #macos #windows #awesome #cli #openai #open-source

abhayprasanna.github.io

(★ 103)

No description available.

File Explorer

Download Latest Version (.zip)

- iAWriterQuattroS-Bold.eot
- iAWriterQuattroS-Bold.woff
- iAWriterQuattroS-Bold.woff2
- iAWriterQuattroS-BoldItalic.eot
- iAWriterQuattroS-BoldItalic.woff
- iAWriterQuattroS-BoldItalic.woff2
- iAWriterQuattroS-Italic.eot
- iAWriterQuattroS-Italic.woff
- iAWriterQuattroS-Italic.woff2
- iAWriterQuattroS-Regular.eot
- iAWriterQuattroS-Regular.woff
- iAWriterQuattroS-Regular.woff2
- README.md
- GPT-3 SmartBlock Screenshot.png
- gpt3.gif
- README.md
- dark-kanban-agenda-main-page-visible.css
- dark-kanban-agenda.css
- kanban agenda screenshot.png
- kanban-agenda.css
- README.md
- - extension.js
  - randomblock.png
  - README.md
- .DS_Store
.DS_Store
5AE19E16-C086-41CF-9132-0B3AB9D30331.jpeg
a song to david.html
a_song_to_david_annotated.html
autotag.js
better-dark-age.css
clockbutton.js
complice-roam.css
dark-age-dracula.css
dark-masonry.css
dark-masonry.png
dark-night-roam.css
Dracula Pro - Screenshot.png
imfeelinglucky.js
index.html
material-palenight-roam.css
mobilesidebarbutton.js
night-owl-roam.css
opensidebars.js
optional.css
rainbow-indent-bullets-core.css
rainbow-indent-bullets.css
rainbow-indent-core.css
rainbow-indent.css
rainbow-indent.png
README.md
reference-path-toggle.js
shades-of-purple.css
todaybutton.js
togglecss.js
variants.png

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 🧛🏿‍♂️ Better Dark Age - Dracula Pro-inspired Roam Theme

Welcome to this Dracula Pro-inspired color theme for Roam Research, which includes a ton of customizations building off @shodty's  [Dark Age theme](https://github.com/shodty/) and @linuz90's [Better Roam Research](https://github.com/linuz90/better-roam-research).

![](https://raw.githubusercontent.com/abhayprasanna/abhayprasanna.github.io/master/Dracula%20Pro%20-%20Screenshot.png)

Love this theme? Say thanks via [PayPal](https://www.paypal.me/abhayprasanna) or Venmo @Abhay-Prasanna - all contributions are reinvested in the Roam community.

Other acknowledgements: Jack Laing, @Azlen, @GitMurf, Hasan Yalcinkaya, Palash Karia, and many others!

# ⚡️ Quick install

```
@import url('https://abhayprasanna.github.io/dark-age-dracula.css'); /* change to whatever color variant your want */
@import url('https://abhayprasanna.github.io/rainbow-indent-bullets.css; /* delete to turn off rainbow indents */
@import url('https://abhayprasanna.github.io/dark-masonry.css'); /* delete to turn off masonry */
```

[Click here for other color variants](#-color-variants)

### How to setup your roam/css page:

[Applying custom themes in Roam Research](https://www.youtube.com/watch?v=UY-sAC2eGyI)

[Troubleshooting typical roam/css issues](https://www.loom.com/share/e7328f19276b43d48d3dbdd7e4a124d4)

# Additional features

## 🌈 Rainbow indents

To include *rainbow indents* please add this CSS snippet (make sure @import lines are together up top)

`@import url('https://abhayprasanna.github.io/rainbow-indent-bullets.css');`

![](https://raw.githubusercontent.com/abhayprasanna/abhayprasanna.github.io/master/rainbow-indent.png)

## 🧱 Masonry Mode

To apply "Masonry mode" transformation to the right sidebar, add this CSS snippet (make sure @import lines are together up top)

`@import url('https://abhayprasanna.github.io/dark-masonry.css');`
Alternatively, you can add an optional button to toggle Masonry mode for the right sidebar instead, using this custom JavaScript extension - [Toggle Masonry CSS](https://github.com/abhayprasanna/abhayprasanna.github.io/blob/master/togglecss.js)

![](https://raw.githubusercontent.com/abhayprasanna/abhayprasanna.github.io/master/dark-masonry.png)

Works on mobile too! Designed to work speciically with @thesved's [Long Tap JS extension](https://github.com/thesved/ViktoRoam/blob/master/js/longtap.js) to enable you to open the sidebar. You can also install [this optional JS](opensidebars.js) to add a right sidebar button to mobile.

https://user-images.githubusercontent.com/67134545/161998251-81b29fa7-ef05-4c1a-88da-fd2c3fcc31e0.mov

## 🎨 Color Variants

There are several variants available (just import the appropriate CSS file from this folder instead). This theme also switches to One Light theme when your OS is not in Dark Mode. Feel free to customize the fonts, colors, etc.

![](https://raw.githubusercontent.com/abhayprasanna/abhayprasanna.github.io/master/variants.png)

# Instructions for Installation

**Dracula Pro**: `@import url('https://abhayprasanna.github.io/dark-age-dracula.css');`

**Night Owl**: `@import url('https://abhayprasanna.github.io/night-owl-roam.css');`

**Material Palenight** `@import url('https://abhayprasanna.github.io/material-palenight-roam.css');`

**Dark Night**: `@import url('https://abhayprasanna.github.io/dark-night-roam.css');`

**Shades of Purple**: `@import url('https://abhayprasanna.github.io/shades-of-purple.css');`

**Complice**: `@import url('https://abhayprasanna.github.io/complice-roam.css');`

If you want to make any changes, copy [this code](http://abhayprasanna.github.io/dark-age-dracula.css) and paste it into a css code block in your [[roam/css]].

This works by linking to an outside .css file, actually located [here](https://abhayprasanna.github.io/better-dark-age.css) to handle all the styling, as it keeps the roam/css page much cleaner/faster.

If you do in fact want to manipulate the source code, just [navigate to the source .css file](https://abhayprasanna.github.io/better-dark-age.css) manually, copy it, and paste it all into your roam/css page.

Here are some [optional CSS](https://github.com/abhayprasanna/abhayprasanna.github.io/blob/master/optional.css) additions and tweaks you can play with.

Please feel free to reach out to me via Roam Slack (@abhay) or Twitter (@abhayance) if you have any questions/suggestions/requests!

Cheers!