Skip to content

Commit 6105bb0

Browse files
jchate6jchate6
authored
Merge pull request #1348 from TOMToolkit/1347-add-official-dark-mode-theme
Add optional dark mode
2 parents 55e83fa + d317c41 commit 6105bb0

9 files changed

Lines changed: 208 additions & 36 deletions

File tree

‎docs/_static/customize_templates_doc/darkmode.png‎

89.3 KB
Loading

‎docs/customization/customize_templates.rst‎

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
Customizing TOM Templates
22
-------------------------
3-
43
So you’ve got a TOM up and running, and your homepage looks something
54
like this:
65

@@ -24,13 +23,30 @@ have a project layout that looks something like this:
2423
├── urls.py
2524
└── wsgi.py
2625

27-
We are going to override the html template included with the TOM
28-
Toolkit, ``tom_common/index.html``, so that we can edit some text and
29-
change the image. Overriding and extending templates is `documented
26+
Using Themes
27+
~~~~~~~~~~~~
28+
You can set the color theme for your TOM to "Dark Mode" by setting the `CSS_THEME = 'Dark'` in your ``settings.py``.
29+
If the theme doesn't seem to be working properly, make sure you aren't overriding key components in your
30+
`static/tom_common/css/custom.css` file.
31+
|image2|
32+
33+
Making your own pages
34+
~~~~~~~~~~~~~~~~~~~~~
35+
36+
One very powerful, but more work intensive way to customize your TOM is
37+
to override the html templates included with the TOM
38+
Toolkit. In this example we are going to override the home page, ``tom_common/index.html``, so
39+
that we can edit some text and change the image. Overriding and extending templates is `documented
3040
extensively <https://docs.djangoproject.com/en/2.1/howto/overriding-templates/>`__
3141
on Django’s website and we highly recommend reading these docs if you
3242
plan on customizing your TOM further.
3343

44+
.. note::
45+
46+
You should generally try to avoid overriding entire templates when possible, instead using integration points
47+
(described below) or overriding specific partials. This lets you continue to benefit from maintenance done to these
48+
pages by the TOM Development team without having to continually update your TOM's versions of these templates.
49+
3450
Since the template we want to override is already part of the TOM
3551
Toolkit source code, we can use it as a starting point for our
3652
customized template. In fact, we’ll copy and paste the entire thing from
@@ -127,7 +143,7 @@ alone. Reload your homepage, and you should see something like this:
127143

128144
|image1|
129145

130-
Thats it! You’ve just customized your TOM homepage.
146+
That's it! You’ve just customized your TOM homepage.
131147

132148
Using static files
133149
~~~~~~~~~~~~~~~~~~
@@ -162,14 +178,20 @@ Customize default CSS:
162178
The default styling is mostly based on Bootstrap v4.6.2 (`https://getbootstrap.com/ <https://getbootstrap.com/>`__).
163179
If you ran the tom_setup script, you should have a directory ``static`` at the top level of your project.
164180
Within this folder, find the ``tom_common/css`` directory. In this folder, is a file named ``custom.css``.
165-
Editing this file will allow you to overwrite any of the custom css used at the base level in the TOM Toolkit.
181+
Editing this file will allow you to overwrite any of the css used at the base level in the TOM Toolkit, including the
182+
styling established by TOMToolkit themes such as "Dark Mode".
183+
184+
The TOMToolkit has several built in variables that allow you to establish a theme for your TOM. You can see these in
185+
`root` dictionay in yoyr ``custom.css``. Altering these will change the appearance of large portions of the website.
166186

167187
As an example, let's change the background color from white (#ffffff) to an off-white (#efead6).
188+
Add the following in your ``custom.css`` after the comments:
189+
168190

169191
.. code:: css
170192
171-
body {
172-
background-color: #efead6;
193+
:root {
194+
--theme_primary: #efead6;
173195
}
174196
175197
Once you have added these images to the ``static/tom_common/img`` directory and reloaded the page (you may need to
@@ -255,3 +277,4 @@ for more details.
255277

256278
.. |image0| image:: /_static/customize_templates_doc/tomhomepagenew.png
257279
.. |image1| image:: /_static/customize_templates_doc/tomhomepagemod.png
280+
.. |image2| image:: /_static/customize_templates_doc/darkmode.png

‎tom_common/static/tom_common/css/dark.css‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
/*!
2+
* Adapted from MOP CSS v5.2.16
3+
*/
4+
5+
:root {
6+
--primary: #007bff;
7+
--secondary: #6c757d;
8+
--success: #28a745;
9+
--info: #17a2b8;
10+
--warning: #ffc107;
11+
--danger: #dc3545;
12+
--light: #f8f9fa;
13+
--dark: #343a40;
14+
--theme_primary: #313232;
15+
--theme_text_primary: #fff;
16+
--theme_accent1: #191c17;
17+
--theme_accent2: #272626;
18+
--theme_accent3: #7f837b;
19+
--theme_link_text: #8eb8e6;
20+
--theme_link_hover: #00effe;
21+
--theme_link_active: #fead00;
22+
}

‎tom_common/static/tom_common/css/main.css‎

Lines changed: 122 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,83 @@
1+
:root {
2+
--primary: #007bff;
3+
--secondary: #6c757d;
4+
--success: #28a745;
5+
--info: #17a2b8;
6+
--warning: #ffc107;
7+
--danger: #dc3545;
8+
--light: #f8f9fa;
9+
--dark: #343a40;
10+
--theme_primary: #fff;
11+
--theme_text_primary: #000;
12+
--theme_accent1: #fff;
13+
--theme_accent2: rgba(0, 0, 0, .03);
14+
--theme_accent3: #fff;
15+
--theme_link_text: #007bff;
16+
--theme_link_hover: #0056b3;
17+
--theme_link_active: #0056b3;
18+
}
19+
120
body {
221
padding-top: 5rem;
22+
background-color: var(--theme_primary);
23+
color: var(--theme_text_primary);
324
}
425

526
.content {
627
padding: 3rem 1.5rem;
728
}
829

9-
.navbar-brand > img {
10-
max-height: 25px;
30+
.card {
31+
background-color: var(--theme_accent1);
32+
color: var(--theme_text_primary);
1133
}
1234

13-
.input-group-text {
14-
font-family: monospace;
35+
.card-header {
36+
background-color: var(--theme_accent2);
37+
}
38+
39+
.media {
40+
background-color: var(--theme_accent2);
41+
}
42+
43+
/* Set Navbar themes */
44+
.navbar {
45+
background-color: var(--theme_accent1);
46+
color: var(--theme_text_primary);
47+
}
48+
49+
.navbar-brand > img {
50+
max-height: 25px;
1551
}
1652

1753
.nav-item {
1854
cursor: pointer;
1955
}
2056

57+
.dropdown-menu {
58+
background-color: var(--theme_accent3);
59+
}
60+
61+
.dropdown-item {
62+
color: var(--theme_text_primary);
63+
background-color: var(--theme_accent3);
64+
}
65+
66+
.nav-link {
67+
color: var(--theme_text_primary);
68+
}
69+
70+
.nav-link:active, .nav-item:active {
71+
color: var(--theme_text_primary);
72+
font-weight: 700;
73+
text-decoration: underline;
74+
}
75+
76+
.input-group-text {
77+
font-family: monospace;
78+
color: var(--theme_text_primary);
79+
}
80+
2181
#login-buttons > li {
2282
margin: 0 2px 0 2px;
2383
}
@@ -28,12 +88,53 @@ textarea {
2888
overflow-x: hidden;
2989
}
3090

91+
/* Set link themes */
92+
a {
93+
color: var(--theme_link_text);
94+
}
95+
96+
a:hover {
97+
color: var(--theme_link_hover);
98+
}
99+
100+
a:active {
101+
color: var(--theme_link_active);
102+
font-weight: 700;
103+
text-decoration: underline;
104+
}
105+
106+
/* Set Table Themes */
107+
table {
108+
background-color: var(--theme_accent1);
109+
border: none;
110+
border: 1pt solid var(--theme_accent1);
111+
border-radius: 10px;
112+
}
113+
114+
thead {
115+
color: var(--theme_text_primary);
116+
border: 1pt solid var(--theme_accent1);
117+
}
118+
119+
tbody {
120+
border: 1pt solid var(--theme_accent1);
121+
}
122+
123+
tr {
124+
border: 1pt solid var(--theme_accent1);
125+
}
126+
127+
td, th {
128+
border: 1pt solid var(--theme_accent2);
129+
background-color: var(--theme_accent1);
130+
color: var(--theme_text_primary);
131+
}
132+
31133
/* Create copy button class */
32134
.copy-button {
33135
opacity: 0.75; /* Make it slightly transparent */
34136
cursor: pointer; /* change cursor on hover */
35137
font-size: x-small; /* smaller font */
36-
color: var(--secondary); /* secondary color */
37138
padding: 0.25rem;
38139
position: absolute;
39140
top: 0.1rem; /* set close to the top of container */
@@ -95,3 +196,19 @@ textarea {
95196
.pointer {
96197
cursor: pointer;
97198
}
199+
200+
/* Set Pagination Theme */
201+
.pagination {
202+
background-color: var(--theme_accent1);
203+
color: var(--theme_text_primary);
204+
}
205+
206+
.pagination a {
207+
background-color: var(--theme_accent2);
208+
color: var(--theme_text_primary);
209+
}
210+
211+
.pagination a:hover {
212+
background-color: var(--theme_accent3);
213+
color: var(--theme_text_primary);
214+
}

‎tom_common/templates/tom_common/base.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,10 @@
1010
{% bootstrap_css %}
1111
<link rel="stylesheet" href="{% static 'font-awesome-4.7.0/css/font-awesome.min.css' %}">
1212
<link rel="stylesheet" href="{% static 'tom_common/css/main.css' %}">
13+
{% get_theme as theme %}
14+
{% if theme %}
15+
<link rel="stylesheet" href="{% static theme %}">
16+
{% endif %}
1317
<link rel="stylesheet" href="{% static 'tom_common/css/custom.css' %}">
1418
{% block additional_css %}
1519
{% endblock %}

‎tom_common/templates/tom_common/navbar_content.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,16 @@
1818
<a class="nav-link dropdown-toggle" data-toggle="dropdown">Observations</a>
1919
<ul class="dropdown-menu">
2020
<li class="nav-item {% if request.resolver_match.namespace == 'observations' %}active{% endif %}">
21-
<a class="nav-link" href="{% url 'tom_observations:list' %}" style="color:black">Observations</a>
21+
<a class="dropdown-item" href="{% url 'tom_observations:list' %}" >Observations</a>
2222
</li>
2323
<li class="nav-item {% if request.resolver_match.namespace == 'observations' %}active{% endif %}">
24-
<a class="nav-link" href="{% url 'tom_observations:group-list' %}" style="color:black">Observation Groups</a>
24+
<a class="dropdown-item" href="{% url 'tom_observations:group-list' %}" >Observation Groups</a>
2525
</li>
2626
<li class="nav-item {% if request.resolver_match.namespace == 'observations' %}active{% endif %}">
27-
<a class="nav-link" href="{% url 'tom_observations:template-list' %}" style="color:black">Observation Templates</a>
27+
<a class="dropdown-item" href="{% url 'tom_observations:template-list' %}" >Observation Templates</a>
2828
</li>
2929
<li class="nav-item {% if request.resolver_match.namespace == 'observations' %}active{% endif %}">
30-
<a class="nav-link" href="{% url 'tom_observations:facility-status' %}" style="color:black">Facility Status</a>
30+
<a class="dropdown-item" href="{% url 'tom_observations:facility-status' %}" >Facility Status</a>
3131
</li>
3232
</ul>
3333
</li>

‎tom_common/templatetags/tom_common_extras.py‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,3 +186,12 @@ def show_individual_app_partial(context, app_partial_data):
186186
context[item] = app_partial_data['context'][item]
187187
context['app_partial'] = app_partial_data['partial']
188188
return context
189+
190+
191+
@register.simple_tag
192+
def get_theme():
193+
"""Check for theme in settings.py"""
194+
theme = getattr(settings, 'CSS_THEME', None)
195+
if theme is not None:
196+
return f'tom_common/css/{theme.lower()}.css'
197+
return None

‎tom_setup/templates/tom_setup/css.tmpl‎

Lines changed: 13 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
/*!
22
* Adapted from Bootstrap v4.6.2 (https://getbootstrap.com/)
3-
* Set defaults for custom css
3+
* Gives example for custom css.
4+
* Remove comment to implement.
45
*/
6+
7+
/* These are possible color variables to set themes for your TOM
58
:root {
69
--primary: #007bff;
710
--secondary: #6c757d;
@@ -11,22 +14,13 @@
1114
--danger: #dc3545;
1215
--light: #f8f9fa;
1316
--dark: #343a40;
17+
--theme_primary: #fff;
18+
--theme_text_primary: #000;
19+
--theme_accent1: #fff;
20+
--theme_accent2: rgba(0, 0, 0, .03);
21+
--theme_accent3: #fff;
22+
--theme_link_text: #007bff;
23+
--theme_link_hover: #0056b3;
24+
--theme_link_active: #0056b3;
1425
}
15-
16-
body {
17-
font-size: 1rem;
18-
font-weight: 400;
19-
line-height: 1.5;
20-
color: #212529;
21-
background-color: #fff;
22-
}
23-
24-
a {
25-
color: #007bff;
26-
background-color: transparent;
27-
}
28-
29-
a:hover {
30-
color: #0056b3;
31-
text-decoration: underline;
32-
}
26+
*/

‎tom_setup/templates/tom_setup/settings.tmpl‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@ ALLOWED_HOSTS = []
3535

3636
TOM_NAME = '{{ PROJECT_NAME }}'
3737

38+
# Use built-in css theme to change the look of your TOM. (Valid themes = [Dark,])
39+
# CSS_THEME = 'Dark'
40+
3841
INSTALLED_APPS = [
3942
'django.contrib.admin',
4043
'django.contrib.auth',

0 commit comments

Comments
 (0)