Purple Rain - Hover over internal links broken theme background on pop-up. #1

reefland · 2021-03-30T14:22:50Z

Trilium Version 0.46.6.

I use theme "PurpleRain". When I hover over an Internal Trilium Link, the popup of the page rendered has a white background which is fairly unreadable when using a dark them like PurpleRain. I can't get the pop-up to respect the background color of the selected theme.

I have two instances using Trilium Desktop and one instance using Trilium Server. The behavior happens on all 3 instances. I even tried Firefox vs Chromium against the Trilium Server page same result in both.

Abourass · 2021-03-30T18:13:00Z

Your right! Looks like at some point the classes changed and some of my styling stopped working. I will fix this tonight once I'm off work then post the fix.

reefland · 2021-04-05T13:54:58Z

@Abourass - any luck? thanks.

Abourass · 2021-04-05T15:56:12Z

@reefland
Can you please test the following:

Inside Trilium create a new note. I went for creating a folder name themes, then adding the new note inside:
Give the note the name Purple Rain and change its type to CSS
Give it a label of #appTheme
Copy and paste this into it

body.theme-purple-rain {
 --main-background-color: #141019;
 --main-text-color: rgba(255, 255, 255, 1);
 --accented-background-color: #c49df1;
 --more-accented-background-color: rgb(31, 29, 33);
 --header-background-color: rgb(53, 45, 61);
 --button-background-color: #222230;
 --button-border-color: #444;
 --button-text-color: rgb(0, 0, 0);
 --button-border-radius: 4px;
 --muted-text-color: #fff;
 --input-text-color: white;
 --input-background-color: rgb(40, 31, 49);
 --modal-background-color: #412f56;
 --hover-item-text-color: rgb(254, 244, 255);
 --hover-item-background-color: rgba(81, 57, 84, 0.288);
 --tooltip-background-color: rgba(81, 57, 84, 0.288);
 --active-item-text-color: #dde2dd;
 --active-item-background-color: rgba(72, 13, 54, 0.58);
 --menu-text-color: white;
 --menu-background-color: #222;
}
/* CSS */
@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/fira_code.css);

.theme-purple-rain #header {
 background-color: #434167!important;
 box-shadow: inset 0 -1px 1px 0 hsla(0, 0%, 92%, 0.2);
}
.theme-purple-rain .ui-fancytree {
 overflow-y:overlay!important; /*This solves the shrinking that happens from the scroll bar in the tree */
 overflow-x:hidden; /* Hide the bottom scroll baR */
}

.theme-purple-rain .btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger) {
 border-color: transparent !important;
 background-color: #6767672e !important;
 color: var(--main-text-color);
}

.theme-purple-rain .title-bar-buttons {
   margin-top: 1.8px !important;
   margin-right: 4px;
}

.theme-purple-rain .title-bar-buttons button {
   height: 1.82rem;
}

.theme-purple-rain .standard-top-widget {
   padding-top: 0px!important;
   margin-top: -4px;
}

.theme-purple-rain .note-tab-row {
  margin-top: 0px!important;
  height: 32px!important;
}

.theme-purple-rain .search-string {
  border-radius: 5px !important;
}

.theme-purple-rain input#note-title:focus {
 outline-color: transparent !important;
 box-shadow: inset 0 2px 4px 0 hsla(0, 0%, 29%, 0.56);
}

.theme-purple-rain input#note-title:focus-within {
 outline-color: transparent !important;
 box-shadow: inset 0 2px 4px 0 hsla(0, 0%, 29%, 0.56);
}

.theme-purple-rain #global-buttons {
 border-radius: 4px !important;
 border: 0 !important;
 box-shadow: 0px 2px 5px -1px hsla(0, 1%, 16%, 0.2) !important;
 background-color: #25242d !important;
 color: rgb(244, 246, 255) !important;
 border-top: 3px solid #e7bbec !important;
}

.theme-purple-rain .ui-fancytree {
 background-color: #2a30386b!important;
 border: 0 !important;
 border-radius: 4px !important;
 box-shadow: inset 0px 1px 3px 0 hsla(313, 15%, 26%, 0.33);
}

.theme-purple-rain ul.fancytree-container {
 margin-left: 10px;
 margin-right: 20px;
}

.theme-purple-rain ul.fancytree-container li { color: #bd16ff !important; }
.theme-purple-rain ul.fancytree-container li:nth-child(2n) { color: #ab69bf !important; }
.theme-purple-rain ul.fancytree-container li:nth-child(3n) { color: #c663de!important; }
.theme-purple-rain ul.fancytree-container li:nth-child(4n) { color: #df7fe0!important; }
.theme-purple-rain ul.fancytree-container li:nth-child(5n) { color: #d09fce!important; }
.theme-purple-rain ul.fancytree-container li:nth-child(6n) { color: #d4b5cf !important; }
.theme-purple-rain ul.fancytree-container li:nth-child(7n) { color: #e6cddc !important; }

.theme-purple-rain .dropdown.hide-toggle { padding-left: 10px; }
.theme-purple-rain span.fancytree-title { color: rgb(244, 246, 255) !important; }
.theme-purple-rain span.fancytree-active:not(.fancytree-focused) .fancytree-title { background-color: #42424278 !important; }

.theme-purple-rain p {
 font-size: 17.3px !important;
 color: #e8e5e5 !important;
}

.theme-purple-rain #title-container {
 background-color: #25242d;
 margin-right: 0.7rem;
 margin-top: 0rem;
 border-radius: 0.4rem;
 padding-top: 3px;
 padding-bottom: 4px;
 border-top: 3px solid #9886b5bd!important
}

.theme-purple-rain #note-title {
 background-color: #9c94bb3b !important;
 color: rgb(244, 246, 255) !important;
 margin-left: 1rem !important;
 margin-right: 1rem !important;
 border-radius: 0.4rem !important;
 padding-left: 0.50rem !important;
}

.theme-purple-rain #note-detail-component-wrapper {
 background-color: #8786a03d !important;
 color: white !important;
}

.theme-purple-rain .CodeMirror-lines {
 font-family: 'Fira Code', monospace;
 font-size: 0.9rem;
 color: #ced246eb;
}

.theme-purple-rain .cm-s-default .cm-qualifier { color: #07f2ff; }
.theme-purple-rain .cm-s-default .cm-number { color: #23d08b; }
.theme-purple-rain .cm-atom { color: #c8c1ff; }

.theme-purple-rain span.cm-keyword { color: #ffffffed !important; } 
.theme-purple-rain span.cm-builtin { color: #ff8de6 !important; }
.theme-purple-rain span.cm-tag { color: #ff7a9e !important; }
.theme-purple-rain span.cm-variable-2 { color: #ffdcfae6 !important; }
.theme-purple-rain span.cm-variable-3 { color: #49e040 !important; }

.theme-purple-rain #note-detail-text p { color: #fffdfdf0 !important; }
.theme-purple-rain #note-detail-wrapper {
 padding-left: 0px !important;
 padding-top: 0px !important;
 background-color: #000000b5 !important;
 color: whitesmoke !important;
}

.theme-purple-rain figure { background-color: #4a4a4ad9; }
.theme-purple-rain figure:focus {
 outline-color: transparent !important;
 box-shadow: inset 0 2px 4px 0 hsla(0, 0%, 41%, 0.56);
}

.theme-purple-rain div#note-detail-text p {
 margin-bottom: 5px;
 margin-top: 5px;
 text-indent: 0.9rem;
}
.theme-purple-rain .child-overview { /* Makes them pop on the dark background */
 font-size: 1.1rem;
 background: #c8d4c91f;
 box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
}
.theme-purple-rain #children-overview { /* Fixes the child note previews being to far to the left */
 padding-left: 1rem;
}
.theme-purple-rain .fancytree-title{ font-weight:400!important; }

.theme-purple-rain .ck-content code {
   background-color: #785d8e3d;
   padding: 0.4rem 0.1em;
   border-radius: 0px;
   margin-top: -0.3rem;
   font-size: 95%;
   line-height: 110%;
   white-space: pre;
   white-space: pre-wrap;
   display: -webkit-box;
   font-family: 'Fira Code', monospace;
}

.theme-purple-rain .ck-content .table table th { color: black; }

/* Make the code editor readable */
.theme-purple-rain .cm-s-default .cm-builtin { color: #9368f7 !important; }
.theme-purple-rain .cm-s-default .cm-qualifier { color: #4d9c28 !important; }
.theme-purple-rain .cm-s-default .cm-atom { color: #d23a8c !important; }
.theme-purple-rain .cm-s-default .cm-def, .cm-s-default .cm-variable-2 { color: var(--main-text-color) !important}
.theme-purple-rain .cm-s-default .cm-string { color: #ad5858 !important}
.theme-purple-rain .cm-s-default .cm-keyword { color: #e17eef !important}

/* Make the Code Examples in our Notes more readable */
.theme-purple-rain .ck-content pre {  background: #2726264d !important; }

Click the hamburger menu in the upper left of the screen and go into options
Choose the purple rain theme

Should be working. If there's still any issue make sure you have no CSS in the CSS override section:

If that works for you let me know and I will release a new version of this repo with the changes made

reefland · 2021-04-05T21:06:53Z

Much better... 2 comments on that:

The label "#appTheme" in your instructions above needed to be "#appTheme=purple-rain" would not render without it
The transparency of the purple background popup needs to be reduced, the overlapping white text is hard to read. I'll gather some screen shots

reefland · 2021-04-05T21:16:36Z

The light purple below showing nested pages is very hard to read with light text and pop-up on top is hard to read as well.

Another example:

Here on a standard note page, the pop-up transparency is to much, unreadable.

Hopefully these helped.

Abourass · 2021-04-06T12:56:08Z

How's this?

I also fixed the code editor's code not correctly overriding the font to Fira Code to support ligatures.

/* CSS */
@import url(https://cdn.jsdelivr.net/gh/tonsky/FiraCode@1.206/distr/fira_code.css);

body.theme-purple-rain {
  --main-background-color: #141019;
  --main-text-color: rgba(255, 255, 255, 1);
  --accented-background-color: rgb(40, 31, 49);
  --more-accented-background-color: rgb(31, 29, 33);
  --header-background-color: rgb(53, 45, 61);
  --button-background-color: #222230;
  --button-border-color: #444;
  --button-text-color: rgb(0, 0, 0);
  --button-border-radius: 4px;
  --muted-text-color: #fff;
  --input-text-color: white;
  --input-background-color: rgb(40, 31, 49);
  --modal-background-color: #412f56;
  --hover-item-text-color: rgb(254, 244, 255);
  --hover-item-background-color: rgba(81, 57, 84, 0.288);
  --tooltip-background-color: rgba(81, 57, 84, 0.988);
  --active-item-text-color: #dde2dd;
  --active-item-background-color: rgba(72, 13, 54, 0.58);
  --menu-text-color: white;
  --menu-background-color: #222;
}

.theme-purple-rain #header {
  background-color: #434167!important;
  box-shadow: inset 0 -1px 1px 0 hsla(0, 0%, 92%, 0.2);
}
.theme-purple-rain .ui-fancytree {
  overflow-y:overlay!important; /*This solves the shrinking that happens from the scroll bar in the tree */
  overflow-x:hidden; /* Hide the bottom scroll bar */
}

.theme-purple-rain .btn:not(.btn-primary):not(.btn-secondary):not(.btn-danger) {
  border-color: transparent !important;
  background-color: #6767672e !important;
  color: var(--main-text-color);
}

.theme-purple-rain .title-bar-buttons {
    margin-top: 1.8px !important;
    margin-right: 4px;
}

.theme-purple-rain .title-bar-buttons button { height: 1.82rem; }

.theme-purple-rain .standard-top-widget {
    padding-top: 0px!important;
    margin-top: -4px;
}

.theme-purple-rain .note-tab-row {
   margin-top: 0px!important;
   height: 32px!important;
}

.theme-purple-rain .search-string { border-radius: 5px !important; }

.theme-purple-rain input#note-title:focus {
  outline-color: transparent !important;
  box-shadow: inset 0 2px 4px 0 hsla(0, 0%, 29%, 0.56);
}

.theme-purple-rain input#note-title:focus-within {
  outline-color: transparent !important;
  box-shadow: inset 0 2px 4px 0 hsla(0, 0%, 29%, 0.56);
}

.theme-purple-rain #global-buttons {
  border-radius: 4px !important;
  border: 0 !important;
  box-shadow: 0px 2px 5px -1px hsla(0, 1%, 16%, 0.2) !important;
  background-color: #25242d !important;
  color: rgb(244, 246, 255) !important;
  border-top: 3px solid #e7bbec !important;
}

.theme-purple-rain .ui-fancytree {
  background-color: #2a30386b!important;
  border: 0 !important;
  border-radius: 4px !important;
  box-shadow: inset 0px 1px 3px 0 hsla(313, 15%, 26%, 0.33);
}

.theme-purple-rain ul.fancytree-container {
  margin-left: 10px;
  margin-right: 20px;
}

.theme-purple-rain ul.fancytree-container li { color: #bd16ff !important; }
.theme-purple-rain ul.fancytree-container li:nth-child(2n) { color: #ab69bf !important; }
.theme-purple-rain ul.fancytree-container li:nth-child(3n) { color: #c663de!important; }
.theme-purple-rain ul.fancytree-container li:nth-child(4n) { color: #df7fe0!important; }
.theme-purple-rain ul.fancytree-container li:nth-child(5n) { color: #d09fce!important; }
.theme-purple-rain ul.fancytree-container li:nth-child(6n) { color: #d4b5cf !important; }
.theme-purple-rain ul.fancytree-container li:nth-child(7n) { color: #e6cddc !important; }

.theme-purple-rain .dropdown.hide-toggle { padding-left: 10px; }
.theme-purple-rain span.fancytree-title { color: rgb(244, 246, 255) !important; }
.theme-purple-rain span.fancytree-active:not(.fancytree-focused) .fancytree-title { background-color: #42424278 !important; }

.theme-purple-rain p {
  font-size: 17.3px !important;
  color: #e8e5e5 !important;
}

.theme-purple-rain #title-container {
  background-color: #25242d;
  margin-right: 0.7rem;
  margin-top: 0rem;
  border-radius: 0.4rem;
  padding-top: 3px;
  padding-bottom: 4px;
  border-top: 3px solid #9886b5bd!important
}

.theme-purple-rain #note-title {
  background-color: #9c94bb3b !important;
  color: rgb(244, 246, 255) !important;
  margin-left: 1rem !important;
  margin-right: 1rem !important;
  border-radius: 0.4rem !important;
  padding-left: 0.50rem !important;
}

.theme-purple-rain #note-detail-component-wrapper {
  background-color: #8786a03d !important;
  color: white !important;
}

.theme-purple-rain .CodeMirror-lines { color: #ced246eb; }

.theme-purple-rain .CodeMirror * {
    font-family: 'Fira Code', monospace !important;
    font-size: 0.9rem !important;
}

.theme-purple-rain .cm-s-default .cm-qualifier { color: #07f2ff; }
.theme-purple-rain .cm-s-default .cm-number { color: #23d08b; }
.theme-purple-rain .cm-atom { color: #c8c1ff; }

.theme-purple-rain span.cm-keyword { color: #ffffffed !important; } 
.theme-purple-rain span.cm-builtin { color: #ff8de6 !important; }
.theme-purple-rain span.cm-tag { color: #ff7a9e !important; }
.theme-purple-rain span.cm-variable-2 { color: #ffdcfae6 !important; }
.theme-purple-rain span.cm-variable-3 { color: #49e040 !important; }

.theme-purple-rain #note-detail-text p { color: #fffdfdf0 !important; }
.theme-purple-rain #note-detail-wrapper {
  padding-left: 0px !important;
  padding-top: 0px !important;
  background-color: #000000b5 !important;
  color: whitesmoke !important;
}

.theme-purple-rain figure { background-color: #4a4a4ad9; }
.theme-purple-rain figure:focus {
  outline-color: transparent !important;
  box-shadow: inset 0 2px 4px 0 hsla(0, 0%, 41%, 0.56);
}

.theme-purple-rain div#note-detail-text p {
  margin-bottom: 5px;
  margin-top: 5px;
  text-indent: 0.9rem;
}

.theme-purple-rain .child-overview { /* Makes them pop on the dark background */
  font-size: 1.1rem;
  background: #c8d4c91f;
  box-shadow: 0 2px 6px 0 hsla(0, 0%, 0%, 0.2);
}

/* Fixes the child note previews being to far to the left */
.theme-purple-rain #children-overview { padding-left: 1rem; }

.theme-purple-rain .fancytree-title{ font-weight: 400!important; }

.theme-purple-rain .ck-content code {
    background-color: #785d8e3d;
    padding: 0.4rem 0.1em;
    border-radius: 0px;
    margin-top: -0.3rem;
    font-size: 95%;
    line-height: 110%;
    white-space: pre;
    white-space: pre-wrap;
    display: -webkit-box;
    font-family: 'Fira Code', monospace;
}

.theme-purple-rain .ck-content .table table th { color: black; }

/* Make the code editor readable */
.theme-purple-rain .cm-s-default .cm-builtin { color: #9368f7 !important; }
.theme-purple-rain .cm-s-default .cm-qualifier { color: #4d9c28 !important; }
.theme-purple-rain .cm-s-default .cm-atom { color: #d23a8c !important; }
.theme-purple-rain .cm-s-default .cm-def, .cm-s-default .cm-variable-2 { color: var(--main-text-color) !important}
.theme-purple-rain .cm-s-default .cm-string { color: #ad5858 !important}
.theme-purple-rain .cm-s-default .cm-keyword { color: #e17eef !important}

/* Make the Code Examples in our Notes more readable */
.theme-purple-rain .ck-content pre {  background: #2726264d !important; }

reefland · 2021-04-06T17:12:20Z

New changes look fantastic, well done.

I noticed the cursor in code editor is black, hard to find. If you have the ability to theme that to something lighter in the theme colors it would be handy.

The internal links are functional and useful, just the "blue" doesn't play well with theme colors. If you have option to change that. Perhaps a color like #bd16ff would work better than the blue?

Are you able to do theme work on tables?

reefland · 2021-04-06T17:21:43Z

Suggested link color from above looks decent to me:

Abourass · 2021-04-06T18:02:45Z

I noticed the cursor in code editor is black, hard to find.

You are correct. This one was difficult to figure out at first. Turns out caret icon in code mirror is made up of a border. So, to fix add this to your style sheet:

.theme-purple-rain .CodeMirror-cursor { border-color: #bdbcbc; }

Perhaps a color like #bd16ff would work better than the blue?

Yea, definitely.

.theme-purple-rain a {color: #bd16ff}

Are you able to do theme work on tables?

Sure. What do you have in mind?

reefland · 2021-04-07T23:52:09Z

The 2 theme tweaks you provided worked perfectly. I'll post back with an idea on theme colors for table.

reefland · 2021-04-08T16:58:10Z

I made these 2 changes:

.theme-purple-rain .ck-content .table table th { color: #e5ccdb; }
.theme-purple-rain .ck-content .table table tr { background: #1d1d26; }

Resulting in table theme:

I think it looks decent. The header row text could be tweaked if you have a better eye for it.

Abourass self-assigned this Apr 5, 2021

Abourass added the bug Something isn't working label Apr 5, 2021

Abourass added a commit that referenced this issue Apr 6, 2021

🐛 Fixing numerous issues per issue #1

8bfac47

yannduran mentioned this issue May 9, 2023

Purple Rain's background is always light, not dark #3

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Purple Rain - Hover over internal links broken theme background on pop-up. #1

Purple Rain - Hover over internal links broken theme background on pop-up. #1

reefland commented Mar 30, 2021

Abourass commented Mar 30, 2021

reefland commented Apr 5, 2021

Abourass commented Apr 5, 2021

reefland commented Apr 5, 2021

reefland commented Apr 5, 2021 •

edited

Loading

Abourass commented Apr 6, 2021

reefland commented Apr 6, 2021

reefland commented Apr 6, 2021

Abourass commented Apr 6, 2021

reefland commented Apr 7, 2021

reefland commented Apr 8, 2021

Purple Rain - Hover over internal links broken theme background on pop-up. #1

Purple Rain - Hover over internal links broken theme background on pop-up. #1

Comments

reefland commented Mar 30, 2021

Abourass commented Mar 30, 2021

reefland commented Apr 5, 2021

Abourass commented Apr 5, 2021

reefland commented Apr 5, 2021

reefland commented Apr 5, 2021 • edited Loading

Abourass commented Apr 6, 2021

reefland commented Apr 6, 2021

reefland commented Apr 6, 2021

Abourass commented Apr 6, 2021

reefland commented Apr 7, 2021

reefland commented Apr 8, 2021

reefland commented Apr 5, 2021 •

edited

Loading