Theme: Willemstad

Hi all! :wave:

I just wanted to introduce a new theme I made:

Willemstad

![](upload://qFANSBsIFhvXnIzx6Q34qu0lJDS.jpeg)
Named after the capital of Curaçao, which is known for its colourful houses, Willemstad is a theme that aims to inject the appropriate amount of colour for signposting and to make note-taking enjoyable. Here, it aims to strike a balance between too overly colourful; and too overly minimalistic.

So how does Willemstad look and what features does it have?

Showcase


The original colour palette

The original colour palette of Willemstad is based on accents of green, with highlighting over the current pane you’re looking at, as well as different header text and background colours that were chosen to ensure there isn’t a clash, whilst maintaining high levels of fast visual recognition.

Willemstad’s interpretation of the Nord colour palette
More recently, I’ve also introduced my interpretation of Nord, for those who love the colour tones of Nord but isn’t too keen on the brighter headers of the most popular Nord theme in Obsidian.

True Black dark mode
Willemstad also supports a True Black dark mode since v0.1.3.

Original colour palette

Nord colour palette

Minimalistic floating sidebars
One of the interesting features Willemstad has is its floating sidebars (which can be turned off via Style Settings), that gives you more screen real estate to do the important things in Obsidian if you’re using a small laptop like myself.

ezgif.com-gif-maker

Other features include:

  1. Comprehensive Style Settings support
    Many items in Willemstad can be changed/turned off/toggled on via the use of the Style Settings plugin provided by @mgmeyers, available in the Community Plugins store.
  2. Multi-colour Highlighting (with credits to @Atlas and @pseudometa)
    Three highlighting colours and options available!
  3. Readable Underlines (co-written with @Cecilia_May)
    Underlines are known to be less readable, so Willemstad provides you two alternatives to the standard Obsidian variety:

Standard Obsidian:
image
Additional spacing (similar to Shimmering Focus):
image
Willemstad’s standard:
image

  1. Support for the Longform plugin and writing cssclass (with credits to @pseudometa)
  2. Dataview Word Wraps (with credits to @SlRvb)
  3. Removing shadows where possible, including in Admonitions and Sliding Panes (the latter with input and help from @Damikiller37)

Obsidian is meant to be used with community plugins, so Willemstad naturally has provisions to support community plugins. At the moment, the repetoire of community plugins supported are as follows :-

Community plugins supported

  • Style Settings
  • Calendar
  • Sliding Panes
  • Admonitions
  • Dataview
  • Breadcrumbs
  • Kanban
  • Advanced Tables
  • Get Info
  • CookLang Plugin
  • Emoji Toolbar
  • Maps of Content
  • CMenu
  • Footnote & Citation Indicator
  • Settings Search
  • Longform
  • … with more coming soon!


Look how clean the Admonitions box is, without shadows. This comes pre-set in Willemstad.


Sounds good! Where can I download it from?
Willemstad is now available on the Community Theme store, so the best way to get easy updates and all is through downloading Willemstad within Obsidian itself.


To do so, go to SettingsAppearanceThemes: ManageWillemstad.

Alternatively, you can download it from the Github repository, where you can download the obsidian.css file and drop it into your .obsidian/themes folder, and use it directly!

If you’re more willing for a challenge, you can also build your own version of Willemstad using Sass from the repo.

Suggested plugins to use it with
The following plugins are also suggested to use with Willemstad :-

  1. Style Settings
  2. Indentation Guides

Note!
Do note that Willemstad is recommended for use only in the new editor, and not the legacy one! It does not work for mobile at the moment, although that is planned for the future.

Either way, I hope you enjoy, and as always, feature requests and bug reports (best done via GitHub) are very welcome!

10 Likes

I like the look of this theme. My major problem is that selected text is not highlighted. I can’t find a setting for this in Style Settings. Is there a way of enabling it?

Hiya! :wave: The selected text should be highlighted by default - I haven’t changed anything in the theme CSS that should cause it :thinking:
image

Is it possible to take a screenshot of what selecting text looks for you? Do you happen to use a snippet by any chance too?

Major update — please update the theme!

Updates to the Willemstad theme:

Willemstad X v0.2.0 Christianshavn
:sparkles: New features and improvements (since last major update, v0.1.5)

  • Added Minimal Cards and Image Grids by kepano from Minimal
  • Admonition tricks improvements: ad-table no longer requires specifying colour + name — these are hidden by default! That means anything that uses ad-table will render like Reading mode in Live Preview; ad-infobox by SlRvb added
  • New improvements to typography stuff: Gradient headers, fourth highlight colour, styling for headers in Admonitions to be consistent with normal headers
  • Significant improvements to Style Settings styling and many many new Style Settings options, including turning off header background colours
  • Small bug fixes: buttons/interactive elements should largely have a consistent colour scheme + elements now
  • Coloured loading bar (customisable with Style Settings)

:partying_face: New plugin support

  • LanguageTool Integration

:yellow_circle: Coming up soon!

  • RemixIcons for Willemstad icons
  • Support for aside tags
  • Theme Documentation (you can already have a sneak peek of it being a work in progress, at https://willemstad.cc)
  • Turning off folder and file icons

Updates to the Willemstad theme:

Willemstad X v0.2.4 Christianshavn

:sparkles: Summary of new features and improvements (since last major update, v0.2.0)

  • Styling improvements to Community Plugins modals and info, Startup screen, and Style Settings, Backlinks pane
  • Startup Screen: Overhauled it, with animation! Also added Startup screen customisation options: choose your own image/background colours/linear-gradients/gif/whatever!
  • Multiple bug fixes
  • Multiple smaller improvements

:partying_face: New plugin support

  • Full Calendar

Other comments

  • Willemstad got accepted to the Community Themes store on 12th February, so today marks the 1st month since it’s available to the world. I guess I’d just like to say thank you! — it’s really incredible how I had almost-zero CSS knowledge 1.5 months ago and now Willemstad’s been downloaded 1.3k times :see_no_evil:

See full changelog: Release v0.2.4 Christianshavn · tingmelvin/willemstad-x · GitHub

1 Like

Hi, I was looking at your site and noticed that the section on CSS Classes is mostly blank (particularly, I mean the CSS Class “Minimal Cards”. What exactly does this class do in your theme? Create flashcards? I’m not familiar with CSS but Google was mostly unhelpful)

Hiya! Sorry for the late reply. The theme documentation is not remotely done, but Minimal Cards work exactly like it does in Minimal (I’ve linked their theme guide here): Cards

Just wanted to say that I tried Willemstad on mobile (iPad) the other day, and holy smokes is it great. Thanks for your contribution. :slight_smile:

2 Likes

thank you for your kind words! that made my day!

as always, if you have any suggestions to improve it, you’re welcome to leave it here, on GitHub, or via Discord :smiley:

Finally, big changes done! Please update!

:warning: MANY, MANY BREAKING CHANGES! in order to make Willemstad’s defaults apply without Style Settings. I am so so sorry, and hopefully there wouldn’t be a need to change anything more moving forward.

Updates to the Willemstad theme:

Willemstad X v0.4.0 Nyhavn

:sparkles: New features and improvements (since last milestone update, v0.3.0 Bryggen)

  • Willemstad’s defaults are now (almost-)globally applied with Style Settings — almost, because I probably forgot something with my two braincells
  • New default mini-sized titlebar — appears when hover. Drags the screen if you position your cursor rightly, at either side of the buttons!
  • Custom Readable Line Lengths — no more ‘RTL is TOO SMALL and no RTL is TOO BIG’ woes!
  • Callout rationalisation (inspired & :carrrl: from @SlRvb#3223) — ongoing project, but you now can use >[!(insert callout class name)|no-title] to remove titles globally.
    • :warning:aside-no-title has been removed because of this (use >[!aside|no-title] instead), but kanban-no-title has been retained for legacy purposes
  • More Advanced Settings options, including YAML frontmatter font colours and small font sizing customisation
  • More Responsive Style Settings
  • Other bug fixes and small changes (see full changelog on GitHub)

Other comments

  • Multiple areas for issues, please file a bug report if you encounter them:
    • The entire set of SCSS files (~50+) has been refactored and redone and all, so if there is an issue, it’s probably me screwing up. Let me know!
    • I haven’t had an issue with the Admonitions 9 update, but according to javalent it is supposed to break stuff.
    • I am told by @pseudometa that some stylings might not stick on macOS.
  • Should be working on theme docs imminently!
  • 12018 lines (10k reached — 21st March)

See full changelog: Release v0.4.0 Nyhavn · tingmelvin/willemstad-x · GitHub

Obsidian_2qe7avjEMV
Obsidian_iyxM8CEwbN

2 Likes

tl;dr: Print stylesheet and a compatible Obsidian Publish companion CSS now available! Certain dark mode fonts should be more readable now.


Updates to the Willemstad theme:

Willemstad X v0.4.3 Nyhavn

:sparkles: THE TL;DR BIT | New features and improvements (since last milestone update, v0.4.0 Bryggen)

  • Print stylesheet added — no more weird page breaks!
    • Will be expanded on in the future
  • Obsidian Publish CSS added — use the publish.css file.
  • Contrast between some text in original dark mode should be significantly more visible (meets WCAG 2.1 contrast guidelines)

:smiling_face_with_three_hearts: Other comments

  • I understand that there might be some issue with the titlebar (especially with Macs), as mentioned was possible by @pseudometa. Please use the original titlebar option in those cases, I might revert to the original in a future update.
  • 12270 lines (10k reached — 21st March)

See full changelog: Release v0.4.3 Nyhavn · tingmelvin/willemstad-x · GitHub

2 Likes

Willemstad v0.5.0 Jordaan
Happy and relieved to finally announce what is probably the biggest update to the Willemstad theme! I hope I can convince you to give it a try? :sweat_smile: https://willemstad.cc/infosheet/v0.5 allows you to interact with the callouts as well.

:sparkles: New features

  • Icons
    • replacement of default icon sets, especially in the ribbon
    • fixed missing animations + hover colours
    • hovering over the graph button also shows the graph shape-shifting now
  • Callouts —
    • Standard callouts now styled
      • Callout colours are also set dynamically, so even your specially crafted custom callouts from Admonitions should display well!
    • Addition of new callout classes
      • from Shimmering Focus (:carrrl: @pseudometa), new [!phone], [!mail], [!email], [!file], [!attachment], [!goal], [!link], [!quote] classes
      • additional Willemstad-specific [!code] class;
      • [!important], [!success] classes styled differently, and with subtle animations
    • Addition of opp/opposite metadata class — e.g. [!note|opp] will display the note’s content before the title
    • Multi-column callouts
      • these will not wrap to the next row, and respect that you want them in columns
      • use [!columns] or [!columns|no-t] for no titles
  • Mobile-style Sidepanes (:carrrl: @damikiller37 and @SlRvb)
    • available via Style Settings, for this, opening sidepane workspace will no longer shift notes left or right
  • Publish theme significantly updated
    • ~4k lines now, but it encompasses all the inbuilt callouts and styling available in core Willemstad.
  • More Pleasant Highlights
    • more pleasant colours set as default; old-style highlight colours available via Style Settings
  • New Focus Mode options
    • Disappearing Title Headers; Hide ‘Exit Focus Mode’ Ribbon/Button
    • more minimalist than Shimmering Focus? :eyes:

:see_no_evil: Big Fixes

  • Complete rewrite of main UI elements (sorry Silver) to ensure things are responsive and not off-centre, vertically centred titles/things should definitely be vertically centred now
  • All default Obsidian box-shadows on elements should be completely busted now!
  • Headers in LP, Source mode, and Reading mode should be the exact same height and font size now
  • Prism.js codeblocks styling fixed, and includes the code language now

:see_no_evil: Smaller Additions and Fixes

  • Added highlighting syntax in highlight colour field for Style Settings
  • Added HTML progress bar colours
  • Fixed Headers collapse indicators sizing and svg placement
  • Additional Style Settings for Focus Mode for True Focus (removes the exit button as well)
  • Workspace Tab Headers:
    • for right-aligned headers, should now align right by default if one changes the sidepanes size to be too small for it
    • removed the :before or :after element to make the first icon flush with the border

:smiling_face_with_three_hearts: Other comments

  • Lines: 15244/20000 (+2947 lines from v0.4.3, +59 lines vs Shimmering Focus) @pseudometa I’m on your case! :stuck_out_tongue:

See interactive changelog: v0.5
See full changelog: Release v0.5.0 Jordaan · tingmelvin/willemstad-x · GitHub

2 Likes