diff --git a/static/css/darkmode.css b/static/css/darkmode.css new file mode 100644 index 0000000..f18dd9e --- /dev/null +++ b/static/css/darkmode.css @@ -0,0 +1,86 @@ +html { + --bg-color: #ffffff; + --color: #0d0d0d; +} + +html.dark-mode { + --bg-color: #0d0d0d; + --color: #ffffff; +} + +body { + -webkit-transition: background 250ms ease; + transition: background 250ms ease; + background-color: var(--bg-color); + color: var(--color); +} + +.toggle { + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -ms-flex-pack: distribute; + justify-content: space-around; + max-width: 140px; +} + +.toggle span { + margin: 0 0.5rem; +} + +.toggle input[type="checkbox"] { + height: 0; + width: 0; + visibility: hidden; +} + +.toggle input[type="checkbox"]:checked + label { + background: darkblue; +} + +.toggle input[type="checkbox"]:checked + label:after { + left: calc(100% - 2px); + -webkit-transform: translateX(-100%); + transform: translateX(-100%); +} + +.toggle label { + cursor: pointer; + width: 50px; + height: 24px; + background: rgba(0, 0, 0, 0.27); + display: block; + border-radius: 20px; + position: relative; +} + +.toggle label:after { + content: ""; + position: absolute; + top: 2px; + left: 2px; + width: 20px; + height: 20px; + background: #fff; + border-radius: 20px; + -webkit-transition: 0.3s; + transition: 0.3s; +} + +.screen-reader-text { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute !important; + width: 1px; + word-wrap: normal !important; +} +/*# sourceMappingURL=darkmode.css.map */ \ No newline at end of file diff --git a/static/css/darkmode.css.map b/static/css/darkmode.css.map new file mode 100644 index 0000000..7641f04 --- /dev/null +++ b/static/css/darkmode.css.map @@ -0,0 +1,9 @@ +{ + "version": 3, + "mappings": "AACA,AAAA,IAAI,CAAC;EACD,UAAU,CAAA,QAAC;EACX,OAAO,CAAA,QAAC;CAKT;;AAPH,AAGI,IAHA,AAGC,UAAU,CAAC;EACV,UAAU,CAAA,QAAC;EACX,OAAO,CAAA,QAAC;CACT;;AAGH,AAAA,IAAI,CAAC;EACH,UAAU,EAAE,qBAAqB;EACjC,gBAAgB,EAAE,eAAe;EACjC,KAAK,EAAE,YAAY;CACpB;;AAED,AAAA,OAAO,CAAC;EACN,OAAO,EAAE,IAAI;EACb,WAAW,EAAE,MAAM;EACnB,eAAe,EAAE,YAAY;EAC7B,SAAS,EAAE,KAAK;CAoCjB;;AAxCD,AAKE,OALK,CAKL,IAAI,CAAC;EACH,MAAM,EAAE,QAAQ;CACjB;;AAPH,AAQE,OARK,CAQL,KAAK,CAAA,AAAA,IAAC,CAAK,UAAU,AAAf,EAAiB;EACrB,MAAM,EAAE,CAAC;EACT,KAAK,EAAE,CAAC;EACR,UAAU,EAAE,MAAM;CAQnB;;AAnBH,AAYI,OAZG,CAQL,KAAK,CAAA,AAAA,IAAC,CAAK,UAAU,AAAf,CAIH,QAAQ,GAAG,KAAK,CAAC;EAChB,UAAU,EAAE,QAAQ;CACrB;;AAdL,AAeI,OAfG,CAQL,KAAK,CAAA,AAAA,IAAC,CAAK,UAAU,AAAf,CAOH,QAAQ,GAAG,KAAK,AAAA,MAAM,CAAC;EACtB,IAAI,EAAE,gBAAgB;EACtB,SAAS,EAAE,iBAAiB;CAC7B;;AAlBL,AAoBE,OApBK,CAoBL,KAAK,CAAC;EACJ,MAAM,EAAE,OAAO;EACf,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,mBAAmB;EAC/B,OAAO,EAAE,KAAK;EACd,aAAa,EAAE,IAAI;EACnB,QAAQ,EAAE,QAAQ;CAYnB;;AAvCH,AA4BI,OA5BG,CAoBL,KAAK,AAQF,MAAM,CAAC;EACN,OAAO,EAAE,EAAE;EACX,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,IAAI;EAChB,aAAa,EAAE,IAAI;EACnB,UAAU,EAAE,IAAI;CACjB;;AAKL,AAAA,mBAAmB,CAAC;EAClB,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,wBAAwB;EAC9B,SAAS,EAAE,UAAU;EACrB,MAAM,EAAE,GAAG;EACX,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;EAChB,OAAO,EAAE,CAAC;EACV,QAAQ,EAAE,mBAAmB;EAC7B,KAAK,EAAE,GAAG;EACV,SAAS,EAAE,iBAAiB;CAC7B", + "sources": [ + "darkmode.scss" + ], + "names": [], + "file": "darkmode.css" +} \ No newline at end of file diff --git a/static/css/darkmode.scss b/static/css/darkmode.scss new file mode 100644 index 0000000..34310a6 --- /dev/null +++ b/static/css/darkmode.scss @@ -0,0 +1,71 @@ +// declare variable +html { + --bg-color: #ffffff; + --color: #0d0d0d; + &.dark-mode { + --bg-color: #0d0d0d; + --color: #ffffff; + } + } + // use variable + body { + transition: background 250ms ease; + background-color: var(--bg-color); + color: var(--color); + } + // the toggle switch + .toggle { + display: flex; + align-items: center; + justify-content: space-around; + max-width: 140px; + span { + margin: 0 0.5rem; + } + input[type="checkbox"] { + height: 0; + width: 0; + visibility: hidden; + &:checked + label { + background: darkblue; + } + &:checked + label:after { + left: calc(100% - 2px); + transform: translateX(-100%); + } + } + label { + cursor: pointer; + width: 50px; + height: 24px; + background: rgba(0, 0, 0, 0.27); + display: block; + border-radius: 20px; + position: relative; + &:after { + content: ""; + position: absolute; + top: 2px; + left: 2px; + width: 20px; + height: 20px; + background: #fff; + border-radius: 20px; + transition: 0.3s; + } + } + } + + // make the toggle switch a bit more accessible + .screen-reader-text { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute !important; + width: 1px; + word-wrap: normal !important; + } \ No newline at end of file diff --git a/templates/includes/navbar.html b/templates/includes/navbar.html index e401cba..1322b44 100644 --- a/templates/includes/navbar.html +++ b/templates/includes/navbar.html @@ -25,6 +25,15 @@ - \ No newline at end of file + + diff --git a/templates/layout.html b/templates/layout.html index d9e0aac..c4f153c 100644 --- a/templates/layout.html +++ b/templates/layout.html @@ -6,10 +6,12 @@ PerfGPT - Analyze your performance test results using OpenAI - - + + + + \ No newline at end of file