Thema Gallery


Thema provides semantic themes for use with Stencila’s Encoda. Themes are designed to be customizable, or you can make one from scratch.

  1. StencilaStencila


      A theme reflecting Stencila's brand and design system. It is based on the Skeleton theme, and demonstrates how to customize a theme using CSS variables.

      View demo & customize

    1. StencilaTufte


        A theme inspired by the books and handouts of Edward Tufte. It is based on the Tufte CSS project created by Dave Liepmann.

        View demo & customize

      1. eLifeeLife


          A theme for the journal eLife.

          View demo & customize

        1. StencilaNature


            A theme for the journal Nature.

            View demo & customize

          1. StencilaWilmore


              A theme well suited for consuming long-form manuscripts and prose. Named after Edmond Dantés' alias, “Lord Wilmore: An Englishman, and the persona in which Dantès performs random acts of generosity.“

              View demo & customize

            1. StencilaPLoS


                A theme for the journal PLoS.

                View demo & customize

              1. StencilaSkeleton


                  A theme with lots of bones but no flesh. Designed to be used as a starting point for creating new themes, it tries to be as unopinionated as possible.

                  It demonstrates how to use the custom semantic selectors, but the theme only styles a handful of them. For a full and up to date list of all available selectors, please see ../../selectors.css

                  To create a new theme using skeleton, simply duplicate this folder, rename it to your theme‘s name and run npm run generate:themes.

                  View demo & customize

                1. StencilaBootstrap


                    A theme that pulls itself up using Twitter's Bootstrap toolkit.

                    Designed as an illustration of a theme built entirely using an existing CSS stylesheet. Being an illustrative theme, it:

                    • includes gratuitous use of Bootstrap components
                    • does not use an styles or mixins from the shared folder.

                    For real theme, you probably don't want to do either of these things. See styles.css and index.ts for further comments.

                    View demo & customize

                  1. StencilaF1000


                      A theme for the journal F1000Research.

                      View demo & customize

                    1. StencilaGalleria


                        A theme for galleries of CreativeWork nodes.

                        This theme builds on the stencila theme to target Article documents where the main content is a List of CreativeWorks, each having properties such as title, author, and publisher and usually, but not necessarily a MediaObject, such as a thumbnail image of the work. Use cases include a presenting a list of other articles, or a gallery of images or videos.

                        View demo & customize

                      1. StencilaGiga


                          A theme for the "Giga" journals GigaScience and GigaByte.

                          View demo & customize

                        1. StencilaLatex


                            Inspired by the look of traditional scientific manuscripts witten using LaTeX. This theme uses LatexCSS developed by David Zollikofer.

                            View demo & customize

                          1. StencilaRPNG


                              A theme for reproducible PNGs (rPNGs). This theme is used in Encoda when generating rPNGs.


                              • This theme is used for parts of documents e.g. MathBlocks, CodeFragments in different contexts that the demo pages here. e.g. in a Google Doc
                              • In the future, if necessary, we may have different RPNG themes for those different contexts.
                              • Currently the preview of this theme in the demo is broken because it pulls in the stencila Web Components. You can disable those temporarily by removing those by removing the two relevant <script> tags in src/index.html.

                              View demo & customize