fix some color scales

Sansui233 · Apr 5, 2024 · d8dfb37 · d8dfb37
1 parent b566670
commit d8dfb37
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -21,11 +21,12 @@ The style is strongly inspired by [logseq-bujo-theme](https://github.com/PiotrSs
 
 ![Desktop](./media/Desktop-2022-05-23.jpg)
 
-Now, it adapts to custom accent color in logseq's settings. You can change the default accent(blue) color without accent style breaking（2024-03-08 in logseq v0.10.7）. 
+It partially adapts to the custom accent color in logseq's settings. You can change the default accent(blue) color without obvious style breaking.
 
 ## Install
 
 Here are two ways of installing theme in Logseq.
+
 ### Install plugin
 
 <img src="./media/plugin.png" alt="Tags" width="450px" />
@@ -34,7 +35,6 @@ Here are two ways of installing theme in Logseq.
 
 - Open Logseq → Themes, choose your theme
 
-> The theme installed via plugin is not compatible with your local `custom.css`. Only plugin theme works.
 ### Install `custom.css`
 
 - General installation
@@ -55,7 +55,7 @@ Here are two ways of installing theme in Logseq.
 
 - Simple but functional colors
 
-- Make tippy window like responsive card instead of filling the screen and obscuring text
+- Make tippy window like responsive card instead of filling the screen and obscuring text. (Legacy bcz Logseq default theme has made it)
 
 - Wrap text in query table results to make it easier to read. Table remains to scroll if too many columns
 
@@ -91,4 +91,4 @@ npm install
 - [Logseq](https://github.com/logseq/logseq)
 - [logseq-bujo-theme](https://github.com/PiotrSss/logseq-bujo-theme) by PiotrSss
 - Dark mode of [Notion](https://notion.so)
-- All feedbacks from email and discord
+- All feedbacks from github issue, email and discord 
diff --git a/custom.css b/custom.css
diff --git a/source/color-scheme.scss b/source/color-scheme.scss
@@ -44,7 +44,7 @@ html[data-theme="light"] {
   --bf-tag-background-color: var(--lx-accent-10);
 
   // query builder
-  --bf-query-clause-border-color: #{$blue_light6};
+  --bf-query-clause-border-color: var(--lx-accent-06);
   --bf-query-clause-background-color: #8fc3ff15;
   --bf-query-clause-background-hover-color: #8fc3ff33;
 
@@ -54,7 +54,8 @@ html[data-theme="light"] {
   --bf-scrollbar-thumb-hover-color: #8a8a8a61;
 
   --bf-a-chosen-bg: #0007100f;
-  --bf-hard-shadow-color: var(--ls-block-bullet-border-color);
+  --bf-hard-shadow-color: #00000015;
+  --bf-transparent-bg-mask: #88888813;
 }
 
 .dark-theme,
@@ -65,7 +66,7 @@ html[data-theme="dark"] {
   --bf-external-link-hover-color: #f29191;
 
   // query builder
-  --bf-query-clause-border-color: var(--ls-secondary-border-color, #{$blue_dark6});
+  --bf-query-clause-border-color: var(--lx-accent-06);
   --bf-query-clause-background-color: #2f82c615;
   --bf-query-clause-background-hover-color: #2f82c633;
 
@@ -76,23 +77,41 @@ html[data-theme="dark"] {
   --ls-scrollbar-background-color: #fff0;
   --bf-scrollbar-thumb-hover-color: #8a8a8a61;
 
-  --bf-a-chosen-bg: var(--ls-table-tr-even-background-color); // --ls-menu-hover-color
+  --bf-a-chosen-bg: #adaeb81c; // --ls-menu-hover-color
   --bf-hard-shadow-color: #1d1d1d;
+  --bf-transparent-bg-mask: #86878920;
 }
 
 
 /* ****************************
-***** Color Specific *******
+***** Accent Color Specific *******
 *******************************/
 
 // Attention that logseq generates the whole color
 // pallete for every single accent color selector, which may lead
 // the default color pallete completely expired in future.
 
 // accent color design system
-html[data-color="cyan"] {
+
+html[data-color="tomato"],
+html[data-color="red"],
+html[data-color="crimson"],
+html[data-color="pink"],
+html[data-color="plum"],
+html[data-color="purple"],
+html[data-color="violet"],
+html[data-color="indigo"],
+html[data-color="blue"],
+html[data-color="cyan"],
+html[data-color="teal"],
+html[data-color="green"],
+html[data-color="grass"],
+html[data-color="orange"]
+{
   body {
-    --ls-page-inline-code-bg-color: rgba(135, 131, 120, 0.15);
+    // --ls-page-inline-code-bg-color: rgba(135, 131, 120, 0.15); Please overwrite relative dom
+    --ls-tag-text-color: white;
+    --ls-tag-text-hover-color: white;
   }
   body.dark-theme {
     --ls-page-checkbox-color: var(--lx-accent-09);
@@ -183,9 +202,13 @@ html[data-color="logseq"] {
     --ls-title-text-color: #303537;
 
     // right sidebar, cmdk, and accent color-level-4……
-    --color-level-1: var(--ls-secondary-background-color);
-    --color-level-2: var(--ls-tertiary-background-color);
-    --color-level-3: var(--ls-quaternary-background-color);
+    // light mode color-level in this selector not work in v0.10.8 bcz another selector did this. really confusing.
+    // --color-level-1: var(--ls-tertiary-background-color);
+    // --color-level-2: var(--ls-quaternary-background-color);
+    // --color-level-3: #dfdfdf;
+    // --color-level-4: #d8d8d8;
+    // --color-level-5: #cfcfcf;
+    // --color-level-6: #c8c8c8;
   }
 
   &[data-theme="dark"] {

diff --git a/source/theme-white.scss b/source/theme-white.scss
@@ -37,10 +37,17 @@ html[data-theme="light"] {
     }
   }
 
+  // card
+  .references-blocks-item,
+  .cp__right-sidebar-inner {
+    div[data-refs-self*='"card"'] > .block-children-container {
+      background: var(--ls-primary-background-color);
+    }
+  }
+
+  // block-property
   .cp__right-sidebar,
   .references-blocks-item {
-
-    --ls-page-properties-background-color: #efefef;
     --bf-codeblock-background-color: #f3f1ed;
 
     .marker-switch {

diff --git a/source/theme.scss b/source/theme.scss
@@ -195,21 +195,20 @@ html ::-webkit-scrollbar-thumb:hover {
     border-radius: unset;
     transition: background-color 0.3s;
     padding: 0 1px;
-    border-left-color: var(var(--ls-border-color,var(--rx-gray-09)), var(--lx-gray-09));
+    border-left-color: var(var(--ls-border-color, var(--rx-gray-09)), var(--lx-gray-09));
 
     &:hover {
       background-color: var(--lx-accent-11);
     }
   }
-  .block-properties {
+  .block-properties,
+  .page-properties {
     margin: 8px 0;
     padding: 10px 20px;
-  }
-  .block-properties, .page-properties {
-    background-color: var(--ls-block-properties-background-color,var(--rx-gray-03));
+    background-color: var(--ls-block-properties-background-color, var(--rx-gray-03));
   }
   .embed.color-level {
-    background-color:var(--color-level-1)
+    background-color: var(--bf-transparent-bg-mask);
   }
   blockquote {
     background-color: unset;
@@ -288,7 +287,7 @@ html ::-webkit-scrollbar-thumb:hover {
   a {
     &.tag {
       padding: 0px 7px;
-      border-radius: 10px;
+      border-radius: 1em;
       margin: 2px 0px;
       color: var(--ls-tag-text-color);
       background-color: var(--bf-tag-background-color);
@@ -367,7 +366,7 @@ html ::-webkit-scrollbar-thumb:hover {
 
   // tables
   .query-table > table,
-  .custom-query-results table{
+  .custom-query-results table {
     // word-break: break-word; is deprecated.
     word-break: normal; // avoid break on file name like xxx.js
     th {
@@ -402,7 +401,7 @@ html ::-webkit-scrollbar-thumb:hover {
       }
     }
   }
-  
+
   .custom-query {
     & > .th {
       margin-bottom: 0.5rem;
@@ -428,7 +427,7 @@ html ::-webkit-scrollbar-thumb:hover {
       }
     }
     a.query-clause {
-      color: var(--lx-accent-09,var(--ls-active-secondary-color));
+      color: var(--lx-accent-09, var(--ls-active-secondary-color));
     }
     a.add-filter {
       opacity: 0.4;
@@ -438,6 +437,10 @@ html ::-webkit-scrollbar-thumb:hover {
       color: var(--bf-tag-background-color);
     }
   }
+  // unset background for right sider and reference block
+  .block-content tr:nth-child(odd) {
+    background: unset;
+  }
 }
 
 .content.doc-mode {
@@ -483,15 +486,8 @@ html ::-webkit-scrollbar-thumb:hover {
   }
 }
 
-.references-blocks-item,
-.cp__right-sidebar-inner {
-  div[data-refs-self*='"card"'] > .block-children-container {
-    background: var(--ls-primary-background-color);
-  }
-}
-
 .bullet-container:not(.typed-list) .bullet {
-  background-color: var(--ls-block-bullet-color,var(--rx-gray-08));
+  background-color: var(--ls-block-bullet-color, var(--rx-gray-08));
 }
 
 /******************************************