Install extensions

What is an extension?

An extension is a feature that can not be build in in the Common Theme directly, maybe because it is too large, too complex, or can only be kept optional by releasing it separately to the theme. Technically, the Sandbox Theme is also an extension.

As these have an own code they get updated individually from the CT (but always at the same time as the CT), so if you install these, ensure to watch out if they get updated with a new release as well.

Forum enhancements

• Go to your component:theme page.
• Immediately below the other @import lines add the following line:

@import url('https://grombald.github.io/Common-Theme/css/min/Common-Theme-Extension_Forum-enhancements-1.0.min.css');

That's it :p

Dark mode

This extension adds a light switch to Wikidot. Unfortunately you have to turn the light off again every time you load a page, and it doesn't turn custom themes dark. It only works on browsers that support CSS variables. The light switch is not shown on browsers that do not.

The theme

• Create the page theme:ct-dark in your wiki with the content:

[[module css]]
@import url('https://grombald.github.io/Common-Theme/css/min/Common-Theme-Dark-Mode-1.1.min.css');
[[/module]]

The theme in the sandbox

• Create the page theme:ct-dark in your wiki with the content:
• Wherein you have to replace YOUR-WIKI with the subdomain of your wiki's URL (the stuff before the .wikidot.com)

[[module css]]
@import url('https://grombald.github.io/Common-Theme/css/Common-Theme-Dark-Mode-1.1.css');
@import url('https://grombald.github.io/Common-Theme/css/Common-Theme-Dark-Mode-Sandbox-1.0.css'); 
[[/module]]

The light switch

There are two ways to implement the light switch. One is a big round button that appears next the user-menu in the header. The other is a new button in the topbar. They can be placed individually in the different topbar variants, e.g. menu-button on desktop and round button on mobile. Note that a mixed use may result in the account menu being pushed to the left a bit on the menu-button variant as well. A solution is being sought.

• Go to your wiki's topbar, usually nav:top
• For all variants, place this code somewhere in your nav:top, preferably the top:

[[module listPages limit="1" category="theme" order="created_at" fullname="@URL|theme:ct_light" urlAttrPrefix="theme"]]
%%content%%
[[/module]]

Menu button variant

• In front of the menus, but still inside the div containing that topbar, place this code:
  • For example right below the line [[div class="top-bar"]]

[[ul_ class="ct-inline-theme-switch"]]
[[li class="ct-theme-switch inline-switch"]]
[[module listPages pagetype="*" category="-nav -forum" limit="1" range="."]]
[[div_ class="dark-mode"]]
[[a href="%%link%%/theme_fullname/theme:ct_dark-testing" class="fa fa-lightbulb-o"]]@@@@[[/a]]
[[/div]]
[[div_ class="light-mode"]]
[[a href="%%link%%/#" class="fa fa-lightbulb-o"]]@@@@[[/a]]
[[/div]]
[[/module]]
[[/li]]
[[/ul]]

Round button variant

• If you want this only in a specific menu, place the following code at the end of that menu:
  • If you want the round button for all devices, just place this code at the end of the nav:top page.

[[module css]]
#login-status {right: 60px;}
[[/module]]
[[div_ class="ct-theme-switch"]]
[[module listPages pagetype="*" category="-nav -forum" limit="1" range="."]]
[[div_ class="dark-mode"]]
[[a href="%%link%%/theme_fullname/theme:ct-dark-testing" class="fa fa-lightbulb-o"]]@@@@[[/a]]
[[/div]]
[[div_ class="light-mode"]]
[[a href="%%link%%/#" class="fa fa-lightbulb-o"]]@@@@[[/a]]
[[/div]]
[[/module]]
[[/div]]