dbroqua/MusicTopus
dbroqua/MusicTopus
1
1
Fork 0
Code Issues 9 Pull requests Releases 14 Activity

{WIP} Mise en place des thèmes clair et sombre

Browse source
This commit is contained in:
Damien Broqua 2022-02-23 18:51:23 +01:00
parent 18d4970ebd
commit 118586be47
20 changed files with 223 additions and 94 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/font/icon.eot
View file

Binary file not shown.

4
public/font/icon.svg
View file

@ -24,6 +24,10 @@
<glyph glyph-name="link-ext" unicode="&#xf08e;" d="M786 332v-178q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h393q7 0 12-5t5-13v-36q0-8-5-13t-12-5h-393q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63v178q0 8 5 13t13 5h36q8 0 13-5t5-13z m214 482v-285q0-15-11-25t-25-11-25 11l-98 98-364-364q-5-6-13-6t-12 6l-64 64q-6 5-6 12t6 13l364 364-98 98q-11 11-11 25t11 25 25 11h285q15 0 25-11t11-25z" horiz-adv-x="1000" />
<glyph glyph-name="sun" unicode="&#xf185;" d="M821 350q0 65-25 125t-69 102-102 69-125 25-125-25-102-69-69-102-25-125 25-125 69-102 102-69 125-25 125 25 102 69 69 102 25 125z m154-155q-2-8-11-11l-163-53v-171q0-9-7-15-8-5-16-2l-163 53-100-139q-6-7-15-7t-14 7l-101 139-163-53q-8-3-16 2-7 6-7 15v171l-163 53q-9 3-11 11-3 10 2 17l100 138-100 138q-5 8-2 17 2 8 11 11l163 53v171q0 9 7 15 8 5 16 2l163-53 101 139q5 6 14 6t15-6l100-139 163 53q8 3 16-2 7-6 7-15v-171l163-53q9-3 11-11 3-9-2-17l-100-138 100-138q5-7 2-17z" horiz-adv-x="1000" />
<glyph glyph-name="moon" unicode="&#xf186;" d="M704 123q-30-5-61-5-102 0-188 50t-137 137-50 188q0 107 58 199-112-33-183-128t-72-214q0-72 29-139t76-113 114-77 139-28q80 0 152 34t123 96z m114 47q-53-113-159-181t-230-68q-87 0-167 34t-136 92-92 137-34 166q0 85 32 163t87 135 132 92 161 38q25 1 34-22 11-23-8-40-48-43-73-101t-26-122q0-83 41-152t111-111 152-41q66 0 127 29 23 10 40-7 8-8 10-19t-2-22z" horiz-adv-x="857.1" />
<glyph glyph-name="trash" unicode="&#xf1f8;" d="M286 82v393q0 8-5 13t-13 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q8 0 13 5t5 13z m143 0v393q0 8-5 13t-13 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q8 0 13 5t5 13z m142 0v393q0 8-5 13t-12 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q7 0 12 5t5 13z m-303 554h250l-27 65q-4 5-9 6h-177q-6-1-10-6z m518-18v-36q0-8-5-13t-13-5h-54v-529q0-46-26-80t-63-34h-464q-37 0-63 33t-27 79v531h-53q-8 0-13 5t-5 13v36q0 8 5 13t13 5h172l39 93q9 21 31 35t44 15h178q23 0 44-15t30-35l39-93h173q8 0 13-5t5-13z" horiz-adv-x="785.7" />
<glyph glyph-name="blind" unicode="&#xf29d;" d="M204 677q-35 0-61 25t-26 62q0 35 26 61t61 25 61-25 26-61q0-37-26-62t-61-25z m308-359q0-28-17-37t-35-4-27 19l-205 244q-4 7-8 9t-6 1l-1-2q-4-4 2-12l68-77 1-198-90-255q-38-107-52-130-8-15-15-18-28-15-58-1-16 7-23 24t-5 32q1 9 110 345l3 232-48-91 20-124q2-14-1-24t-8-15-10-9-10-4l-4-1q-10-2-19 1t-13 9-8 13-4 10-2 6l-25 167 118 212q12 19 63 19 41 0 59-22l237-291q4-3 8-9l1-2 0-1q4-7 4-16z m-225-83q24-64 49-126t39-94l13-31q21-51 24-69 6-39-20-54-20-13-37-9t-28 12-17 19h0q-4 9-5 14l-69 196z m460-331q17-27 17-32 0-3-2-4-5-2-8 1t-8 14-9 17q-64 96-236 369 1 0 4 1t3 2l2 1q6 5 6 10z" horiz-adv-x="785.7" />

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.2 KiB

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
public/font/icon.ttf
View file

Binary file not shown.

BIN
public/font/icon.woff
View file

Binary file not shown.

BIN
public/font/icon.woff2
View file

Binary file not shown.

26
sass/button.scss
View file

@ -9,41 +9,41 @@
white-space: nowrap;
border-width: 1px;
margin-bottom: .5rem;
background-color: #fff;
border-color: #dbdbdb;
background-color: var(--default-color);
border-color: var(--default-hl-color);
border-radius: 0.375rem;
&.is-danger {
background-color: #d73455;
background-color: var(--danger-color);
border-color: transparent;
color: #fff;
color: var(--default-color);
&:hover {
background-color: #d70933;
background-color: var(--danger-hl-color);
border-color: transparent;
color: #fff;
color: var(--default-color);
}
}
&.is-link {
background-color: #485fc7;
background-color: var(--secondary-color);
border-color: transparent;
color: #fff;
color: var(--default-color);
&:hover {
background-color: #3e56c4;
background-color: var(--secondary-hl-color);
border-color: transparent;
color: #fff;
color: var(--default-color);
}
}
&.is-primary {
background-color: #2d7c58;
background-color: var(--primary-color);
border-color: transparent;
color: #fff;
color: var(--default-color);
&:hover {
background-color: #267953;
background-color: var(--primary-hl-color);
}
}
}

10
sass/connexion.scss
View file

@ -1,9 +1,9 @@
.connexion,
.inscription {
background-color: #fff;
background-color: var(--default-color);
border-radius: 6px;
box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
color: #4a4a4a;
color: var(--font-color);
display: block;
padding: 1.25rem;
width: calc(100% - 2rem);
@ -17,12 +17,12 @@
}
button {
background-color: #485fc7;
background-color: var(--secondary-color);
border-color: transparent;
color: #fff;
color: var(--default-color);
&:hover {
background-color: #3e56c4;
background-color: var(--secondary-hl-color);
}
}
}

4
sass/flash.scss
View file

@ -1,8 +1,8 @@
.flash {
background-color: #d73455;
background-color: var(--danger-color);
border-radius: 6px;
box-shadow: 0 .5em 1em -.125em rgba(10,10,10,.1),0 0 0 1px rgba(10,10,10,.02);
color: #fff;
color: var(--default-color);
display: block;
padding: 1.25rem;
width: calc(100% - 6rem);

81
sass/forms.scss
View file

@ -30,12 +30,12 @@
box-shadow: inset 0 .0625em .125em rgba(10,10,10,.05);
max-width: 100%;
width: 100%;
background-color: #fff;
border: 1px solid #dbdbdb !important;
color: #363636;
background-color: var(--default-color);
border: 1px solid var(--default-hl-color) !important;
color: var(--font-color);
&:focus-visible {
border: 1px solid #b9b9b9 !important;
border: 1px solid var(--font-color) !important;
outline: unset;
}
}
@ -48,4 +48,75 @@
background-size: 1.2rem;
padding-right: 2.4rem;
}
}
}
.theme-switch-wrapper {
display: flex;
align-items: center;
em {
margin-left: 10px;
font-size: 1rem;
}
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display:none;
}
.slider {
background-color: #ccc;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.slider:before {
background-color: #fff;
bottom: 4px;
content: '\f185';
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
padding: 0;
font-family: "icon";
font-style: normal;
font-weight: normal;
display: inline-block;
text-decoration: inherit;
text-align: center;
font-variant: normal;
text-transform: none;
}
input:checked + .slider {
background-color: #485fc7;
}
input:checked + .slider:before {
transform: translateX(26px);
content: '\f186';
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}

40
sass/global.scss
View file

@ -2,6 +2,7 @@ html {
min-height: 100vh;
body {
background-color: var(--bg-color);
display: flex;
flex-direction: column;
padding-top: 3.5rem;
@ -16,11 +17,11 @@ html {
footer.footer {
margin-top: auto;
padding: 2rem 0.7rem 1.5rem;
background-color: #fafafa;
background-color: var(--footer-color);
}
a {
color: #485fc7;
color: var(--secondary-color);
cursor: pointer;
}
@ -38,4 +39,39 @@ html {
.is-hidden {
display: none;
}
:root {
--bg-color: rgb(242, 244, 248);
--font-color: rgb(76, 86, 106);
--default-color: #fff;
--default-hl-color: #dbdbdb;
--primary-color: #2d7c58;
--primary-hl-color: #267953;
--secondary-color: #485fc7;
--secondary-hl-color: #3e56c4;
--danger-color: #d73455;
--danger-hl-color: #d70933;
--footer-color: #fafafa;
--bg-light-color: #fafafa;
--disabled-color: #7a7a7a;
--heading-color: #292922;
}
[data-theme="dark"] {
--bg-color: rgb(36, 41, 51);
--font-color: rgb(236, 239, 244);
--default-color: #fff;
--default-hl-color: #dbdbdb;
--primary-color: #2d7c58;
--primary-hl-color: #267953;
--secondary-color: #485fc7;
--secondary-hl-color: #3e56c4;
--danger-color: #692230;
--danger-hl-color: #4e0f1b;
}

2
sass/icons.scss
View file

@ -41,6 +41,8 @@
.icon-eye:before { content: '\e806'; } /* '' */
.icon-spin:before { content: '\e839'; } /* '' */
.icon-link-ext:before { content: '\f08e'; } /* '' */
.icon-sun:before { content: '\f185'; } /* '' */
.icon-moon:before { content: '\f186'; } /* '' */
.icon-trash:before { content: '\f1f8'; } /* '' */
.icon-blind:before { content: '\f29d'; } /* '' */

1
sass/index.scss
View file

@ -30,7 +30,6 @@
@import './navbar';
@import './forms';
@import './button.scss';
@import './table';
@import './modal';
@import './toast';
@import './flash';

12
sass/list.scss
View file

@ -3,24 +3,24 @@
.item{
padding: 0.5rem 0.75rem;
border-bottom: 1px solid #dbdbdb;
border-bottom: 1px solid var(--default-hl-color);
@include respond-to("medium") {
&:nth-child(2n) {
background-color: #fafafa;
background-color: var(--bg-light-color);
}
}
@include respond-to("medium-up") {
border-left: 1px solid #dbdbdb;
border-left: 1px solid var(--default-hl-color);
&:first-child,
&:nth-child(2) {
border-top: 1px solid #dbdbdb;
border-top: 1px solid var(--default-hl-color);
}
&:nth-child(2n),
&:last-child {
border-right: 1px solid #dbdbdb;
border-right: 1px solid var(--default-hl-color);
margin-right: -1px;
}
}
@ -35,7 +35,7 @@
}
img {
border: 2px solid #4a4a4a;
border: 2px solid var(--font-color);
max-width: 90%;
}
}

4
sass/ma-collection.scss
View file

@ -27,10 +27,10 @@
.title {
.icon-trash {
cursor: pointer;
color: #d73455;
color: var(--danger-color);
&:hover {
color: #d70933;
color: var(--danger-hl-color);
}
}
}

12
sass/modal.scss
View file

@ -43,12 +43,10 @@
width: 1200;
}
header,
footer {
align-items: center;
background-color: #f5f5f5;
background-color: var(--bg-light-color);
display: flex;
flex-shrink: 0;
justify-content: flex-start;
@ -57,7 +55,7 @@
}
header {
border-bottom: 1px solid #dbdbdb;
border-bottom: 1px solid var(--default-hl-color);
border-top-left-radius: 6px;
border-top-right-radius: 6px;
justify-content: space-between;
@ -85,7 +83,7 @@
&::before,
&::after {
background-color: #fff;
background-color: var(--default-color);
content: "";
display: block;
left: 50%;
@ -105,7 +103,7 @@
}
}
section {
background-color: #fff;
background-color: var(--default-color);
flex-grow: 1;
flex-shrink: 1;
overflow: auto;
@ -114,7 +112,7 @@
footer {
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 1px solid #dbdbdb;
border-top: 1px solid var(--default-hl-color);
.button:not(:last-child) {
margin-right: .5em;

32
sass/navbar.scss
View file

@ -1,6 +1,7 @@
.navbar {
min-height: 3.25rem;
background-color: #f5f5f5;
background-color: var(--bg-color);
box-shadow: rgba(216, 222, 233, 0.15) 0px 5px 10px 0px;
color: rgba(0,0,0,.7);
position: fixed;
z-index: 30;
@ -8,6 +9,8 @@
right: 0;
left: 0;
@include respond-to("medium-up") {
min-height: 3.25rem;
align-items: stretch;
@ -29,7 +32,7 @@
span {
word-break: break-word;
color: #363636;
color: var(--font-color);
font-size: 2rem;
font-weight: 600;
line-height: 1.125;
@ -101,7 +104,7 @@
position: relative;
flex-grow: 0;
flex-shrink: 0;
color: #4a4a4a;
color: var(--font-color);
display: block;
&.has-dropdown {
@ -113,10 +116,10 @@
color: rgba(0,0,0,.7);
.navbar-dropdown {
background-color: #fff;
background-color: var(--default-color);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 2px solid #dbdbdb;
border-top: 2px solid var(--default-hl-color);
box-shadow: 0 8px 8px rgba(10,10,10,.1);
display: none;
font-size: .875rem;
@ -129,7 +132,7 @@
&:hover {
.navbar-link {
background-color: #e8e8e8;
background-color: var(--default-hl-color);
color: rgba(0,0,0,.7);
}
@ -147,7 +150,7 @@
}
.navbar-link {
color: #4a4a4a;
color: var(--font-color);
display: block;
line-height: 1.5;
padding: .5rem .75rem;
@ -182,7 +185,7 @@
transform: rotate(-45deg);
transform-origin: center;
width: .625em;
border-color: #485fc7;
border-color: var(--secondary-color);
margin-top: -0.375em;
right: 1.125em;
@ -194,7 +197,7 @@
.navbar-menu {
display: none;
background-color: #fff;
background-color: var(--default-color);
box-shadow: 0 8px 16px rgba(10,10,10,.1);
padding: .5rem 0;
@ -253,10 +256,10 @@
}
@include respond-to("medium-up") {
background-color: #fff;
background-color: var(--default-color);
border-bottom-left-radius: 6px;
border-bottom-right-radius: 6px;
border-top: 2px solid #dbdbdb;
border-top: 2px solid var(--default-hl-color);
box-shadow: 0 8px 8px rgba(10,10,10,.1);
display: none;
font-size: .875rem;
@ -297,4 +300,11 @@
margin-bottom: -0.5rem;
}
}
}
[data-theme="dark"] {
.navbar {
box-shadow: none;
}
}

20
sass/pagination.scss
View file

@ -27,15 +27,15 @@
text-decoration: none;
&:hover {
border-color: #b5b5b5;
color: #363636;
border-color: var(--font-color);
color: var(--font-color);
}
&.is-disabled {
background-color: #dbdbdb;
border-color: #dbdbdb;
background-color: var(--default-hl-color);
border-color: var(--default-hl-color);
box-shadow: none;
color: #7a7a7a;
color: var(--disabled-color);
opacity: .5;
}
}
@ -48,8 +48,8 @@
font-size: 1em;
justify-content: center;
margin: .25rem;
border-color: #dbdbdb;
color: #363636;
border-color: var(--default-hl-color);
color: var(--font-color);
min-width: 2.5em;
padding-left: .75em;
padding-right: .75em;
@ -66,9 +66,9 @@
.pagination-link {
&.is-current {
background-color: #485fc7;
border-color: #485fc7;
color: #fff;
background-color: var(--secondary-color);
border-color: var(--secondary-color);
color: var(--default-color);
}
}

24
sass/table.scss
View file

@ -1,24 +0,0 @@
table {
color: #363636;
th, td {
padding: .5em .75em;
border-bottom: 1px solid #dbdbdb;
}
th {
border-bottom-width: 2px;
}
tr:nth-child(2n) {
background-color: #fafafa;
}
tbody {
tr {
&:hover {
background-color: #f5f5f5;
}
}
}
}

6
sass/toast.scss
View file

@ -9,8 +9,8 @@
font-size: 17px;
padding: 1.25rem 2.5rem 1.25rem 1.5rem;
background-color: #d73455;
color: #fff;
background-color: var(--danger-color);
color: var(--default-color);
&.show {
visibility: visible;
@ -43,7 +43,7 @@
&::before,
&::after {
background-color: #fff;
background-color: var(--default-color);
content: "";
display: block;
left: 50%;

39
views/index.ejs
View file

@ -1,5 +1,5 @@
<!doctype html>
<html lang="fr">
<html lang="fr" data-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -107,6 +107,17 @@
setCookie('ariatheme', body.classList.contains("is-accessible"));
}
/**
* Fonction permettant de switcher de thème clair/sombre
* @param {Object} e
*/
function switchTheme(e) {
const theme = e.target.checked ? 'dark' : 'light';
document.documentElement.setAttribute('data-theme', theme);
setCookie('theme', theme);
}
/**
* Ensemble d'actions effectuées au chargement de la page
*/
@ -126,9 +137,23 @@
const switchAriaThemeBtn = document.querySelector("#switchAriaTheme");
switchAriaThemeBtn.addEventListener("click", switchAriaTheme);
setAriaTheme(getCookie('ariatheme'));
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
toggleSwitch.addEventListener('change', switchTheme, false);
let currentThemeIsDark = getCookie('theme');
if ( currentThemeIsDark === 'false' && window.matchMedia ) {
currentThemeIsDark = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
}
console.log('currentThemeIsDark:', currentThemeIsDark);
switchTheme({target: {checked: currentThemeIsDark === 'dark'}});
toggleSwitch.checked = currentThemeIsDark === 'dark';
});
console.log('window.matchMedia:', window.matchMedia('(prefers-color-scheme: dark)').matches);
</script>
</head>
<body>
@ -182,9 +207,17 @@
</div>
</div>
<% } %>
<div class="navbar-item apparence">
<div class="theme-switch-wrapper">
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<div class="slider round"></div>
</label>
</div>
</div>
<div class="navbar-item">
<div class="buttons">
<button type="button" class="button is-link" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site">
<button type="button" class="button is-link" id="switchAriaTheme" aria-label="Renforcer la visibilité de ce site" title="Renforcer la visibilité de ce site">
<i class="icon-eye"></i>
</button>
<% if ( !user ) { %>