Logseq Gruvbox

logseq-config.edn

{
 :journal-basis "daily" 

 :project {
           ;; Selected public notes can be published to https://logseq.com/your-project-or-your-username.
           :name "Bryan Jenks"
           :alias "TallGuyJenks"
           ;; your twitter handle
           :twitter "tallguyjenks"
           ;; description supports both hiccup and html
           :description "Neurons imitating silicon and lightning."}
 ;; Currently, we support either "Markdown" or "Org".
 ;; This can overwrite your global preference so that
 ;; maybe your personal preferred format is Org but you'd
 ;; need to use Markdown for some projects.
 ;; :preferred-format ""
 
 ;; Preferred workflow style. 
 ;; Value is either ":now" for NOW/LATER style,
 ;; or ":todo" for TODO/DOING style.
 :preferred-workflow :todo

 ;; Git settings
 :git-pull-secs 1800
 :git-push-secs 3600
 :git-auto-push true

 ;; The app will ignore those directories or files.
 ;; E.g. "/archived" "/test.md"
 :hidden []
 
 ;; When creating the new journal page, the app will use your template content here.
 ;; Example for Markdown users: "## [[Work]]\n###\n## [[Family]]\n###\n
 ;; Example for Org mode users: "** [[Work]]\n***\n** [[Family]]\n***\n
 :default-templates
 {:journals ""}

 ;; The app will show those queries in today's journal page,
 ;; the "NOW" query asks the tasks which need to be finished "now",
 ;; the "NEXT" query asks the future tasks.
 :default-queries
 {:journals
  [{:title "🔨 DOING"
    :query [:find (pull ?h [*])
            :in $ ?start ?today
            :where
            [?h :block/marker ?marker]
            [?h :block/page ?p]
            [?p :page/journal? true]
            [?p :page/journal-day ?d]
            [(>= ?d ?start)]
            [(<= ?d ?today)]
            [(contains? #{"NOW" "DOING"} ?marker)]]
    :inputs [:14d :today]
    :result-transform (fn [result]
                        (sort-by (fn [h]
                                   (get h :block/priority "Z")) result))
    :collapsed? false}
   {:title "📅 NEXT"
    :query [:find (pull ?h [*])
            :in $ ?start ?next
            :where
            [?h :block/marker ?marker]
            [?h :block/ref-pages ?p]
            [?p :page/journal? true]
            [?p :page/journal-day ?d]
            [(> ?d ?start)]
            [(< ?d ?next)]
            [(contains? #{"NOW" "LATER" "TODO"} ?marker)]]
    :inputs [:today :7d-after]
    :collapsed? false}]}

 ;; Add your own commands to speedup.
 ;; E.g. [["js" "Javascript"]]
 :commands
 [
  ["py" "```python\n\n```"],
  ["code" "```\n\n```"],
  ["pytodo" "TODO [[Python]] "],
  ["pydone" "DONE [[Python]] "],
  ["pylater" "LATER [[Python]] "],
  ["pynow" "NOW [[Python]] "],
  ["macro" "{{{hl }}}"],
 ]

 ;; Macros replace texts and will make you more productive.
 ;; For example:
 ;; Add this to the macros below:
 ;; {"poem" "Rose is $1, violet's $2. Life's ordered: Org assists you."}
 ;; input "{{{poem red,blue}}}"
 ;; becomes
 ;; Rose is red, violet's blue. Life's ordered: Org assists you.
 :macros
 {
  "poem" "Rose is $1, violet's $2. Life's ordered: Org assists you."
  "hlr" "<mark class='red'>$1</mark>"
  "hlo" "<mark class='orange'>$1</mark>"
  "hly" "<mark class='yellow'>$1</mark>"
  "hlg" "<mark class='green'>$1</mark>"
  "hlc" "<mark class='cyan'>$1</mark>"
  "hlb" "<mark class='blue'>$1</mark>"
  "hlp" "<mark class='purple'>$1</mark>"
  "hlk" "<mark class='pink'>$1</mark>"
 }
 :ui/show-brackets? true
 :date-formatter "yyyy-MM-dd"
 :all-pages-public? true
 :markdown/version 2
 
;; :default-home {:page "Python"}
:sidebar ["Contents" "Recent" "TODO" "DOING" "DONE" "Page graph" "Help"]
 
 }

logseq-Gruvbox.css

@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;700&family=Fira+Sans:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap");

:root {
  --background: #282828;
  --light-background: #3c3836;
  --lighter-background: #504945;
  --dark-background: #3c3836;
  --darker-background: #1d2021;
  --foreground: #ebdbb2;
  --current-line: #504954;
  --comment: #928374;
  --white: var(--foreground);
  --white-hover: #f8f8f280;
  --red: #cc241d;
  --blue: #458588;
  --blue-hover: #83a598;
  --orange: #d65d0e;
  --orange-hover: #fe8019;
  --yellow: #d79921;
  --green: #98971a;
  --purple: #b16286;
  --purple-hover: #d3869b;
  --cyan: #689d6a;
  --cyan-hover: #8ec07c;
  --pink: #ff79c6;
  --pink-hover: #ff79c680;

  --ls-tag-text-opacity: 0.8;
  --ls-tag-text-hover-opacity: 0.8;
  --ls-page-text-size: 16px;
  --ls-page-title-size: 36px;
  --ls-font-family: "Fira Code";
  --ls-font-weight: 300;
  --ls-font-letter-spacing: 0.002em;
  --ls-font-line-height: 1.5;

  --ls-border-radius-low: 3px;
  --ls-border-radius-medium: 6px;
}
/* Stretches content for visibility */
.cp__sidebar-main-content {
    max-width: 1400px !important;
}
/* Custom Tag emoji's */
/* STAR */
a.tag[data-ref="star" i]::before {
    content: "⭐";
    visibility: visible;
    border-radius: 2px;
    padding: 2px;
    background: var(--blue);
    box-shadow: 0 0 4px var(--blue);
}

a.tag[data-ref="star" i] {
    visibility: hidden;
    width: 24px;
    white-space: nowrap;
}
/* IDEA */
a.tag[data-ref="idea" i]::before {
    content: "💡";
    visibility: visible;
    border-radius: 2px;
    padding: 2px;
    background: var(--blue);
    box-shadow: 0 0 4px var(--blue-hover);
}

a.tag[data-ref="idea" i] {
    visibility: hidden;
    width: 24px;
    white-space: nowrap;
}
/* Documentation */
a.tag[data-ref="documentation" i]::before {
    content: "📝";
    visibility: visible;
    border-radius: 2px;
    padding: 2px;
    background: var(--blue);
    box-shadow: 0 0 4px var(--blue-hover);
}

a.tag[data-ref="documentation" i] {
    visibility: hidden;
    width: 24px;
    white-space: nowrap;
}

.dark-theme,
html[data-theme="dark"] {
  --ls-primary-background-color: var(--background);
  /*--ls-primary-background-color: var(--dark-background);*/
  --ls-secondary-background-color: var(--dark-background);
  --ls-tertiary-background-color: var(--light-background);
  --ls-quaternary-background-color: var(--light-background);
  --ls-quinary-background-color: var(--darker-background);

  --ls-active-primary-color: var(--foreground);
  --ls-active-secondary-color: var(--foreground);

  --ls-primary-text-color: var(--foreground);
  --ls-secondary-text-color: var(--white-hover);

  --ls-search-background-color: var(--background);
  --ls-border-color: var(--comment);
  --ls-secondary-border-color: var(--ls-border-color);
  --ls-menu-hover-color: var(--light-background);
  --ls-table-tr-even-background-color: var(--light-background);

  --ls-head-text-color: var(--foreground);
  --ls-title-text-color: var(--foreground);

  --ls-link-text-color: var(--orange);
  --ls-link-text-hover-color: var(--orange-hover);

  --ls-link-ref-text-color: var(--orange);
  --ls-link-ref-text-hover-color: var(--orange-hover);
  --ls-block-ref-link-text-color: var(--ls-border-color);

  --ls-tag-text-color: var(--blue);
  --ls-tag-text-hover-color: var(--blue-hover);

  --ls-block-bullet-border-color: var(--current-line);
  --ls-block-bullet-color: var(--cyan);
  --ls-block-highlight-color: var(--current-line);
  --ls-block-properties-background-color: var(--light-background);

  --ls-page-checkbox-color: transparent;
  --ls-page-checkbox-border-color: var(--comment);

  --ls-page-blockquote-color: var(--foreground);
  --ls-page-blockquote-bg-color: var(--dark-background);
  --ls-page-blockquote-border-color: var(--purple);

  --ls-page-inline-code-color: var(--orange);
  --ls-page-inline-code-bg-color: var(--darker-background);

  --ls-scrollbar-background-color: var(--background);
  --ls-scrollbar-foreground-color: var(--darker-background);
  --ls-scrollbar-thumb-hover-color: var(--light-background);

  --ls-icon-color: var(--white-hover);
  --ls-search-icon-color: var(--white-hover);
  --ls-a-chosen-bg: var(--light-background);
  --ls-right-sidebar-code-bg-color: var(--light-background);
  --ls-selection-background-color: var(--comment);
  --ls-slide-background-color: var(--ls-primary-background-color);
  --ls-guideline-color: var(--cyan);
}

html,
body {
  font-weight: var(--ls-font-weight);
  letter-spacing: var(--ls-font-letter-spacing);
  line-height: var(--ls-font-line-height);
  font-size: var(--ls-page-text-size);
  background-color: var(--darker-background) !important;
}

i {
  color: var(--green);
}

b {
  color: var(--red);
}

del {
  color: var(--comment);
}

u {
  color: var(--purple);
}

mark {
  background-color: var(--yellow);
}

.bg-orange-400 {
  background-color: var(--orange);
}

.bg-green-600 {
  background-color: var(--green);
}

.bg-red-500 {
  background-color: var(--red);
}

.dark-theme .form-checkbox {
  border: 1px solid var(--ls-page-checkbox-border-color) !important;
  border-radius: var(--ls-border-radius-low) !important;
}

.external-link {
  color: var(--cyan);
  text-decoration: none;
  border-bottom: none;
}

.external-link:hover {
  color: var(--cyan-hover);
}

h1.title,
.ls-block h1,
.ls-block h2,
.ls-block h3,
.ls-block h4,
.ls-block h5,
.ls-block h6 {
  font-weight: 400;
  color: var(--red);
}

h1.title {
  color: var(--red);
}


.priority {
  color: var(--ls-tag-text-color);
  opacity: 1;
}

.priority:hover,
a.tooltip-priority:hover {
  color: var(--ls-tag-text-hover-color);
  opacity: 0.5;
}

a.tooltip-priority {
  color: var(--ls-tag-text-color);
}

.Tooltip__label {
  background: var(--ls-quinary-background-color);
}

.Tooltip__label::after {
  border-bottom-color: var(--ls-quinary-background-color);
}

.page-reference .bracket {
  color: var(--ls-border-color);
  opacity: 0.8;
}

.cp__right-sidebar-inner, .cp__right-sidebar-topbar, .cp__header, .cp__sidebar-main-layout {
  background-color: var(--background);
}

.cp__right-sidebar .sidebar-item {
    border-top-color: var(--light-background);
 	background-color: var(--light-background);
}

.CodeMirror {
  font-family: "Fira Code", "Nerd Font", monospace;
  line-height: 1.2;
  background: var(--darker-background) !important;
}

.cm-s-default.CodeMirror,
.cm-s-default .CodeMirror-gutters {
  background-color: transparent ;
  color: var(--white) !important;
  border: none;
}

.extensions__code-lang {
  background: var(--light-background);
}

.cm-s-default.CodeMirror {
  border: 5px solid var(--light-background);
}

.cm-s-default .CodeMirror-gutters {
  color: var(--background);
}
.cm-s-default .CodeMirror-cursor {
  border-left: solid thin var(--white);
}
.cm-s-default .CodeMirror-linenumber {
  color: var(--comment);
}
.cm-s-default .CodeMirror-selected {
  background: rgba(255, 255, 255, 0.1);
}

.cm-s-default .CodeMirror-line {
  box-shadow: none;
}

.cm-s-default .CodeMirror-line::selection,
.cm-s-default .CodeMirror-line > span::selection,
.cm-s-default .CodeMirror-line > span > span::selection {
  background: rgba(255, 255, 255, 0.1) !important;
}
.cm-s-default .CodeMirror-line::-moz-selection,
.cm-s-default .CodeMirror-line > span::-moz-selection,
.cm-s-default .CodeMirror-line > span > span::-moz-selection {
   background: rgba(255, 255, 255, 0.1) !important;
}
.cm-s-default span.cm-comment {
  color: var(--comment);
}
.cm-s-default span.cm-string,
.cm-s-default span.cm-string-2 {
  color: var(--yellow);
}
.cm-s-default span.cm-number {
  color: var(--purle);
}
.cm-s-default span.cm-variable {
  color: var(--green);
}
.cm-s-default span.cm-variable-2 {
  color: var(--white);
}
.cm-s-default span.cm-def {
  color: var(--green);
}
.cm-s-default span.cm-operator {
  color: var(--pink);
}
.cm-s-default span.cm-keyword {
  color: var(--pink);
}
.cm-s-default span.cm-atom {
  color: var(--purple);
}
.cm-s-default span.cm-meta {
  color: var(--white);
}
.cm-s-default span.cm-tag {
  color: var(--pink);
}
.cm-s-default span.cm-attribute {
  color: var(--green);
}
.cm-s-default span.cm-qualifier {
  color: var(--green);
}
.cm-s-default span.cm-property {
  color: var(--cyan);
}
.cm-s-default span.cm-builtin {
  color: var(--green);
}
.cm-s-default span.cm-variable-3,
.cm-s-default span.cm-type {
  color: var(--orange);
}

.cm-s-default .CodeMirror-activeline-background {
  background: rgba(255, 255, 255, 0.1);
}
.cm-s-default .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: var(--white) !important;
}

#right-sidebar pre.CodeMirror-line {
  background: transparent;
}
.cm-s-solarized.cm-s-dark {
	color: var(--foreground);
    background-color: var(--dark-background) !important;
    text-shadow: var(--background) 0 1px;
}
.cm-s-solarized.cm-s-dark.CodeMirror ::selection {
    background: rgba(255, 255, 255, 0.1) !important;
}
.cm-s-solarized.cm-s-dark .CodeMirror-linenumber {
    color: var(--foreground);
    text-shadow: var(--background) 0 -1px ;
    background-color: var(--light-background) !important;
}
.CodeMirror-gutter, .CodeMirror-gutters {
    color: var(--foreground);
    text-shadow: var(--background) 0 -1px ;
    background-color: var(--light-background) !important;
}
.dark-theme code[class*="language-"], .dark-theme pre[class*="language-"] {
  word-wrap: break-word !important;
  white-space: pre-wrap !important;
}

/************************* 
 * Highlight tags
 *************************/
mark.red {background-color: var(--red);}
mark.orange {background-color: var(--orange);}
mark.yellow {background-color: var(--yellow);}
mark.green {background-color: var(--green);}
mark.cyan {background-color: var(--cyan);}
mark.blue {background-color: var(--blue);}
mark.purple {background-color: var(--purple);}
mark.pink {background-color: var(--pink);}


/************************* 
 * Editing block threading
 *************************/
.ls-block > div > div.items-center {
  position: relative;
}

div.items-center::before,
div.items-center::after,
.ls-block::before,
.ls-block::after,
.block-content-wrapper::before {
  pointer-events: none;
}

.ls-block > div > div.items-center::before {
  content: "";
  height: 100%;
  left: -2px;
  right: 6px;
  top: calc(-50% + 1px);
  position: absolute;
  border-left: 2px solid transparent;
  border-bottom: 2px solid transparent;
  border-bottom-left-radius: 10px;
}

.blocks-container > .ls-block > div > div.items-center::before,
.blocks-container > .ls-block:focus-within > div > div.items-center::after,
.blocks-container > .block-children:focus-within > .ls-block::before {
  display: none;
}

.ls-block:focus-within > div > div.items-center::before {
  border-color: var(--yellow);
}

.ls-block > div > div.items-center::after {
  content: "";
  height: calc(100% - 10px);
  top: -50%;
  left: -2px;
  position: absolute;
  border-left: 2px solid transparent;
}

.ls-block:focus-within > div > div.items-center::after {
  border-color: var(--yellow);
}

.block-children > .ls-block::before {
  content: "";
  top: -10px;
  bottom: 0;
  border-left: 2px solid transparent;
  left: -2px;
  position: absolute;
}

.block-children:focus-within > .ls-block:not(:focus-within)::before {
  border-color: var(--yellow);
}

.block-children:focus-within > .ls-block:focus-within ~ .ls-block::before {
  border-color: transparent;
}

.ls-block > div > .block-content-wrapper {
  position: relative;
}

.ls-block > div > .block-content-wrapper::before {
  content: "";
  top: 1em;
  bottom: 0;
  left: -17px;
  position: absolute;
  border-left: 2px solid transparent;
}

.ls-block[haschild=true]:focus-within > div > .block-content-wrapper::before {
  border-color: red;
}

.doc-mode div.items-center::before,
.doc-mode div.items-center::after,
.doc-mode .ls-block::before,
.doc-mode .ls-block::after {
  display: none;
}


/************************* 
 * Priority items
 *************************/

a[priority],
a.priority {
  font-size: 0px;
  /* Hide text */
}

a[priority]::before {
  font-size: var(--ls-page-text-size);
}

a[priority=A]::before,
a.priority[href="#/page/A" i]:before {
  content: "🔴️";
  visibility: visible;
}

a[priority=B]::before,
a.priority[href="#/page/B" i]:before {
  content: "🟡️";
  visibility: visible;
}

a[priority=C]::before,
a.priority[href="#/page/C" i]:before {
  content: "🟢️";
  visibility: visible;
}

a.priority[href="#/page/A" i],
[href="#/page/B" i],
[href="#/page/C" i] {
  visibility: hidden;
  width: 1.5em;
  height: 1.5em;
  white-space: nowrap;
  text-shadow: var(--ct-tag-shadow);
  position: relative;
}

a[priority]::before,
a.priority::before {
  border-radius: 50%;
  color: var(--blue);
  display: inline-block;
  font-size: 16px;
  font-weight: 650;
  height: 1rem;
  line-height: 1rem;
  text-align: center;
  width: 38px;
  margin-left: -3px;
}

a.tooltip-priority:first-of-type::before {
  margin-left: 0.3em;
  margin-top: 0.5em;
}

Oh thank you, this is a blessing. Perhaps this is all @ThePrimeagen's fault: now the first thing I look for in any app is a Gruvbox theme. Now this will make me look 120% silly, but how do I install this? Thank you again!

EDIT: problem solved, just go to your local logseq database/repo and copy-paste this content into <your-repo>/logseq/custom.css.

@baggiponte LOL i love him 🤣

if i use an app that doesn't have gruvbox, i make it. Long before Primeagen.

I made the gruvbox theme for @rstudio, @logseq, and i made one for Roam Research before i found out there was one already.

Gruvbox is LIFE

@tallguyjenks I tried to install your gruvboxr theme, but unfortunately the result is a bit underwhelming because I have a Mac... But I do agree with you and I try to have gruvbox literally everywhere.

Ah, quick note: I copy pasted the contents of this into custom.css, but I see no changes in logseq. I inspected the console with CMD+ALT+i and found these two warnings:

DevTools failed to load source map: Could not parse content for file:///Applications/Logseq.app/Contents/Resources/app/js/index.umd.js.map: Unexpected end of JSON input

DevTools failed to load source map: Could not parse content for file:///Applications/Logseq.app/Contents/Resources/app/js/isomorphic-git/1.7.4/index.umd.min.js.map: Unexpected end of JSON input

@baggiponte Havent worked on gruvboxr much recently, and the ACE editor class targeting to get the theme right is tricky, when i do more work in Rstudio again i'll likely pick up the project again, and always welcome pull requests lol

strange output, never had that output before. using the Logseq web app? maybe sign out and sign in again, sometimes the changes dont work for me immediately so i add a comment to the common the CSS and click off of the file into the sidebar area and then it sometimes implements .___.

Now it works! I do not know if that is because I restarted my machine or something else, but now it works. Thank you again for your kind answers and the effort for putting up this custom CSS!

My pleasure :)

@tallguyjenks I tried to install your gruvboxr theme, but unfortunately the result is a bit underwhelming because I have a Mac... But I do agree with you and I try to have gruvbox literally everywhere.

Ah, quick note: I copy pasted the contents of this into custom.css, but I see no changes in logseq. I inspected the console with CMD+ALT+i and found these two warnings:

DevTools failed to load source map: Could not parse content for file:///Applications/Logseq.app/Contents/Resources/app/js/index.umd.js.map: Unexpected end of JSON input

DevTools failed to load source map: Could not parse content for file:///Applications/Logseq.app/Contents/Resources/app/js/isomorphic-git/1.7.4/index.umd.min.js.map: Unexpected end of JSON input

I encountered this error too on my Linux, but rebooting the app and OS didn't solve it.

Turn out it was probably caused by me deleting the default custom.css then putting in a new custom.css file.
When i just copy the CSS content and paste it in the default custom.css, it works.

@tylerlmz1 thats how i do it, copy paste only :)

thank you for making the gruvbox theme @tallguyjenks

thank you for the theme @tallguyjenks

Hi @tallguyjenks, Thank you for the theme and the video!