Dracula preset

[szjani]

Idea I have created a Dracula preset. I'm wondering if you are interested in adding it as a built-in preset. Some changes were also added to the custom.css file.

#today-queries > div.lazy-visibility { border-radius: 4px; background: #323341; counter-reset: list-number;}
#today-queries > div.lazy-visibility div.fade-enter > div.ls-block { background: #44475a; margin: 10px; border-radius: 4px; padding-left: 30px; }
#today-queries > div.lazy-visibility div.fade-enter > div.ls-block:before {counter-increment: list-number; content: counter(list-number); margin-left: 10px; color: #6272a4; position: absolute; left: 0px;}
div.admonitionblock.important {border: 1px solid #bf525b; border-radius: 4px; padding: 10px; background: #332936; margin: 4px; }
div.admonitionblock.important .admonition-icon { border-right-color: #bf525b; }
div.admonitionblock.caution {border: 1px solid #df951d; border-radius: 4px; padding: 10px; background: #363029; margin: 4px; }
div.admonitionblock.caution .admonition-icon { border-right-color: #df951d; }
div.admonitionblock.warning {border: 1px solid #df951d; border-radius: 4px; padding: 10px; background: #363029; margin: 4px; }
div.admonitionblock.warning .admonition-icon { border-right-color: #df951d; }
div.admonitionblock.tip {border: 1px solid #4e82cd; border-radius: 4px; padding: 10px; background: #292f36; margin: 4px; }
div.admonitionblock.tip .admonition-icon { border-right-color: #4e82cd; }
div.admonitionblock.note {border: 1px solid #4e82cd; border-radius: 4px; padding: 10px; background: #292f36; margin: 4px; }
div.admonitionblock.note .admonition-icon { border-right-color: #4e82cd; }
div.admonitionblock.pinned {border: 1px solid #bf525b; border-radius: 4px; padding: 10px; background: #363029; margin: 4px; }
div.admonitionblock.pinned .admonition-icon { border-right-color: #bf525b; }
.ls-wide-mode .cp__sidebar-main-content>div {margin-left: 20px; margin-right: 20px; margin-top: 20px;}

Screenshots

[yoyurec]

nice... need to think... i've started to port Dracula twice ))

do you have a light version too? )

[szjani]

I'm not aware of a light version of Dracula :) Found this though, it could be the one: https://marketplace.visualstudio.com/items?itemName=ashrafhadden.dracula-dot-min

[szjani]

I have created a light version, also did some changes on the dark one:

custom.css:

#today-queries > div.lazy-visibility { border-radius: 4px; counter-reset: list-number;}
#today-queries div.custom-query {background: var(--ls-block-properties-background-color);}
#today-queries > div.lazy-visibility div.fade-enter > div.ls-block { background: var(--awSt-ui-body-bg-user); margin: 10px; border-radius: 4px; padding-left: 30px; }
#today-queries > div.lazy-visibility div.fade-enter > div.ls-block:before {counter-increment: list-number; content: counter(list-number); margin-left: 10px; color: #6272a4; position: absolute; left: 0px;}
#today-queries>.lazy-visibility+.lazy-visibility {margin-left: 0px;}
div.admonitionblock.important {border: 1px solid #bf525b; border-radius: 4px; padding: 10px;  margin: 4px; }
div.admonitionblock.important .admonition-icon { border-right-color: #bf525b; }
div.admonitionblock.caution {border: 1px solid #df951d; border-radius: 4px; padding: 10px; margin: 4px; }
div.admonitionblock.caution .admonition-icon { border-right-color: #df951d; }
div.admonitionblock.warning {border: 1px solid #df951d; border-radius: 4px; padding: 10px; margin: 4px; }
div.admonitionblock.warning .admonition-icon { border-right-color: #df951d; }
div.admonitionblock.tip {border: 1px solid #4e82cd; border-radius: 4px; padding: 10px; margin: 4px; }
div.admonitionblock.tip .admonition-icon { border-right-color: #4e82cd; }
div.admonitionblock.note {border: 1px solid #4e82cd; border-radius: 4px; padding: 10px; margin: 4px; }
div.admonitionblock.note .admonition-icon { border-right-color: #4e82cd; }
div.admonitionblock.pinned {border: 1px solid #bf525b; border-radius: 4px; padding: 10px; margin: 4px; }
div.admonitionblock.pinned .admonition-icon { border-right-color: #bf525b; }

[yoyurec]

wow! niceeee! 🤗

BTW, will it work without custom.css? i'm trying to not add any "this one particular color preset" CSS... for ex Bear was tottaly different, but i got rid of it's "additional recoloring"

[yoyurec]

official position about light mode 🤣🤣🤣🤣

https://draculatheme.com/contribute

[yoyurec]

1) can open settings.json file & post here as code content of presetCustom\2\3 (depending on your used "slot") - there will be settings for both modes... 2) remind me of your Discord Logseq name, so i will mention you in announce 3) is it only mine settings.json looks broken, too big (few mb 🤯) and with deep levels presetLogseqDefault{presetLogseqDefault{presetLogseqDefault}} or are other users too? 🤔

[szjani]

My custom.css only enhances the admonitions and the custom queries. It looks okay without that. But please double check :) I created the light theme based on this: https://github.com/ashmichael/Dracula.min/blob/master/colors-used-table.md

[szjani]

My settings.json contains 297 lines of code, I have no such issue. My name on Discord is "szjani" The preset from settings.json:

    "fontContentName": "OS System default",
    "fontContentSize": "16px",
    "fontUiSize": "13px",
    "colorLightTitleText": "#008504",
    "colorLightContentText": "#282A36",
    "colorLightContentTextBold": "#282A36",
    "colorLightContentTextItalic": "#282A36",
    "colorLightLink": "#855FBF",
    "colorLightLinkExt": "#007E90",
    "colorLightTag": "#A0651B",
    "colorLightUiPanelsBg": "#F7F7F7",
    "colorLightUiBodyBg": "#E1E1DB",
    "colorLightContentBg": "#F8F8F2",
    "colorLightContentPropsBg": "#EAEAE5",
    "colorLightContentAltBg": "#EAEAE5",
    "colorLightH1": "#c13f8e",
    "colorLightH2": "#c13f8e",
    "colorLightH3": "#c13f8e",
    "colorLightH4": "#c13f8e",
    "colorLightH5": "#c13f8e",
    "colorLightH6": "#c13f8e",
    "colorLightMarkBg": "#6C7908",
    "colorLightMarkText": "#F8F8F2",
    "colorLightQuoteBg": "#7E8EC2",
    "colorLightQuoteText": "#f8f8f2",
    "colorDarkTitleText": "#50fa7b",
    "colorDarkContentText": "#F8F8F2",
    "colorDarkContentTextBold": "#f8f8f2",
    "colorDarkContentTextItalic": "#f8f8f2",
    "colorDarkLink": "#BD93F9",
    "colorDarkLinkExt": "#8BE9FD",
    "colorDarkTag": "#FFB86C",
    "colorDarkH1": "#FF79C6",
    "colorDarkH2": "#FF79C6",
    "colorDarkH3": "#ff79c6",
    "colorDarkH4": "#ff79c6",
    "colorDarkH5": "#ff79c6",
    "colorDarkH6": "#ff79c6",
    "colorDarkUiPanelsBg": "#323341",
    "colorDarkUiBodyBg": "#44475A",
    "colorDarkContentBg": "#282A36",
    "colorDarkContentPropsBg": "#323341",
    "colorDarkContentAltBg": "#313341",
    "colorDarkMarkBg": "#f1fa8c",
    "colorDarkMarkText": "#44475A",
    "colorDarkQuoteBg": "#323341",
    "colorDarkQuoteText": "#F8F8F2",
    "backgroundURL": "lsp://logseq.io/logseq-awesome-styler/dist/img/bg.webp",
    "backgroundPadding": "0px 0px 0px 0px",
    "backgroundShadow": true,
    "bannersAsBackground": false,
    "bannersIconGlow": false,
    "contentMaxWidth": "870px",
    "contentWideMaxWidth": "100%",
    "colorLightInlineCodeText": "#282a36",
    "colorLightInlineCodeBg": "#F8F8F2",
    "colorDarkInlineCodeText": "#F8F8F2",
    "colorDarkInlineCodeBg": "#282a36",
    "backgroundURLLight": "",
    "backgroundURLDark": "",
    "presetMia_quattro": {
      "fontContentName": "Inter (Logseq default)"
    },
    "colorDarkUiLSidebarBg": "#282A36",
    "colorDarkUiRSidebarBg": "#282A36",
    "colorDarkUiLSidebarBgAccent": "#BD93F9",
    "fontUiName": "OS System default",
    "colorLightTagText": "#F7F7F1",
    "colorLightUiRSidebarBg": "#F8F8F2",
    "colorLightUiLSidebarBg": "#F8F8F2",
    "colorLightUiLSidebarBgAccent": "#855FBF",
    "colorDarkTagText": "#282A36",
    "colorLightUiLSidebarText": "#282A36"

[yoyurec]

oh, this one. it's shoudn't be such and there

[yoyurec]

colorDarkUiLSidebarText missed in config, but i see took it from screen ))

[yoyurec]

updated a little... few dimmed colors

[yoyurec]

tnx for help 🤗 shipped! https://github.com/yoyurec/logseq-awesome-styler/releases/tag/v3.7.0

[szjani]

With these changes it is not Dracula anymore

[yoyurec]

let's discuss...

i've changed:

• title - from green to magenta as other headers,
• text- little darker, cose too contrast
• ext links little darker
• disabled bg around content, cose nobody likes it
• set sidebar bg gray (from darcula pelette)

which one? sidebar?

[yoyurec]

sidebars https://draculatheme.com/roam-research

[szjani]

title: I can distinguish days faster on the Journals screen if the title is green. But this is subjective. text: The Dracula theme defines it to be #f8f8f2. ext links: The Dracula theme lists light blue as #8be9fd disabled bg around content: I have just updated the plugins, now I even lost the ability to have separate background. Why? I love that. sidebar: The Dracula theme does not list that color, but it's fine.

Overall, I tried to use the Dracula colors as much as possible, see text and ext links. Using a different color from the Dracula palette in certain cases (like links, title) might even improve the theme, but using just a slightly different color makes your theme Dracula-ish.