---
title:                                  Roundtrip
tagline:                                themes
date:                                   2020-11-10 00:00:00
description: >
                                        The themes feature for J1 is in an experimental
                                        state for the template system. Anyway, it makes
                                        sense to present what is possible using different
                                        versions of Bootstrap's CSS styles for a website.

categories:                             [ Roundtrip ]
tags:                                   [ Introduction, Module, Themes ]

scrollbar:                              false
fab_menu_id:                            page_ctrl_simple

permalink:                              /pages/public/learn/roundtrip/themes/
regenerate:                             false

resources:                              [ animate, rouge, clipboard, lightbox ]
resource_options:
  - attic:
      slides:
        - url:                          /assets/images/pages/roundtrip/themes-1920x1280-bw.jpg
          alt:                          Photo by Clem Onojeghuo on Unsplash
          badge:
            type:                       unsplash
            author:                     Clem Onojeghuo
            href:                       https://unsplash.com/@clemono
---

// Page Initializer
// =============================================================================
// Enable the Liquid Preprocessor
:page-liquid:

// Set (local) page attributes here
// -----------------------------------------------------------------------------
// :page--attr:                         <attr-value>
:images-dir:                            {imagesdir}/pages/roundtrip/100_present_images

//  Load Liquid procedures
// -----------------------------------------------------------------------------
{% capture load_attributes %}themes/{{site.template.name}}/procedures/global/attributes_loader.proc{%endcapture%}

// Load page attributes
// -----------------------------------------------------------------------------
{% include {{load_attributes}} scope="all" %}

// Page content
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

// Include sub-documents (if any)
// -----------------------------------------------------------------------------
[role="dropcap"]
Themes for the template system J1 are based on the free and open-source CSS
front-end framework {url-bs--home}[Bootstrap, {browser-window--new}] of
version V5. Bootstrap is an HTML, CSS & JS Library that focuses on simplifying
the development of modern web pages. The primary purpose of applying the
framework to J1 is to provide a general standard for colors, sizes, fonts,
and the overall layout of a J1-based site. Bootstrap provides basic style
definitions for all commonly used HTML elements.

Using Bootstrap base style only results in a uniform appearance for the
content in terms of the overall layout, text, tables, and form elements
across all modern web browsers available on the market. In addition,
developers can take advantage of CSS classes defined in Bootstrap to
customize content individually.

The themes feature for J1 is in an experimental state for the template
system. Anyway, it makes sense to present what is possible using different
versions of Bootstrap's CSS styles for a website.

== The Themes menu

Themes step in the framework to further adjust the website's appearance
based on the core CSS rules and definitions of Bootstrap. Themes do not
change the framework's functionality but modify rule-based, e.g., the
color scheme, fonts, sizes, or the appearance of more complex elements like
forms or tables. Additionally, a theme may add additional components but in
the *sense* of Bootstrap's framework rules and philosophy.

It is expected that many people will change the template for their needs. To
create unique websites. Fundamental to do this is are CSS styles
defined by Bootstrap.

Modifying the CSS styles of link:{url-bootstrap--home}[Bootstrap, {browser-window--new}]
is not rocket science. But, to be honest, some knowledge is needed for
link:{url-w3org--css-spec}[the CSS technology] to do so. We encourage you to spend
some time first on learning CSS. To learn what is the
link:{url-w3schools--css-tutorial}[design base, {browser-window--new}] of each and
every website.

.Themes menu (Bootswatch)
lightbox::images--themes-menu[ 1024, {data-images--themes-menu} ]

Thanks to the people at link:{url-bootswatch--home}[Bootswatch, {browser-window--new}],
a great set of already prepared Bootstrap stylesheets in various designs are
available on their website. There is no need to start from scratch, re-define all
the Bootstrap variables, and rebuild the framework files to create a new
theme. Many different styles are available. What is already available at
Bootswatch is at least a good base for your modifications; your unique design.

Besides the bunch of different stylesheets at Bootswatch, an
link:{url-bootswatch--api}[Integration API, {browser-window--new}] is available
that helps a lot to integrate available designs into an existing site. This API
is the base to integrate selectable Bootswatch stylesheets into the J1 Template
navigation system for easy use.

=== Apply a theme

The base for designing pages using the J1 Template is the theme Uno, a modern
light theme used for many types of websites. And what we mentioned
already, web design is not: one size fits all. The theme Uno can be seen as
a good base, a starting point. Combining Uno and a different theme may be a fast
solution for your site!?

You can find all available themes and stylesheets on your pages
from the menu Themes. You're invited to check how a page is changing for
its design if other stylesheets, other ideas of web design are used.

NOTE: Changing BS-based styles is one thing. Changing from one theme to the
next at runtime is a bit more challenging. For the first version of the J1
Template, many styles are automatically changed for J1 specific components,
but not all of them for now.

Select a theme from this menu, and a new BS-based stylesheet is
automatically applied to your pages.

== Code Highlighter Rouge

_Rouge_ is a pure Ruby and themeable syntax highlighter. It can highlight
100+ different languages and output HTML or ANSI 256-color text. Find all
available themes and examples for several languages of how
highlighting works using _Rouge_.

For the default theme `Uno` of J1 Template, the following _Rouge_ themes
are used:

* light: `igorpro`
* dark: `monokai.sublime`

NOTE: The default themes used for the J1 Template can be configured with the
global template config file `~/_data/j1_config.yml`.


=== Apply a theme

Make a selection of a theme below to preview.

++++
<div class="btn-group">
  <!-- See: https://stackoverflow.com/questions/47242702/force-bootstrap-dropdown-menu-to-always-display-at-the-bottom-and-allow-it-go-of -->
  <!-- NOTE: control the behaviour of popper.js for positioning -->
  <!-- NOTE: set attribute data-flip="false" to open the SELECT list at the BOTTOM of the BUTTON -->
  <button class="btn btn-primary btn-flex btn-lg dropdown-toggle" data-flip="false" type="button" data-bs-toggle="dropdown" data-bs-target="#navbarDropdown" aria-haspopup="true" aria-expanded="false">
  Select Theme<span class="caret"></span>
  </button>
  <ul class="dropdown-menu scrollable-menu" role="menu">
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.dark</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.light</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.dark</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.monokai.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.monokai.light</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.dark')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.dark</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('base16.solarized.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>base16.solarized.light</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('colorful')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>colorful</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('github')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>github</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('gruvbox')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('gruvbox.light')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>gruvbox.light</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('igorpro')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>igorpro</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('molokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>molokai</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('monokai')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('monokai.sublime')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>monokai.sublime</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('pastie')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>pastie</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('thankful_eyes')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>thankful_eyes</a></li>
    <li><a class="dropdown-item" onclick="j1.adapter.rouge.reaplyStyles('tulip')"> <i class="mdi mdi-view-quilt mdi-18px mr-2" style="color: #9E9E9E"></i>tulip</a></li>
  </ul>
</div>
<div id="selected" class="mt-1 mb-3"></div>
++++

=== Highlight Liquid code

{% raw %}
[source, liquid]
----
Hello {{ 'now' | date: "%Y %h" }}

{% comment %} if item.quantity is 4... {% endcomment %}
{% for i in (1..item.quantity) %}
  {{ i }}
{% endfor %}
----
{% endraw %}

=== Highlight Javascript code

[source, javascript]
----
// helper functions
//
function styleSheetLoaded(styleSheet) {
  var sheets     = document.styleSheets,
      stylesheet = sheets[(sheets.length - 1)];

  // find CSS file 'styleSheetName' in document
  for(var i in document.styleSheets) {
    if(sheets[i].href && sheets[i].href.indexOf(styleSheet) > -1) {
      return true;;
    }
  }
}
----

=== Highlight Ruby code

[source, ruby]
----
require 'asciidoctor/extensions' unless RUBY_ENGINE == 'opal'
include Asciidoctor <1>

Asciidoctor::Extensions.register do
  class J1BlockMacro < Extensions::BlockMacroProcessor
    use_dsl
    named :banner
    name_positional_attributes 'role'

    def process parent, target, attrs
      html = %(<div id="#{target}" class="#{attrs['role']}"></div>)
      create_pass_block parent, html, attrs, subs: nil
    end
  end
  block_macro J1BlockMacro
end
----
<1> don't miss to load the Asciidoctor ruby


== What next

Using a theme, the character of a website can change a lot. If you don't want
to support multiple themes with your site, a theme is a good base to create
your theme, anyway.

An important feature for larger webs is searching. The visitors should be able
to search your site to find pages and posts they are interested in. Check what
is searching a J1 website all about at link:{url-roundtrip--quicksearch}[Quicksearch].