Add template and default-dark theme

.gitignore

@@ -0,0 +1,2 @@
+.sass-cache
+build

Makefile

@@ -0,0 +1,9 @@
+all: default-dark-theme
+
+default-dark-theme:
+	mkdir -p build
+	scss default-dark/default-dark.scss build/default-dark.css
+	yuicompressor --nomunge build/default-dark.css > build/default-dark.min.css
+
+clean:
+	-rm -rf .sass-cache build

README.md

@@ -1,3 +1,23 @@
-# re2o-themes
+# Re2o-themes
 
-Beautiful themes for Re2o
+This repository contains the source file for [Re2o](https://gitlab.federez.net/re2o/re2o) themes. They are written using [sass](https://sass-lang.com/) to make them easier to customize.
+
+Checkout each theme's folder for more details and a preview of the theme. Also see [this page](https://gitlab.federez.net/re2o/re2o/-/wikis/User%20Documentation/Add-a-custom-theme) to learn how to install themes.
+
+## Dependencies
+
+To compile the `.scss` files, install the following packages for Debian:
+
+```bash
+$ sudo apt install python3-pyscss yui-compressor
+```
+
+## Compiling
+
+You need to compile the `.scss` files to obtain the `.css` files needed by Re2o. You can use `make` to do that automatically:
+
+```bash
+$ make
+```
+
+The themes' `.min.css` files will be placed in the `build` folder.

default-dark/README.md

@@ -0,0 +1,11 @@
+# Default-dark
+
+This theme is inspired by the [darkly theme for bootstrap](https://bootswatch.com/darkly). However, it is simplified and customized for Re2o.
+
+This theme is supposed to be match the default theme as much as possible but with dark colors: it shouldn't impact padding, margins, behaviors...
+
+## Preview
+
+![Homepage preview](img/default-dark-home.png)
+
+![User page preview](img/default-dark-user.png)

default-dark/default-dark-variables.scss

@@ -0,0 +1,202 @@
+// Generic
+$success-color: #009670;
+$success-alt-color: #03775a;
+$success-focus-color: #03775a;
+$success-link-color: #e6e6e6;
+
+$info-color: #2384c6;
+$info-alt-color: #217dbb;
+$info-focus-color: #217dbb;
+$info-link-color: #e6e6e6;
+
+$warning-color: #df8900;
+$warning-alt-color: #c77b00;
+$warning-focus-color: #c87f0a;
+$warning-link-color: #e6e6e6;
+
+$danger-color: #e12e1c;
+$danger-alt-color: #e43725;
+$danger-focus-color: #d62c1a;
+$danger-link-color: #e6e6e6;
+
+$primary-color: #375a7f;
+$primary-focus-color: #28415b;
+$primary-active-color: #375a7f;
+$primary-active-focus-color: #1d2f43;
+$primary-disabled: #375a7f;
+
+
+// Body
+$body-text-color: #ffffff;
+$body-background-color: #222222;
+
+
+// Text
+$text-standard-color: #ffffff; // text in buttons etc.
+$text-alt-color: #303030;  // text on hover
+$text-disabled-color: #999999;
+
+$text-primary-color: #375a7f;  // text in .*-primary
+$text-primary-focus-color: #28415b;
+$text-help-color: #aaaaaa;
+$text-muted-color: #999999;
+
+$link-color: #337ab7;
+$link-focus-color: #49a8e8;
+
+
+// Navbar
+$navbar-text-color: #d6d6d6;
+$navbar-brand-color: #ffffff;
+$navbar-background-color: #222222;
+$navbar-border-color: transparent;
+
+$navbar-focus-text-color: #ffffff;
+$navbar-active-text-color: #d6d6d6;
+$navbar-active-background-color: #28415b;
+$navbar-open-text-color: #ffffff;
+$navbar-open-background-color: #d6d6d6;
+$navbar-disabled-text-color: #cccccc;
+
+$secondary-navbar-text-color: #d6d6d6;
+$secondary-navbar-background-color: #333333;
+
+
+// Menus
+$dropdown-menu-text-color: #ebebeb;
+$dropdown-menu-background-color: #303030;
+$dropdown-menu-focus-text-color: #ffffff;
+$dropdown-menu-focus-background-color: #375a7f;
+$dropdown-menu-divider-color: #454545;
+$dropdown-menu-disabled-color: #999999;
+
+
+// Buttons
+$button-default-color: #454545;
+$button-default-focus-color: #2c2c2c;
+$button-default-active-color: #272727;
+$button-default-active-focus-color: #1a1a1a;
+$button-default-disabled-focus-color: #454545;
+$button-default-badge-text-color: #454545;
+$button-default-badge-background-color: #ffffff;
+
+$button-success-active-focus-color: #00654b;
+$button-success-disabled-focus-color: #49a8e8;
+$button-success-badge-text-color: #49a8e8;
+$button-success-badge-background-color: #ffffff;
+
+$button-info-active-focus-color: #1c699d;
+$button-info-disabled-focus-color: #285879;
+$button-info-badge-text-color: #3498db;
+$button-info-badge-background-color: #ffffff;
+
+$button-warning-active-focus-color: #a66908;
+$button-warning-disabled-focus-color: #df8900;
+$button-warning-badge-text-color: #df8900;
+$button-warning-badge-background-color: #ffffff;
+
+$button-danger-active-focus-color: #b62516;
+$button-danger-disabled-focus-color: #e12e1c;
+$button-danger-badge-text-color: #e12e1c;
+$button-danger-badge-background-color: #ffffff;
+
+
+// Panels
+$panel-background-color: #303030;
+$panel-border-color: #454545;
+$panel-default-background-color: #454545; // .panel-default elements
+$panel-footer-background-color: #454545;
+$panel-heading-background-color: #303030;
+$panel-badge-text-color: #303030;
+$panel-badge-background-color: #ffffff;
+
+$thumbnail-text-color: #ffffff;
+$thumbnail-background-color: #222222;
+$thumbnail-border-color: #454545;
+$thumbnail-focus-border-color: #49a8e8;
+
+
+// Tables
+$table-text-color: #999999;
+$table-background-color: #222222;
+$table-alt-background-color: #3d3d3d;  // Odd elements have this color
+$table-border-color: #454545;
+$table-focus-background-color: #454545;
+$table-active-background-color: #454545;
+$table-active-focus-background-color: #393838;
+
+$table-success-background-color: #407293;
+$table-success-focus-background-color: #00a379;
+
+$table-info-background-color: #3498db;
+$table-info-focus-background-color: #258cd1;
+
+$table-warning-background-color: #df8900;
+$table-warning-focus-background-color: #c77b00;
+
+$table-danger-background-color: #86413a;
+$table-danger-focus-background-color: #e43725;
+
+
+// Lists
+$list-background-color: #303030;
+$list-disabled-text-color: #999999;
+$list-disabled-background-color: #ebebeb;
+$list-disabled-focus-text-color: #999999;
+$list-active-text-color: #a8c0da;
+$list-active-background-color: #375a7f;
+$list-active-border-color: #375a7f;
+
+$list-badge-text-color: #375a7f;
+$list-badge-background-color: #ffffff;
+
+$list-link-text-color: #49a8e8;
+$list-link-focus-text-color: #49a8e8;
+$list-heading-text-color: #0bcb9a;
+
+$list-success-link-background-color: #49a8e8;
+$list-success-link-focus-background-color: #00a379;
+$list-success-active-focus-background-color: #ffffff;
+
+$list-info-link-background-color: #2384c6;
+$list-info-link-focus-background-color: #258cd1;
+$list-info-active-focus-background-color: #ffffff;
+
+$list-warning-link-background-color: #df8900;
+$list-warning-link-focus-background-color: #c77b00;
+$list-warning-active-focus-background-color: #ffffff;
+
+$list-danger-link-background-color: #e12e1c;
+$list-danger-link-focus-background-color: #e43725;
+$list-danger-active-focus-background-color: #ffffff;
+
+
+// Pagination
+$pagination-background-color: #2b2b2b;
+$pagination-border-color: #454545;
+$pagination-focus-background-color: #3d3d3d;
+$pagination-focus-border-color: #454545;
+$pagination-active-background-color: #375a7f;
+$pagination-active-border-color: #454545;
+$pagination-disabled-text-color: #454545;
+$pagination-disabled-background-color: #303030;
+$pagination-disabled-border-color: #454545;
+
+
+// Forms
+$forms-text-color: #555555;
+$forms-background-color: #ffffff;
+$forms-border-color: #cccccc;
+
+
+// Django autocomplete light
+$dal-text-color: #555555;
+$dal-background-color: #ffffff;
+$dal-border-color: #cccccc;
+
+$dal-result-focus-text-color: #ffffff;
+$dal-result-focus-background-color: #5897fb;
+
+$dal-input-text-color: #000000;
+$dal-input-background-color: #ffffff;
+$dal-input-border-color: #cccccc;

default-dark/default-dark.scss

@@ -0,0 +1,8 @@
+/*
+ * default-dark.css, a simple dark theme for Re2o
+ *
+* Copyright © 2021  Jean-Romain Garnier
+ */
+
+@import './default-dark-variables.scss';
+@import '../template.scss';

template-variables.scss

@@ -0,0 +1,206 @@
+/*
+ * This file lists all the variables to edit for your theme.
+ */
+
+// Generic
+$success-color: none;
+$success-alt-color: none;
+$success-focus-color: none;
+$success-link-color: none;
+
+$info-color: none;
+$info-alt-color: none;
+$info-focus-color: none;
+$info-link-color: none;
+
+$warning-color: none;
+$warning-alt-color: none;
+$warning-focus-color: none;
+$warning-link-color: none;
+
+$danger-color: none;
+$danger-alt-color: none;
+$danger-focus-color: none;
+$danger-link-color: none;
+
+$primary-color: none;
+$primary-focus-color: none;
+$primary-active-color: none;
+$primary-active-focus-color: none;
+$primary-disabled: none;
+
+
+// Body
+$body-text-color: none;
+$body-background-color: none;
+
+
+// Text
+$text-standard-color: none; // text in buttons etc.
+$text-alt-color: none;  // text on hover
+$text-disabled-color: none;
+
+$text-primary-color: none;  // text in .*-primary
+$text-primary-focus-color: none;
+$text-help-color: none;
+$text-muted-color: none;
+
+$link-color: none;
+$link-focus-color: none;
+
+
+// Navbar
+$navbar-text-color: none;
+$navbar-brand-color: none;
+$navbar-background-color: none;
+$navbar-border-color:none;
+
+$navbar-focus-text-color: none;
+$navbar-active-text-color: none;
+$navbar-active-background-color: none;
+$navbar-open-text-color: none;
+$navbar-open-background-color: none;
+$navbar-disabled-text-color: none;
+
+$secondary-navbar-text-color: none;
+$secondary-navbar-background-color: none;
+
+
+// Menus
+$dropdown-menu-text-color: none;
+$dropdown-menu-background-color: none;
+$dropdown-menu-focus-text-color: none;
+$dropdown-menu-focus-background-color: none;
+$dropdown-menu-divider-color: none;
+$dropdown-menu-disabled-color: none;
+
+
+// Buttons
+$button-default-color: none;
+$button-default-focus-color: none;
+$button-default-active-color: none;
+$button-default-active-focus-color: none;
+$button-default-disabled-focus-color: none;
+$button-default-badge-text-color: none;
+$button-default-badge-background-color: none;
+
+$button-success-active-focus-color: none;
+$button-success-disabled-focus-color: none;
+$button-success-badge-text-color: none;
+$button-success-badge-background-color: none;
+
+$button-info-active-focus-color: none;
+$button-info-disabled-focus-color: none;
+$button-info-badge-text-color: none;
+$button-info-badge-background-color: none;
+
+$button-warning-active-focus-color: none;
+$button-warning-disabled-focus-color: none;
+$button-warning-badge-text-color: none;
+$button-warning-badge-background-color: none;
+
+$button-danger-active-focus-color: none;
+$button-danger-disabled-focus-color: none;
+$button-danger-badge-text-color: none;
+$button-danger-badge-background-color: none;
+
+
+// Panels
+$panel-background-color: none;
+$panel-border-color: none;
+$panel-default-background-color: none; // .panel-default elements
+$panel-footer-background-color: none;
+$panel-heading-background-color: none;
+$panel-badge-text-color: none;
+$panel-badge-background-color: none;
+
+$thumbnail-text-color: none;
+$thumbnail-background-color: none;
+$thumbnail-border-color: none;
+$thumbnail-focus-border-color: none;
+
+
+// Tables
+$table-text-color: none;
+$table-background-color: none;
+$table-alt-background-color: none;  // Odd elements have this color
+$table-border-color: none;
+$table-focus-background-color: none;
+$table-active-background-color: none;
+$table-active-focus-background-color: none;
+
+$table-success-background-color: none;
+$table-success-focus-background-color: none;
+
+$table-info-background-color: none;
+$table-info-focus-background-color: none;
+
+$table-warning-background-color: none;
+$table-warning-focus-background-color: none;
+
+$table-danger-background-color: none;
+$table-danger-focus-background-color: none;
+
+
+// Lists
+$list-background-color: none;
+$list-disabled-text-color: none;
+$list-disabled-background-color: none;
+$list-disabled-focus-text-color: none;
+$list-active-text-color: none;
+$list-active-background-color: none;
+$list-active-border-color: none;
+
+$list-badge-text-color: none;
+$list-badge-background-color: none;
+
+$list-link-text-color: none;
+$list-link-focus-text-color: none;
+$list-heading-text-color: none;
+
+$list-success-link-background-color: none;
+$list-success-link-focus-background-color: none;
+$list-success-active-focus-background-color: none;
+
+$list-info-link-background-color: none;
+$list-info-link-focus-background-color: none;
+$list-info-active-focus-background-color: none;
+
+$list-warning-link-background-color: none;
+$list-warning-link-focus-background-color: none;
+$list-warning-active-focus-background-color: none;
+
+$list-danger-link-background-color: none;
+$list-danger-link-focus-background-color: none;
+$list-danger-active-focus-background-color: none;
+
+
+// Pagination
+$pagination-background-color: none;
+$pagination-border-color: none;
+$pagination-focus-background-color: none;
+$pagination-focus-border-color: none;
+$pagination-active-background-color: none;
+$pagination-active-border-color: none;
+$pagination-disabled-text-color: none;
+$pagination-disabled-background-color: none;
+$pagination-disabled-border-color: none;
+
+
+// Forms
+$forms-text-color: none;
+$forms-background-color: none;
+$forms-border-color: none;
+
+
+// Django autocomplete light
+$dal-text-color: none;
+$dal-background-color: none;
+$dal-border-color: none;
+
+$dal-result-focus-text-color: none;
+$dal-result-focus-background-color: none;
+
+$dal-input-text-color: none;
+$dal-input-background-color: none;
+$dal-input-border-color: none;