feat: added dark color scheme

revitron · May 20, 2021 · c807cb4 · c807cb4
1 parent 1cfb4da
commit c807cb4
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 7 deletions.
diff --git a/README.rst b/README.rst
@@ -44,6 +44,7 @@ This theme is highly customizable on both the page level and on a global level.
 .. code:: python
 
     html_theme_options = {
+        'color_scheme': '',
         'canonical_url': '',
         'analytics_id': 'UA-XXXXXXX-1', 
         'style_external_links': False,
@@ -53,11 +54,22 @@ This theme is highly customizable on both the page level and on a global level.
         'includehidden': True,
         'titles_only': False,
         'github_url': '',
-		'logo_mobile': 'demo/static/logo-mobile.svg
+        'logo_mobile': 'demo/static/logo-mobile.svg
     }
 
     html_logo = 'demo/static/logo.svg'
 
+Dark Mode
+=========
+
+To activate the dark color scheme, you can simply add the following option to the ``html_theme_options``:
+
+.. code:: python
+
+    html_theme_options = {
+        'color_scheme': 'dark'
+    }
+
 Adding a Landing Page
 =====================
 
@@ -86,7 +98,7 @@ This theme provides three ``container`` classes to style paragraphs, wrap images
 .. code:: 
 
     .. container:: .large
-	
+    
        A large text block ...
 
     .. container:: .buttons

diff --git a/docs/conf.py b/docs/conf.py
@@ -65,7 +65,8 @@ def is_development_build():
 html_theme_options = {
     'navigation_depth': 5,
     'logo_mobile': 'revitron-ui-mobile.svg',
-    'github_url': 'https://github.com/revitron/revitron'
+    'github_url': 'https://github.com/revitron/revitron',
+	'color_scheme': 'dark'
 }
 
 html_context = {

diff --git a/docs/demo/static/revitron.svg b/docs/demo/static/revitron.svg
diff --git a/revitron_sphinx_theme/default.html b/revitron_sphinx_theme/default.html
@@ -10,7 +10,7 @@
 {%- set sphinx_writer = 'writer-html5' if html5_doctype else 'writer-html4' %}
 
 <!DOCTYPE html>
-<html class="{{ sphinx_writer }}{% block style %}{% endblock %}" lang="{{ lang_attr }}" >
+<html class="{{ sphinx_writer }}{% block style %}{% endblock %} {{ theme_color_scheme }}" lang="{{ lang_attr }}" >
 <head>
 	<meta charset="utf-8">
 	{{ metatags }}

diff --git a/revitron_sphinx_theme/theme.conf b/revitron_sphinx_theme/theme.conf
@@ -13,4 +13,5 @@ includehidden = True
 titles_only =
 style_external_links = False
 github_url =
-logo_mobile = 
+logo_mobile = 
+color_scheme = light
diff --git a/src/sass/_colors.sass b/src/sass/_colors.sass
@@ -36,3 +36,37 @@
 		-webkit-font-smoothing: antialiased !important
 		-moz-osx-font-smoothing: grayscale !important
 
+html.dark
+
+	--hue: 212
+	--sat: 6%
+
+	--bg: hsl(var(--hue), var(--sat), 13.6%)
+	--bg-nav: var(--bg)
+	--bg-nav-current: hsl(var(--hue), var(--sat), 20%)
+	--bg-nav-current-list: hsl(var(--hue), var(--sat), 16.2%)
+	--bg-nav-hover: hsl(var(--hue), var(--sat), 18.5%)
+	--bg-code: hsl(var(--hue), var(--sat), 15.9%)
+	--bg-code-highlight: hsl(var(--hue), var(--sat), 20%)
+	--bg-panel: var(--bg-code)
+
+	--text: hsl(var(--hue), var(--sat), 85%)
+	--link: inherit 
+	--nav: hsl(var(--hue), var(--sat), 51%)
+	--code: hsl(var(--hue), var(--sat), 80%)
+	--headline: var(--text)
+	--nav-current: var(--text)
+
+	--border: hsl(var(--hue), var(--sat), 20%)
+	--muted: hsl(var(--hue), var(--sat), 29.2%)
+	--info-text: var(--text)
+	--info-bg: hsl(var(--hue), var(--sat), 23%)
+	--danger-text: hsl(4, 80%, 68%)
+	--danger-bg: hsl(4, 12%, 19%)
+	--warning-text: hsl(50, 70%, 68%)
+	--warning-bg: hsl(50, 10%, 18%)
+
+	--bg-highlight: hsl(212, 60%, 45%)
+
+	--font-weight-factor: 0.84
+