Implement bootstrap colour theming from settings. Closes: #22.

Co-authored-by: mirabilos <thorsten.glaser@teckids.org>

biscuit/core/settings.py

@@ -26,6 +26,7 @@ INSTALLED_APPS = [
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'django_global_request',
+    'sass_processor',
     'easyaudit',
     'bootstrap4',
     'fa',
@@ -38,6 +39,20 @@ INSTALLED_APPS = [
 
 INSTALLED_APPS += get_app_packages()
 
+STATICFILES_FINDERS = [
+    'django.contrib.staticfiles.finders.FileSystemFinder',
+    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
+    'sass_processor.finders.CssFinder'
+]
+
+SASS_PROCESSOR_AUTO_INCLUDE = False 
+SASS_PROCESSOR_CUSTOM_FUNCTIONS = {
+    'get-colour': 'biscuit.core.util.sass_helpers.get_colour',
+}
+SASS_PROCESSOR_INCLUDE_DIRS = [
+    LocalSetting(default='/usr/share/sass/bootstrap')
+]
+
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
@@ -150,6 +165,14 @@ ANY_JS = {
     }
 }
 
+COLOUR_PRIMARY = LocalSetting(default='#007bff')
+COLOUR_SECONDARY = LocalSetting(default='#6c757d')
+COLOUR_SUCCESS = LocalSetting(default='#28a745')
+COLOUR_INFO = LocalSetting(default='#17a2b8')
+COLOUR_WARNING = LocalSetting(default='#ffc107')
+COLOUR_DANGER = LocalSetting(default='#dc3545')
+COLOUR_LIGHT = LocalSetting(default='#f8f9fa')
+COLOUR_DARK = LocalSetting(default='#343a40')
 
 _settings = load_and_check_settings(globals())
 globals().update(_settings)

biscuit/core/static/bootstrap_colours.scss

+$theme-colors: (
+    "primary":    get-colour(get-setting(COLOUR_PRIMARY)),
+    "secondary":  get-colour(get-setting(COLOUR_SECONDARY)),
+    "success":    get-colour(get-setting(COLOUR_SUCCESS)),
+    "info":       get-colour(get-setting(COLOUR_INFO)),
+    "warning":    get-colour(get-setting(COLOUR_WARNING)),
+    "danger":     get-colour(get-setting(COLOUR_DANGER)),
+    "light":      get-colour(get-setting(COLOUR_LIGHT)),
+    "dark":       get-colour(get-setting(COLOUR_DARK)),
+);
+
+@import "bootstrap";

biscuit/core/templates/core/base.html

 {# -*- engine:django -*- #}
 {% extends "bootstrap4/bootstrap4.html" %}
-{% load bootstrap4 menu_generator staticfiles font_awesome any_js %}
+{% load bootstrap4 menu_generator staticfiles font_awesome any_js sass_tags %}
 
 {% block bootstrap4_title %}BiscuIT School Information System{% endblock %}
 
 {% block bootstrap4_extra_head %}
  {% fa_css %}
  {% include_css "DataTables-Bootstrap4" %}
+ <link rel="stylesheet" href="{% sass_src 'bootstrap_colours.scss' %}" />
  <link rel="stylesheet" href="{% static 'css/style.css' %}" />
  <link rel="shortcut icon" href="#" />
 {% endblock %}

biscuit/core/util/sass_helpers.py

+from colour import web2hex
+from sass import SassColor
+
+def get_colour(html_colour):
+    rgb = web2hex(html_colour, force_long=True)[1:]
+    r, g, b = int(rgb[0:2], 16), int(rgb[2:4], 16), int(rgb[4:6], 16)
+
+    return SassColor(r, g, b, 255)

local.cfg

@@ -16,3 +16,12 @@ BOOTSTRAP4.popper_url = "/javascript/popper.js/umd/popper.min.js"
 ANY_JS.DataTables-Bootstrap4.css_url = "/javascript/jquery-datatables/css/dataTables.bootstrap4.min.css"
 ANY_JS.DataTables-Bootstrap4.js_url = "/javascript/jquery-datatables/dataTables.bootstrap4.min.js"
 ANY_JS.DataTables.js_url = "/javascript/jquery-datatables/jquery.dataTables.js"
+COLOUR_PRIMARY = "#007bff"
+COLOUR_SECONDARY = "#6c757d"
+COLOUR_SUCCESS = "#28a745"
+COLOUR_INFO = "#17a2b8"
+COLOUR_WARNING = "#ffc107"
+COLOUR_DANGER = "#dc3545"
+COLOUR_LIGHT = "#f8f9fa"
+COLOUR_DARK = "#343a40"
+SASS_PROCESSOR_INCLUDE_DIRS.0 = "/usr/share/sass/bootstrap"

pyproject.toml

@@ -31,6 +31,9 @@ django-tables2 = "^2.1"
 Pillow = "^6.1"
 django-phonenumber-field = {version = "^3.0", extras = ["phonenumbers"]}
 django-local-settings = {version = "^1.0-alpha.1", allows-prereleases = true}
+django-sass-processor = "^0.7.3"
+libsass = "^0.19.2"
+colour = "^0.1.5"
 
 [tool.poetry.dev-dependencies]
 sphinx = "^2.1"