search

Abourass / TriliumThemes

A few custom themes for Trilium Notebooks
GNU General Public License v3.0
24 stars 8 forks source link

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

Open reefland opened 3 years ago

reefland commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@Abourass - any luck? thanks.

Abourass commented 3 years ago

@reefland Can you please test the following:

  1. Inside Trilium create a new note. I went for creating a folder name themes, then adding the new note inside: image

  2. Give the note the name Purple Rain and change its type to CSS image

  3. Give it a label of #appTheme image

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



5. Click the hamburger menu in the upper left of the screen and go into options
6. 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:
![image](https://user-images.githubusercontent.com/39917231/113594553-18c4aa00-95f5-11eb-8b05-d31a0aaaa996.png)

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

Much better... 2 comments on that: 1) The label "#appTheme" in your instructions above needed to be "#appTheme=purple-rain" would not render without it 2) 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 commented 3 years ago

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.

purplerain_20210405_170117

Another example:

purplerain_20210405_170312

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

purplerain_20210405_170602

Hopefully these helped.

Abourass commented 3 years ago

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 commented 3 years ago

New changes look fantastic, well done. purplerain_20210406_125256

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 commented 3 years ago

Suggested link color from above looks decent to me: purplerain_20210406_132020

Abourass commented 3 years ago

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 commented 3 years ago

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

reefland commented 3 years ago

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: purplerain_20210408_125122

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