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

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