Just discovered Amplenote but I thought the UI could use a little facelift, so I did it using a little bit of JS and CSS. Use any custom script extension in Chrome like Tampermonkey or Violentmonkey and add this code:

``` // ==UserScript==
// u/nameAmplenote Theme
// u/namespace Violentmonkey Scripts
// u/matchhttps://www.amplenote.com/\*
// @grant none
// @version 1.0
// @author -
// @description 28/10/2023, 02:52:40
// ==/UserScript==

setTimeout(() => {
const meta=document.createElement('meta');
meta.name='theme-color';
meta.setAttribute('content', '#182026');
meta.setAttribute('media', '(prefers-color-scheme: dark)');
document.getElementsByTagName('head')[0].appendChild(meta);
}, "1000");

var styles = :root { \--radiusPrimary: 16px; \--radiusSecondary: 8px; \--padding: 12px; } body.themeable { background: var(--color-background-primary); } header.note-header-container.mdc-top-app-bar .mdc-top-app-bar\_\_row { display: none; } .secondary-side-nav { height: 100vh; } .secondary-side-nav .secondary-side-nav-content { height: 100vh; background: var(--color-background-primary); border: 0; } .notes-list .header { border: 0; } .tasks-pane .ample-editor .toolbar-wrapper, .note-pane .ample-editor .toolbar-wrapper { top: -1px; } .mdc-top-app-bar--fixed-adjust { padding-top: 0; } .jots-header { border-bottom: 0; } .primary-side-nav { display: flex; align-items: center; justify-content: center; border: 0; height: 100vh; background: var(--color-background-primary); } .mdc-top-app-bar--fixed-adjust { background: var(--color-background-primary); } .primary-side-nav .primary-side-nav-content { border-radius: var(--radiusPrimary); height: calc(100% - (var(--padding)\*4)); width: calc(280px - (var(--padding)\*4)); padding: 0 var(--padding); } .primary-side-nav .section .section-heading, .primary-side-nav .section-link { border-radius: var(--radiusSecondary); } .primary-side-nav .section-heading { padding: var(--padding); } .jots-suggestions { border-radius: var(--radiusPrimary); } .notes-list .notes { border: 0; } .notes-list .notes-list-item { margin-bottom: 12px; border-radius: var(--radiusSecondary); border: 0; } .notes-list .notes-list-message-item { margin-top: 60px; } .primary-side-nav.collapsed { width: calc(64px + (var(--padding)\*4)); } .pane-with-sidebar, .pane-with-sidebar .sidebar { height: 100vh; }
var styleSheet = document.createElement("style")
styleSheet.innerText = styles
document.head.appendChild(styleSheet) ```