diff --git a/app/static/css/editor.css b/app/static/css/editor.css
index 77eeaf3..16b0ac0 100644
--- a/app/static/css/editor.css
+++ b/app/static/css/editor.css
@@ -5,16 +5,16 @@
 }
 .editor button {
     height: 25px; margin: 0 0px; padding: 0 3px;
-    border: 1px solid #00000000; border-radius: 2px;
+    border: var(--border); border-radius: 2px;
     cursor: pointer;
-    background: #ffffff;
+    background: var(--background);
 }
 .editor button > img {
     opacity: .7;
 }
 .editor button:hover,
 .editor button:focus {
-    border-color: #000000ff;
+    border: var(--border-focused);
 }
 .editor button:hover > img,
 .editor button:focus > img {
diff --git a/app/static/css/flash.css b/app/static/css/flash.css
index e66a1a1..c865bbe 100644
--- a/app/static/css/flash.css
+++ b/app/static/css/flash.css
@@ -6,40 +6,38 @@
 	position: fixed; left: 15%;
 	display: flex; align-items: center;
 	width: 70%; z-index: 10;
-	font-family: NotoSans; font-size: 14px; color: #212121;
-	background: #ffffff;
-	border-bottom: 5px solid #4caf50;
-	border-radius: 1px; box-shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
+	font-family: NotoSans; font-size: 14px; color: var(--text);
+	background: var(--background);
+	border-bottom: 5px solid var(--info);
+	border-radius: 1px; box-shadow: var(--shadow);
 	transition: opacity .15s ease;
 	transition: top .2s ease;
 }
 .flash.info {
-	border-color: #2e7aec;
+	border-color: var(--info);
 }
 .flash.ok {
-	border-color: #4caf50;
+	border-color: var(--ok);
 }
 .flash.warning {
-	border-color: #fbbc26;
+	border-color: var(--warn);
 }
 .flash.error {
-	border-color: #f44336;
+	border-color: var(--error);
 }
 .flash span {
 	flex-grow: 1; margin: 15px 10px 10px 0;
 }
-.flash input[type="button"] {
-	margin: 3px 30px 0 0; padding: 10px 15px;
-	border: none;
-	background: rgba(0, 0, 0, 0); color: #727272;
-}
-.flash input[type="button"]:hover {
-	background: rgba(0, 0, 0, .1);
-}
-.flash input[type="button"]:focus {
-	background: rgba(0, 0, 0, .2);
-}
-
 .flash svg {
 	margin: 15px 20px 10px 30px;
 }
+
+.flash input[type="button"] {
+	margin: 3px 30px 0 0; padding: 10px 15px;
+	border: none;
+	background: var(--btn-bg); color: var(--btn-text);
+}
+.flash input[type="button"]:hover,
+.flash input[type="button"]:focus {
+	background: var(--btn-bg-active);
+}
diff --git a/app/static/css/footer.css b/app/static/css/footer.css
index 153c068..9292ac1 100644
--- a/app/static/css/footer.css
+++ b/app/static/css/footer.css
@@ -3,11 +3,11 @@
 */
 
 footer {
-	margin: 20px 10% 5px 10%; padding: 10px 0;
+	margin: 20px 0 0 0; padding: 10px 10%;
 	text-align: center; font-size: 11px; font-style: italic;
-	color: #a0a0a0;
-	border-top: 1px solid rgba(0, 0, 0, .1);
+	background: var(--background); color: var(--text);
+	border-top: var(--border);
 }
 footer p {
 	margin: 3px 0;
-}
\ No newline at end of file
+}
diff --git a/app/static/css/form.css b/app/static/css/form.css
index ddd0fd4..8fe0db7 100644
--- a/app/static/css/form.css
+++ b/app/static/css/form.css
@@ -3,7 +3,7 @@
 }
 
 .form .avatar + input[type="file"] {
-  margin: 16px 0 0 0;
+	margin: 16px 0 0 0;
 	vertical-align: middle;
 }
 
@@ -29,7 +29,8 @@
 .trophies-panel > div {
 	display: block;
 	width: 100%; padding: 6px 8px;
-	border: 1px solid #c8c8c8;
+	background: var(--background); color: var(--text);
+	border: var(--border);
 
 	/* Transitions when resizing with the mouse produces apparent lag */
 	transition: all .15s ease, width 0s, height 0s;
@@ -40,8 +41,7 @@
 .form input[type='password']:focus,
 .form input[type='search']:focus,
 .form textarea:focus {
-	border-color: #7cade0;
-  box-shadow: 0 0 0 3px rgba(87, 143, 228, 0.5);
+	border-color: var(--border-focused);
 }
 
 .form textarea {
@@ -60,20 +60,19 @@
 }
 
 .form form .msgerror {
-	color: red;
+	color: var(--error);
 	font-weight: 400;
 	margin-top: 5px;
 }
 
 .form .desc {
 	font-size: 80%;
-	color: gray;
+	opacity: .75;
 }
 
 .form hr {
-	color: white;
 	height: 3px;
-	border: 0 solid #b0b0b0;
+	border: var(--hr-border);
 	border-width: 1px 0;
 	margin: 24px 0;
 }
diff --git a/app/static/css/global.css b/app/static/css/global.css
index e449513..e994e2f 100644
--- a/app/static/css/global.css
+++ b/app/static/css/global.css
@@ -1,9 +1,9 @@
 /* Fonts */
 
-@font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); font-display: swap; }
+/* @font-face { font-family: NotoSans; src: url(../fonts/noto_sans.ttf); font-display: swap; }
 @font-face { font-family: Twemoji; src: url(../fonts/TwitterColorEmoji.ttf); font-display: swap; }
 @font-face { font-family: Cantarell; font-weight: normal; src: url(../fonts/Cantarell-Regular.otf); font-display: swap; }
-@font-face { font-family: Cantarell; font-weight: bold; src: url(../fonts/Cantarell-Bold.otf); font-display: swap; }
+@font-face { font-family: Cantarell; font-weight: bold; src: url(../fonts/Cantarell-Bold.otf); font-display: swap; } */
 
 /* Whole page */
 
@@ -16,7 +16,7 @@
 
 body {
 	margin: 0;
-	background: #ffffff; color: #000000;
+	background: var(--background); color: var(--text);
 	font-family: Twemoji, 'DejaVu Sans', sans-serif;
 }
 
@@ -24,7 +24,7 @@ body {
 
 a {
 	text-decoration: none;
-  color: #c61a1a;
+	color: var(--links);
 }
 a:hover {
 	text-decoration: underline;
@@ -97,6 +97,7 @@ input[type="submit"]:hover,
   margin: -1px;
 }
 
+
 @media screen and (max-width: 1499px) {
   .profile-avatar {
   	width: 96px;
@@ -126,47 +127,34 @@ input[type="submit"]:hover,
 	display: flex;
 }
 
-.bg-green,
-.bg-green {
-	background: #149641;
-	color: #ffffff;
+.bg-ok,
+.bg-ok {
+	background: var(--ok);
+	color: var(--ok-text);
 }
-.bg-green:hover,
-.bg-green:focus,
-.bg-green:active {
-	background: #0f7331;
+.bg-ok:hover,
+.bg-ok:focus,
+.bg-ok:active {
+	background: var(--ok-active);
 }
 
-.bg-red,
-.bg-red {
-	background: #d23a2f;
-	color: #ffffff;
+.bg-error,
+.bg-error {
+	background: var(--error);
+	color: var(--error-text);
 }
-.bg-red:hover,
-.bg-red:focus,
-.bg-red:active {
-	background: #b32a20;
+.bg-error:hover,
+.bg-error:focus,
+.bg-error:active {
+	background: var(--error-active);
 }
 
-.bg-orange {
-	background: #f59f25;
-	color: #ffffff;
+.bg-warn {
+	background: var(--warn);
+	color: var(--warn-text);
 }
-.bg-orange:hover,
-.bg-orange:focus,
-.bg-orange:active {
-	background: #ea9720;
-}
-
-.bg-white,
-.bg-white {
-	border: 1px solid #e5e5e5;
-	background: #ffffff;
-	color: #000000;
-}
-.bg-white:hover,
-.bg-white:focus,
-.bg-white:active {
-	background: #f0f0f0;
-	border-color: #e3e3e3;
+.bg-warn:hover,
+.bg-warn:focus,
+.bg-warn:active {
+	background: var(--warn-active);
 }
diff --git a/app/static/css/header.css b/app/static/css/header.css
index 126ba0c..a75f8b4 100644
--- a/app/static/css/header.css
+++ b/app/static/css/header.css
@@ -4,7 +4,7 @@
 
 header {
 	height: 50px; margin: 0; padding: 0 16px;
-	background: #f4f4f6; border-bottom: 1px solid #d0d0d0;
+	background: var(--background); border-bottom: var(--border);
 
 	display: flex; align-items: center; justify-content: space-between;
 	flex-flow: row wrap;
@@ -33,7 +33,6 @@ header .title a {
 }
 header .title h1 {
 	font-family: Cantarell; font-weight: bold; font-size: 18px;
-	color: #181818;
 	display: inline;
 }
 
@@ -49,7 +48,7 @@ header svg {
 	transition: .15s ease;
 }
 header a:hover > svg,  header a:focus > svg {
-	fill: black;
+	fill: var(--text);
 }
 header a {
 	fill: #363636;
@@ -66,18 +65,20 @@ header .form {
 header .form input[type="search"] {
 	display: inline-block; width: 250px;
 	padding: 5px 35px 5px 10px;
-	border-color: #d8d8d8;
 }
 header .form input[type="search"] ~ a {
 	position: relative; left: -33px;
+	opacity: .7;
 }
 header .form input[type="search"] ~ a > svg > path {
-	fill: #cccccc; transition: .15s ease;
+	fill: var(--text);
 }
-header .form input[type="search"]:focus ~ a > svg > path {
-	fill: #333333;
+header .form input[type="search"] ~ a:hover,
+header .form input[type="search"]:focus ~ a {
+	opacity: 1;
 }
 
+
 #spotlight {
 	margin-left: 16px;
 }
diff --git a/app/static/css/light.css b/app/static/css/light.css
index ef1020a..a3fbf59 100644
--- a/app/static/css/light.css
+++ b/app/static/css/light.css
@@ -119,7 +119,7 @@
 	display: block;
 	margin: 5px 15px; padding: 5px 10px;
 	font-size: 14px;
-	transition: background .15s ease;
+	transition: .15s ease;
 }
 #menu form label {
 	float: left; margin-right: 10px;
diff --git a/app/static/css/navbar.css b/app/static/css/navbar.css
index a01be2f..d27ec9b 100644
--- a/app/static/css/navbar.css
+++ b/app/static/css/navbar.css
@@ -1,6 +1,5 @@
 nav a {
-	color: #ffffff;
-	opacity: 0.75;
+	opacity: .8;
 	cursor: pointer;
 }
 nav a:hover,
@@ -18,7 +17,7 @@ nav a:focus {
 	height: 100%; overflow-y: auto;
 	margin: 0; padding: 0;
 	text-indent: 0;
-	background: #22292c; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
+	background: var(--background); box-shadow: var(--shadow);
 }
 
 #logo {
@@ -26,9 +25,7 @@ nav a:focus {
 	width: 100%;
 	margin-bottom: 10px;
 	opacity: 1;
-	background: -moz-linear-gradient(top, #bf1c11, #ba1203);
-	background: -webkit-linear-gradient(top, #bf1c11, #ba1203);
-	background: #bf1c11;
+	background: var(--logo-bg);
 	transition: .15s ease;
 }
 #logo img {
@@ -39,22 +36,23 @@ nav a:focus {
 }
 #logo:hover,
 #logo:focus {
-	background: #d72411;
+	background: var(--logo-active);
 }
 #logo:hover img,
 #logo:focus img {
-	filter: drop-shadow(0 0 2px rgba(0, 0, 0, .7));
+	filter: drop-shadow(var(--logo-shadow));
 }
 
 #light-menu li {
 	width: 100%;
-	color: #ffffff;
+	color: var(--text);
 }
 #light-menu li > a {
 	display: flex; flex-direction: column; flex-grow: 0;
 	align-items: center; justify-content: center;
 	width: 100%; height: 100%;
 	margin: 20px 0;
+	color: var(--text);
 	transition: opacity .15s ease; /* because Chrome sucks */
 }
 
@@ -62,6 +60,10 @@ nav a:focus {
 	display: block; width: 25px; flex-shrink: 0; flex-grow: 0;
 	margin: 0 7px;
 }
+#light-menu li > a > svg > path {
+	fill: var(--icons);
+}
+
 #light-menu li div {
 	/*flex-grow: 1;*/
 }
@@ -72,7 +74,7 @@ nav a:focus {
 	position: fixed; z-index: 5;
 	left: -190px; width: 300px; /* default: left-to-right animation */
 	height: 100%; overflow-x: hidden; overflow-y: auto;
-	background: #1c2124; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
+	background: var(--background); box-shadow: var(--shadow);
 	transition: .15s ease;
 }
 #menu.opened {
@@ -100,7 +102,7 @@ nav a:focus {
 #menu h2 {
 	margin: 0 0 20px 0;
 	font-family: Cantarell; font-weight: bold; font-size: 18px;
-	color: #ffffff;
+	color: var(--text);
 	display: flex; align-items: center;
 }
 #menu h2 a {
@@ -121,7 +123,7 @@ nav a:focus {
 #menu h3 {
 	margin: 16px 0;
 	font-family: Cantarell; font-weight: bold; font-size: 15px;
-	color: #ffffff;
+	color: var(--text);
 }
 #menu hr {
 	margin: 15px 0;
@@ -135,11 +137,9 @@ nav a:focus {
 #menu a,
 #menu li {
 	display: block; margin: 10px 0;
+	color: var(--text);
 	transition: opacity .15s ease;
 }
-#menu li {
-	color: #b8b8b8;
-}
 #menu li > a {
 	display: inline;
 	margin: 0; font-style: normal;
@@ -161,19 +161,17 @@ nav a:focus {
 #menu form input[type="password"] {
 	margin: 8px 0; padding: 5px 2%;
 	font-size: 14px; color: inherit;
-	border: none; border-color: #141719;
-	border-radius: 2px;
+	border: var(--input-border);
+	background: var(--input-bg); color: var(--input-text); opacity: .8;
 }
 #menu form input[type="text"]:focus,
 #menu form input[type="password"]:focus {
-	background: #ffffff;
-  box-shadow: 0 0 0 4px rgba(87, 143, 228, 0.65);
-	border-color: #325871;
+	opacity: 1;
 }
 #menu form input[type="submit"] {
 	width: 100%;
 	margin: 8px 0 5px 0;
 }
 #menu form label {
-	font-size: 13px; color: #FFFFFF; opacity: .7;
+	font-size: 13px; color: var(--text); opacity: .8;
 }
diff --git a/app/static/css/theme.css b/app/static/css/theme.css
new file mode 100644
index 0000000..dd79de1
--- /dev/null
+++ b/app/static/css/theme.css
@@ -0,0 +1,90 @@
+/* Some colors, variables etc. to be used as theme */
+
+:root {
+    --background: #ffffff;
+    --text: #000000;
+
+    --links: #c61a1a;
+
+    --ok: #149641;
+    --ok-text: #ffffff;
+    --ok-active: #0f7331;
+
+    --warn: #f59f25;
+    --warn-text: #ffffff;
+    --warn-active: #ea9720;
+
+    --error: #d23a2f;
+    --error-text: #ffffff;
+    --error-active: #b32a20;
+
+    --info: #2e7aec;
+    --info-text: #ffffff;
+    --info-active: #215ab0;
+
+    --hr-border: 1px solid #b0b0b0;
+}
+
+.form {
+    --background: #ffffff;
+    --text: #000000;
+    --border: 1px solid #c8c8c8;
+    --border-focused: #7cade0;
+}
+
+.editor button {
+    --background: #ffffff;
+    --text: #000000;
+    --border: 1px solid rgba(0, 0, 0, 0);
+    --border-focused: 1px solid rgba(0, 0, 0, .5);
+}
+
+#light-menu {
+    --background: #22292c;
+    --text: #ffffff;
+    --icons: #ffffff;
+    --shadow: 0 0 4px rgba(0, 0, 0, 0.3);
+
+    --logo-bg: #bf1c11;
+    --logo-shadow: 0 0 2px rgba(0, 0, 0, .7);
+    --logo-active: #d72411;
+}
+
+#menu {
+    --background: #1c2124;
+    --text: #ffffff;
+    --icons: #ffffff;
+    --shadow: 0 0 8px rgba(0, 0, 0, 0.3);
+
+    --input-bg: #22292c;
+    --input-text: #ffffff;
+    --input-border: 1px solid #474747;
+}
+
+header {
+    --background: #f4f4f6;
+    --text: #000000;
+    --border: 1px solid #d0d0d0;
+}
+
+footer {
+    --background: #1c2124;
+    --text: #a0a0a0;
+    --border: #d0d0d0;
+}
+
+.flash {
+    --background: #ffffff;
+    --text: #212121;
+    --shadow: 0 1px 12px rgba(0, 0, 0, 0.3);
+
+    /* Uncomment to inherit :root values
+    --ok: #149641;
+    --warn: #f59f25;
+    --error: #d23a2f;
+    --info: #2e7aec; */
+
+    --btn-bg: rgba(0, 0, 0, 0);
+    --btn-text: #000000;
+    --btn-bg-active: rgba(0, 0, 0, .15);
+}
diff --git a/app/templates/account/account.html b/app/templates/account/account.html
index d3f8cc3..0f92345 100644
--- a/app/templates/account/account.html
+++ b/app/templates/account/account.html
@@ -81,11 +81,11 @@
 			<span class="msgerror">{{ error }}</span>
 			{% endfor %}
 		</div>
-		<div>{{ form.submit(class_="bg-green") }}</div>
+		<div>{{ form.submit(class_="bg-ok") }}</div>
 	</form>
 
 	<h2 style="margin-top:30px;">Supprimer le compte</h2>
-	<a href="{{ url_for('delete_account') }}" class="button bg-red">Supprimer le compte</a>
+	<a href="{{ url_for('delete_account') }}" class="button bg-error">Supprimer le compte</a>
 
 </section>
 {% endblock %}
diff --git a/app/templates/account/delete_account.html b/app/templates/account/delete_account.html
index b4afa7f..5ad5260 100644
--- a/app/templates/account/delete_account.html
+++ b/app/templates/account/delete_account.html
@@ -20,7 +20,7 @@
 			<span class="msgerror">{{ error }}</span>
 			{% endfor %}
 		</div>
-		<div>{{ del_form.submit(class_="bg-red") }}</div>
+		<div>{{ del_form.submit(class_="bg-error") }}</div>
 	</form>
 </section>
 {% endblock %}
diff --git a/app/templates/account/login.html b/app/templates/account/login.html
index 758400d..f73f83a 100644
--- a/app/templates/account/login.html
+++ b/app/templates/account/login.html
@@ -20,7 +20,7 @@
 			{% endfor %}
 		</p>
 		<p>{{ form.remember_me() }} {{ form.remember_me.label }}</p>
-		<p>{{ form.submit(class_="bg-green") }}</p>
+		<p>{{ form.submit(class_="bg-ok") }}</p>
 	</form>
 	<p>Pas encore de compte ? <a href="{{ url_for('register') }}">Créé-en un !</a></p>
 </form>
diff --git a/app/templates/account/register.html b/app/templates/account/register.html
index 556ef4d..5d1ca31 100644
--- a/app/templates/account/register.html
+++ b/app/templates/account/register.html
@@ -50,7 +50,7 @@
 			<span class="msgerror">{{ error }}</span>
 			{% endfor %}
 		</div>
-		<div>{{ form.submit(class_="bg-green") }}</div>
+		<div>{{ form.submit(class_="bg-ok") }}</div>
 	</form>
 </div>
 </section>
diff --git a/app/templates/admin/delete_account.html b/app/templates/admin/delete_account.html
index 1f3ee83..6df1cd7 100644
--- a/app/templates/admin/delete_account.html
+++ b/app/templates/admin/delete_account.html
@@ -24,7 +24,7 @@
 			<span class=msgerror>{{ error }}</span>
 			{% endfor %}
 		</div>
-		<div>{{ del_form.submit(class_="bg-red") }}</div>
+		<div>{{ del_form.submit(class_="bg-error") }}</div>
 	</form>
 </section>
 {% endblock %}
diff --git a/app/templates/admin/delete_trophy.html b/app/templates/admin/delete_trophy.html
index 1ae2813..9fdde33 100644
--- a/app/templates/admin/delete_trophy.html
+++ b/app/templates/admin/delete_trophy.html
@@ -22,7 +22,7 @@
 			<span class=msgerror>{{ error }}</span>
 			{% endfor %}
 		</div>
-		<div>{{ del_form.submit(class_="bg-red") }}</div>
+		<div>{{ del_form.submit(class_="bg-error") }}</div>
 	</form>
 </section>
 {% endblock %}
diff --git a/app/templates/admin/edit_account.html b/app/templates/admin/edit_account.html
index 783857c..e824093 100644
--- a/app/templates/admin/edit_account.html
+++ b/app/templates/admin/edit_account.html
@@ -91,7 +91,7 @@
 			<span class="msgerror">{{ error }}</span>
 			{% endfor %}
 		</div>
-		<div>{{ form.submit(class_="bg-green") }}</div>
+		<div>{{ form.submit(class_="bg-ok") }}</div>
 	</form>
 
 	<hr>
@@ -110,7 +110,7 @@
 			{% endif %}
 			{% endfor %}
 		</div>
-		<div>{{ trophy_form.submit(class_="bg-green") }}</div>
+		<div>{{ trophy_form.submit(class_="bg-ok") }}</div>
 	</form>
 
 	<hr>
@@ -129,13 +129,13 @@
 			{% endif %}
 			{% endfor %}
 		</div>
-		<div>{{ group_form.submit(class_="bg-green") }}</div>
+		<div>{{ group_form.submit(class_="bg-ok") }}</div>
 	</form>
 
 	<hr>
 
 	<h2 style="margin-top:30px;">Supprimer le compte</h2>
-	<a href="{{ url_for('adm_delete_account', user_id=user.id) }}" class="button bg-red">Supprimer le compte</a>
+	<a href="{{ url_for('adm_delete_account', user_id=user.id) }}" class="button bg-error">Supprimer le compte</a>
 
 </section>
 {% endblock %}
diff --git a/app/templates/admin/edit_trophy.html b/app/templates/admin/edit_trophy.html
index c6b197d..d76a84e 100644
--- a/app/templates/admin/edit_trophy.html
+++ b/app/templates/admin/edit_trophy.html
@@ -33,6 +33,6 @@
 			<span class="msgerror">{{ error }}</span>
 			{% endfor %}
 		</div>
-		<div>{{ form.submit(class_="bg-green") }}</div>
+		<div>{{ form.submit(class_="bg-ok") }}</div>
 </section>
 {% endblock %}
diff --git a/app/templates/admin/trophies.html b/app/templates/admin/trophies.html
index 19e6cc1..021248f 100644
--- a/app/templates/admin/trophies.html
+++ b/app/templates/admin/trophies.html
@@ -60,6 +60,6 @@
 			<span class="msgerror">{{ error }}</span>
 			{% endfor %}
 		</div>
-		<div>{{ form.submit(class_="bg-green") }}</div>
+		<div>{{ form.submit(class_="bg-ok") }}</div>
 </section>
 {% endblock %}
diff --git a/app/templates/base/base.html b/app/templates/base/base.html
index eec51bb..2cfa12e 100644
--- a/app/templates/base/base.html
+++ b/app/templates/base/base.html
@@ -13,7 +13,7 @@
 
 		{% block content %}
 		{% endblock %}
-		
+
 		{% include "base/footer.html" %}
 	</div>
 
diff --git a/app/templates/base/header.html b/app/templates/base/header.html
index 9036196..46d25a0 100644
--- a/app/templates/base/header.html
+++ b/app/templates/base/header.html
@@ -3,11 +3,11 @@
 	<input type="search" name="q" id="q" placeholder="{{search_form.label}}" />
 	<a role=button onclick="this.parentNode.submit();" href=#>
 		<svg viewBox="0 0 24 24">
-			<path fill="#adb0b4"d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path>
+			<path d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z"></path>
 		</svg>
 	</a>
 </form>
 
 <div id="spotlight">
-	<a href="#" class="button bg-red">Jeu du mois : février 2019</a>
+	<a href="#" class="button bg-error">Jeu du mois : février 2019</a>
 </div>
diff --git a/app/templates/base/navbar.html b/app/templates/base/navbar.html
index 9c591c6..42c12f2 100644
--- a/app/templates/base/navbar.html
+++ b/app/templates/base/navbar.html
@@ -11,7 +11,7 @@
 			<a href="{{ url_for('login') }}" role="button" label="Compte" tabindex="0">
 			{% endif %}
 				<svg viewBox="0 0 24 24">
-					<path fill="#ffffff" d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path>
+					<path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z"></path>
 				</svg>
 				<div>Compte</div>
 			</a>
@@ -20,7 +20,7 @@
 		<li>
 			<a role="button" label="Actualités" tabindex="0">
 				<svg viewBox="0 0 24 24">
-					<path fill="#ffffff" d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z"></path>
+					<path d="M20,11H4V8H20M20,15H13V13H20M20,19H13V17H20M11,19H4V13H11M20.33,4.67L18.67,3L17,4.67L15.33,3L13.67,4.67L12,3L10.33,4.67L8.67,3L7,4.67L5.33,3L3.67,4.67L2,3V19A2,2 0 0,0 4,21H20A2,2 0 0,0 22,19V3L20.33,4.67Z"></path>
 				</svg>
 				<div>Actualités</div>
 			</a>
@@ -29,7 +29,7 @@
 		<li>
 			<a href="{{ url_for('forum_index') }}" role="button" label="Forum" tabindex="0">
 				<svg viewBox="0 0 24 24">
-					<path fill="#ffffff" d="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z"></path>
+					<path d="M17,12V3A1,1 0 0,0 16,2H3A1,1 0 0,0 2,3V17L6,13H16A1,1 0 0,0 17,12M21,6H19V15H6V17A1,1 0 0,0 7,18H18L22,22V7A1,1 0 0,0 21,6Z"></path>
 				</svg>
 				<div>Forum</div>
 			</a>
@@ -38,7 +38,7 @@
 		<li>
 			<a role="button" label="Programmes" tabindex="0">
 				<svg viewBox="0 0 24 24">
-					<path fill="#ffffff" d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"></path>
+					<path d="M8,3A2,2 0 0,0 6,5V9A2,2 0 0,1 4,11H3V13H4A2,2 0 0,1 6,15V19A2,2 0 0,0 8,21H10V19H8V14A2,2 0 0,0 6,12A2,2 0 0,0 8,10V5H10V3M16,3A2,2 0 0,1 18,5V9A2,2 0 0,0 20,11H21V13H20A2,2 0 0,0 18,15V19A2,2 0 0,1 16,21H14V19H16V14A2,2 0 0,1 18,12A2,2 0 0,1 16,10V5H14V3H16Z"></path>
 				</svg>
 				<div>Programmes</div>
 			</a>
@@ -47,7 +47,7 @@
 		<li>
 			<a role="button" label="Tutoriels" tabindex="0">
 				<svg viewBox="0 0 24 24">
-					<path fill="#ffffff" d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"></path>
+					<path d="M12,3L1,9L12,15L21,10.09V17H23V9M5,13.18V17.18L12,21L19,17.18V13.18L12,17L5,13.18Z"></path>
 				</svg>
 				<div>Tutoriels</div>
 			</a>
@@ -56,7 +56,7 @@
 		<li>
 			<a role="button" label="Sprites" tabindex="0">
 				<svg viewBox="0 0 24 24">
-					<path fill="#ffffff" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z"></path>
+					<path d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z"></path>
 				</svg>
 				<div>Sprites</div>
 			</a>
@@ -65,7 +65,7 @@
 		<li>
 			<a href="{{ url_for('tools') }}" role="button" label="Outils" tabindex="0">
 				<svg viewBox="0 0 24 24">
-					<path fill="#ffffff" d="M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z"></path>
+					<path d="M22.7,19L13.6,9.9C14.5,7.6 14,4.9 12.1,3C10.1,1 7.1,0.6 4.7,1.7L9,6L6,9L1.6,4.7C0.4,7.1 0.9,10.1 2.9,12.1C4.8,14 7.5,14.5 9.8,13.6L18.9,22.7C19.3,23.1 19.9,23.1 20.3,22.7L22.6,20.4C23.1,20 23.1,19.3 22.7,19Z"></path>
 				</svg>
 				<div>Outils</div>
 			</a>
diff --git a/app/templates/base/navbar/account.html b/app/templates/base/navbar/account.html
index 0536de7..b071393 100644
--- a/app/templates/base/navbar/account.html
+++ b/app/templates/base/navbar/account.html
@@ -51,7 +51,7 @@
 		{{ login_form.username(size=32) }}
 		{{ login_form.password.label }}
 		{{ login_form.password(size=32) }}
-		{{ login_form.submit(class_="bg-green") }}
+		{{ login_form.submit(class_="bg-ok") }}
 		{{ login_form.remember_me.label }} {{ login_form.remember_me() }}
 	</form>
 	<hr />
diff --git a/app/templates/forum/forum.html b/app/templates/forum/forum.html
index d9f1c0b..c25175d 100644
--- a/app/templates/forum/forum.html
+++ b/app/templates/forum/forum.html
@@ -59,7 +59,7 @@
 
 			{{ widget_editor.text_editor(form.message) }}
 
-			<div>{{ form.submit(class_='bg-green') }}</div>
+			<div>{{ form.submit(class_='bg-ok') }}</div>
 		</form>
 	</div>
 	{% endif %}
diff --git a/app/templates/forum/topic.html b/app/templates/forum/topic.html
index c0c78db..183e336 100644
--- a/app/templates/forum/topic.html
+++ b/app/templates/forum/topic.html
@@ -51,7 +51,7 @@
 
 			{{ widget_editor.text_editor(form.message, label=False) }}
 
-			<div>{{ form.submit(class_='bg-green') }}</div>
+			<div>{{ form.submit(class_='bg-ok') }}</div>
 		</form>
 	</div>
 </section>
diff --git a/app/templates/search.html b/app/templates/search.html
index e12e9a5..e37f586 100644
--- a/app/templates/search.html
+++ b/app/templates/search.html
@@ -13,7 +13,7 @@
 			{{ form.date.label }}
 			{{ form.date }}
 		</div>
-		<div>{{ form.submit(class_="bg-green") }}</div>
+		<div>{{ form.submit(class_="bg-ok") }}</div>
 	</form>
 </section>
 {% endblock %}
diff --git a/app/utils/render.py b/app/utils/render.py
index 106340d..0beb0d2 100644
--- a/app/utils/render.py
+++ b/app/utils/render.py
@@ -14,6 +14,7 @@ def render(*args, styles=[], scripts=[], **kwargs):
     # render('page.html', styles=['-css/form.css', '+css/admin/forms.css'])
 
     styles_ = [
+        'css/theme.css',
         'css/global.css',
         'css/navbar.css',
         'css/header.css',