Skip to content

Instantly share code, notes, and snippets.

@Vaults

Vaults/pywal-logseq.md

Created October 20, 2023 12:22
Show Gist options
  • Save Vaults/4ecc9711c7ec8ee2e0b4a2a2e8603d55 to your computer and use it in GitHub Desktop.
Save Vaults/4ecc9711c7ec8ee2e0b4a2a2e8603d55 to your computer and use it in GitHub Desktop.
Download ZIP
Pywal or Wal Logseq integration
Raw
pywal-logseq.md

This example only works with dark mode, but feel free to edit this to your heart's desire. To integrate PyWal with Logseq create a script like this:

#!/bin/bash
# Run this script whenever updating your wal configuration
# ./wal-logseq.sh <logseq custom.css folder>;

LOGSEQ=$1
cat ~/.cache/wal/colors.css > $LOGSEQ/custom.css
cat $LOGSEQ/colors.css > $LOGSEQ/custom.css

Then in $LOGSEQ/colors.css put:

/* WAL-SCRIPT */
html[data-theme=dark] {
    background-color: var(--ls-primary-background-color);
}
html:not(.is-native-android) {
    font-family: var(--ls-font-family),sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol!important;
}
.dark-theme, html[data-theme=dark] {
    --ls-primary-background-color: var(--background);
    --ls-secondary-background-color: var(--color1);
    --ls-tertiary-background-color: var(--color1);
    --ls-quaternary-background-color:var(--color2);
    --ls-table-tr-even-background-color: var(--background);
    --ls-active-primary-color: var(--foreground);
    --ls-active-secondary-color: var(--color3);
    --ls-block-properties-background-color: var(--background);
    --ls-page-properties-background-color: var(--background);   
    --ls-block-ref-link-text-color: var(--color15);
    --ls-border-color: var(--color0);
    --ls-secondary-border-color: var(--color1);
    --ls-tertiary-border-color: var(--color2);
    --ls-guideline-color: var(--color3);
    --ls-menu-hover-color: var(--ls-secondary-background-color);
    --ls-primary-text-color: var(--foreground);
    --ls-secondary-text-color: var(--color4);
    --ls-title-text-color: var(--color5);
    --ls-link-text-color: var(--color7);
    --ls-link-text-hover-color: var(--ls-active-secondary-color);
    --ls-link-ref-text-color: var(--ls-link-text-color);
    --ls-link-ref-text-hover-color: var(--ls-link-text-hover-color);
    --ls-tag-text-color: var(--ls-link-text-color);
    --ls-tag-text-hover-color: var(--ls-link-text-hover-color);
    --ls-slide-background-color: var(--ls-primary-background-color);
    --ls-block-bullet-border-color: var(--color4);
    --ls-block-bullet-color: var(--color5);
    --ls-block-highlight-color: var(--color6);
    --ls-selection-background-color: var(--color1);
    --ls-selection-text-color: var(--foreground);
    --ls-page-checkbox-color: var(--color5);
    --ls-page-checkbox-border-color: var(--ls-primary-background-color);
    --ls-page-blockquote-color: var(--ls-primary-text-color);
    --ls-page-blockquote-bg-color: var(--ls-secondary-background-color);
    --ls-page-blockquote-border-color: var(--ls-border-color);
    --ls-page-mark-color: var(--color6);
    --ls-page-mark-bg-color: var(--color7);
    --ls-page-inline-code-color: var(--ls-primary-text-color);
    --ls-page-inline-code-bg-color: var(--background);
    --ls-scrollbar-foreground-color: var(--color7);
    --ls-scrollbar-background-color: var(--background);
    --ls-scrollbar-thumb-hover-color: hsla(0,0%,100%,.2);
    --ls-cloze-text-color: var(--color15);
    --ls-icon-color: var(--ls-link-text-color);
    --ls-search-icon-color: var(--ls-primary-text-color);
    --ls-search-icon-hover-color: var(--ls-secondary-text-color);
    --ls-a-chosen-bg: var(--ls-quaternary-background-color);
    --ls-pie-bg-color: var(--color6);
    --ls-pie-fg-color: var(--color7);
    --ls-highlight-color-gray: var(--color-gray-900);
    --ls-highlight-color-red: var(--color-red-900);
    --ls-highlight-color-yellow: var(--color-yellow-900);
    --ls-highlight-color-green: var(--color-green-900);
    --ls-highlight-color-blue: var(--color-blue-900);
    --ls-highlight-color-purple: var(--color-purple-900);
    --ls-highlight-color-pink: var(--color-pink-900);
    --ls-error-text-color: var(--color-red-100);
    --ls-error-background-color: var(--color-red-900);
    --ls-warning-text-color: var(--color-yellow-100);
    --ls-warning-background-color: var(--color-yellow-900);
    --ls-success-text-color: var(--color-green-100);
    --ls-success-background-color: var(--color-green-900);
    --ls-focus-ring-color: rgba(18,98,119,.5);
    --ls-header-button-background: var(--color7);
    --color-level-1: var(--ls-secondary-background-color);
    --color-level-2: var(--ls-tertiary-background-color);
    --color-level-3: var(--ls-quaternary-background-color);
    --color-level-4: var(--color8);
    --color-level-5: var(--color9);
    --color-level-6: var(--color10);
}
:root {

    --ph-link-color: var(--color15);
    --ph-highlight-scroll-into-color: var(--color12);
    --ph-view-container-width: 42vw;
}


html[data-theme="dark"] .CodeMirror {
  font-family: "FiraCode Nerd Font", "Fire Code", monospace;
  line-height: 1.2;
  background: var(--background);
  box-shadow: none;
  -webkit-box-shadow: none;
  color: var(--foreground);
}

html[data-theme="dark"] .cm-s-default .CodeMirror,
html[data-theme="dark"] .CodeMirror .CodeMirror-gutters {
  background-color: transparent;
  color: var(--foreground) !important;
  border: none;
}

html[data-theme="dark"] .extensions__code-lang {
  background: var(--color1);
}

html[data-theme="dark"] #main-content-container code {
  background: var(--color0);
}
html[data-theme="dark"] #main-content-container .selected code {
  background: var(--background);
}
html[data-theme="dark"] #right-sidebar-container code {
  background: var(--color1);
}
html[data-theme="dark"] #right-sidebar-container .selected code {
  background: var(--background);
}

html[data-theme="dark"] .CodeMirror {
  border: 5px solid var(--color1);
}

html[data-theme="dark"] .CodeMirror .CodeMirror-gutters {
  color: var(--background);
}
html[data-theme="dark"] .CodeMirror .CodeMirror-cursor {
  border-left: solid thin var(--foreground);
}
html[data-theme="dark"] .CodeMirror .CodeMirror-linenumber {
  color: var(--color1);
}
html[data-theme="dark"] .CodeMirror .CodeMirror-activeline .CodeMirror-linenumber {
  /* Color of line number where the cursor is present */
  color: var(--color1);
  filter: brightness(1.4);
}
html[data-theme="dark"] .CodeMirror .CodeMirror-gutter {
  /* Background color for the line numbers displayed on the left */
  background: var(--background);
}
html[data-theme="dark"] .CodeMirror .CodeMirror-hscrollbar {
  margin: 4px;
}
html[data-theme="dark"] .CodeMirror .CodeMirror-selected {
  background: rgba(255, 255, 255, 0.1);
}

html[data-theme="dark"] .CodeMirror .CodeMirror-line {
  box-shadow: none;
}

html[data-theme="dark"] .CodeMirror .CodeMirror-line::selection,
html[data-theme="dark"] .CodeMirror .CodeMirror-line > span::selection,
html[data-theme="dark"]
  .cm-s-default
  .CodeMirror-line
  > span
  > span::selection {
  background: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .CodeMirror .CodeMirror-line::-moz-selection,
html[data-theme="dark"] .CodeMirror .CodeMirror-line > span::-moz-selection,
html[data-theme="dark"]
  .cm-s-default
  .CodeMirror-line
  > span
  > span::-moz-selection {
  background: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .CodeMirror span.cm-comment {
  color: var(--comment);
}
html[data-theme="dark"] .CodeMirror span.cm-string,
html[data-theme="dark"] .CodeMirror span.cm-string-2 {
  color: var(--color6);
}
html[data-theme="dark"] .CodeMirror span.cm-number {
  color: var(--color2);
}
html[data-theme="dark"] .CodeMirror span.cm-variable {
  color: var(--color3);
}
html[data-theme="dark"] .CodeMirror span.cm-variable-2 {
  color: var(--foreground);
}
html[data-theme="dark"] .CodeMirror span.cm-def {
  color: var(--color3);
}
html[data-theme="dark"] .CodeMirror span.cm-operator {
  color: var(--color6);
}
html[data-theme="dark"] .CodeMirror span.cm-keyword {
  color: var(--color6);
}
html[data-theme="dark"] .CodeMirror span.cm-atom {
  color: var(--color2);
}
html[data-theme="dark"] .CodeMirror span.cm-meta {
  color: var(--foreground);
}
html[data-theme="dark"] .CodeMirror span.cm-tag {
  color: var(--color6);
}
html[data-theme="dark"] .CodeMirror span.cm-attribute {
  color: var(--color3);
}
html[data-theme="dark"] .CodeMirror span.cm-qualifier {
  color: var(--color3);
}
html[data-theme="dark"] .CodeMirror span.cm-property {
  color: var(--color4);
}
html[data-theme="dark"] .CodeMirror span.cm-builtin {
  color: var(color3);
}
html[data-theme="dark"] .CodeMirror span.cm-variable-3,
html[data-theme="dark"] .CodeMirror span.cm-type {
  color: var(--color5);
}

html[data-theme="dark"] .CodeMirror .CodeMirror-activeline-background {
  background: rgba(255, 255, 255, 0.1);
}
html[data-theme="dark"] .CodeMirror .CodeMirror-matchingbracket {
  text-decoration: underline;
  color: var(--foreground) !important;
}

html[data-theme="dark"] #right-sidebar pre.CodeMirror-line {
  background: transparent;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment