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;
}

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!

How do you change the color of the font in the editor? Alas tis dark, very dark