Skip to content

Latest commit

 

History

History
79 lines (55 loc) · 2.98 KB

README.md

File metadata and controls

79 lines (55 loc) · 2.98 KB
Raw

this is out of date. I recommend https://github.com/andrejilderda/joplin-macos-native-theme these days.

Joplin New Theme Playground

The goal of this repo is to build the new theme in HTML and CSS, and in doing so, use it as an opportunity to review the CSS structure to make it more theme-able.

Discussion

https://discourse.joplinapp.org/t/desktop-new-design-is-nearly-ready-please-cast-your-final-vote/9698/43

tl;dr

  1. You can see the themes in action by downloading and viewing the public folder.
  2. Switch the themes by changing the index.html file at line 8
  3. If you cannot see the icon font, see the "simple server" instructions below.

Themes

All the themes were built off the base theme, generally just changing the variables.

screenshots

base theme

base-theme

dark mode

dark-mode

southwest

I'm not advocating for this theme, mostly showing that its really fast to take any color palette and derive a theme. This was a random palette from http://coolors.co southwest

monochrome

another random example, in this case I also simplified the indenting monochrome

dark mode w/ overrides

This is the most complex example. In here, all the navigation elements are moved to the bottom by using a different note grid definition. dark-mode

Note: The base theme design was done by a different designer, I am just implementing the CSS. More info here: designer discussion

how this playground is built

For speed of dev, I am using pug and sass, the render folder has the working files. the public folder has the output.

simple server

to get everything linking nicely I run a python simple server from the command line

cd public
python -m SimpleHTTPServer 8002

html (pug)

to render pug to html. anytime you add a new ``.pug` file you need to restart

pug render/pug --out public -w -P

css (sass)

this uses a custom fish script, i can publish if needed

sass --update --force  render/sass/:public/css/
                sass --watch render/sass/:public/css/

SASS Structure

  • _base_layout - this is the main structure of the body and the sidebars
  • _note_layout - this is the structure of the note panel
  • _colors - defines colors throughout
  • _typography - defines type throughout
  • _actions - defines buttons, search, and the fancy todo checkboxes

You'll notice that because it is broken up like this, you get the same classes defined more than once. I have found it much easier to work on large projects when the css is split in this way, since you are generally working on type at once, then color, etc. When they are split by class, it is harder to keep the styles tight.

Commit History

0.0.1

initial push