How to use a custom theme with Dendron

Overview

This is a quick write-up of how I themed the Dendron Next.js template. At time of writing, this information is up to date, however theming through a custom header may be possible by now, so please check. All the links to source code are to files under a specific commit, so line number may have changed also.

Creating a custom theme

Dendron uses ant.design for styling. On recommendation from Kevin Lin I used this generator to create my own.

The ant design docs have more information about customising here and I've also been using their default.less to figure out what the variables are called.

I created a custom-theme.less based on my default colour scheme and used these variables:

@primary-color: #e0d498;
@body-background: #030c22;
@link-color: #e0d498;
@link-decoration: none;
@heading-color: #e5e7e8;
@layout-header-background: #20293f;
@layout-sider-background: #030c22;
@text-color: #a9b0b3;
@text-color-secondary: #a9b0b3;
@disabled-color: rgba(0, 0, 0, 0.25);
@border-color-base: #a9b0b3;

Then I ran this command to generate the CSS using the dark theme as a base:

npx @emeks/antd-custom-theme-generator --theme dark vault/assets/styles/custom-theme.less vault/assets/styles/custom-theme.css

Now the way Dendron is currently set up, the built-in theme will always take precedence. So we need to suppress that in pages/_app.tsx:

@@ -12,7 +12,8 @@ import { useDendronGATracking } from "../components/DendronGATracking";
 import DendronLayout from "../components/DendronLayout";
 import { combinedStore, useCombinedDispatch } from "../features";
 import { browserEngineSlice } from "../features/engine";
-import "../public/assets-dendron/css/light.css";
+//import "../public/assets-dendron/css/light.css";
+import "../public/assets/styles/custom-theme.css";
 import "../styles/scss/main.scss";
 import { fetchConfig, fetchNotes } from "../utils/fetchers";
 import { useDendronRouter } from "../utils/hooks";
@@ -24,10 +25,11 @@ import { getLogLevel } from "../utils/etc";
 const themes = {
   dark: getAssetUrl(`/assets-dendron/css/dark.css`),
   light: getAssetUrl(`/assets-dendron/css/light.css`),
+  custom: getAssetUrl(`/assets/styles/custom-theme.css`),
 };
 
 function AppContainer(appProps: AppProps) {
-  const defaultTheme = "light";
+  const defaultTheme = "custom";
   return (
     <Provider store={combinedStore}>
       <ThemeSwitcherProvider themeMap={themes} defaultTheme={defaultTheme}>

There are still loads of wrong colours

Unfortunately, there are some colours hardcoded in styles/scss/main.scss. So at the moment we can't help but modify that too. The relevant spots are are 1, 2, 3, 4, 5.

The wrong theme flashes briefly

This is due to styles/scss/base.scss which has some additional styling on top of the theme. There are colours in here which are defined in styles/scss/support/_variables.scss. This is entirely separate to the ant.design LESS variables. You can't use LESS variables in SCSS and vice versa of course (which is why there are so many hardcoded colours in main.scss too) so this is a bit of a problem.

I decided that actually the additions in base.scss aren't that important, so rather than mess around with it too much (e.g. by commenting out all the colours at least) I just commented out the whole @import "./base"; in main.scss.

The underline beneath links won't go away

If you did the above step, they will go away, since those special underlines are defines in base.scss. They're not the normal text-decoration so that gradients can be used. If you want to use base.scss, you can either comment that bit out (a:not([class])) or add the following to main.scss:

a {
  background: none !important;
}

Now there are ugly horizontal rules

I lied earlier -- not everything in base.scss is redundant. One part in there removed this weird ugly white border on hr elements. So I just added that back to main.scss since hr was being overridden there anyway:

hr {
   height: "1px";
+  border: none;
 }

Additional sneaky hardcoded colours

• The bottom border below the header here.
• Primary colour here.

Dark theme code syntax highlighting

For some reason, syntax highlighting never worked for me. I noticed that the class names followed PrismJS' conventions though, so I simply added PrismJS with dark theme to my header.html:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/themes/prism-tomorrow.css">
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/prism.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.25.0/plugins/autoloader/prism-autoloader.min.js"></script>

I used the theme called tomorrow, because I thought it fit the nicest, but of course you can use any (or create your own).

In order to also have inline code like this look consistent, I added a little extra to main.scss using the same background colour as the tomorrow theme:

:not(pre) > code {
  background: #2d2d2d;
  padding: 1px 2px;
}

Other things I tweaked

• I got rid of the logo/title component and fixed the alignment of the search bar which was a few pixels off. On mobile, this breaks the height of the burger menu button, so I also made that 100% height.
• I extended the right border on the navigation panel all the way to the bottom of the page, and made it have the same colour as the note background.
• I changed the formatting of the "last modified" to be more human-readable, by changing DATE_SHORT to DATE_MED here. Dendron uses Luxon for this and you can find more documentation here. I also didn't like how this was wrapping, so I made it stay on one line.
• I'm not a big emoji guy, so I changed the footer to instead say "with Dendron".
• On mobile, the last modified text and the Dendron text get stuck together, so I added a bit of margin there.
• The placeholder text on the search bar gave "? Onboarding" as a full text search example. I changed this to "? network" which is a bit more relevant to me.
• I had linting errors (before all this modification) so I changed the config to allow production builds to complete even with ESLint errors.

Additional tweaks as of 2022-01-22

• It seems to me like full-text search makes more sense to be a default (or only) option. So I disabled lookup-search and made full-text the only option, and changed the placeholder text to just "Search".
• I accidentally ran dendron publish init which nuked my ./next directory. I raised this issue as a result, and backed up all my changes on a fork of the repo. Fortunately I had this write-up to refer back to!

Future TODOs

• They styles on the search bar and its dropdown are a bit odd, will probably tweak.
• There are some mobile quirks (compare this page to e.g. How to use spell check with Dendron on mobile)