Add light theme

node101-io · Jun 24, 2023 · bdc259e · bdc259e
1 parent 3bb9937
commit bdc259e
Show file tree

Hide file tree

Showing 18 changed files with 134 additions and 69 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/controllers/index/theme/post.js b/controllers/index/theme/post.js
@@ -0,0 +1,8 @@
+module.exports = (req, res) => {
+  if (!req.body.theme || (req.body.theme != 'dark' && req.body.theme != 'light'))
+    return res.json({ success: false, error: 'bad_request' });
+
+  req.session.theme = req.body.theme;
+
+  return res.json({ success: true });
+}
diff --git a/middleware/generateConstantData.js b/middleware/generateConstantData.js
@@ -94,7 +94,7 @@ module.exports = (req, res, next) => {
     web: 'https://node101.io'
   };
 
-
+  res.locals.theme = req.session.theme ? req.session.theme : 'dark';
   res.locals.HEADER_MENU = HEADER_MENU;
   res.locals.MONTHS = MONTHS;
   res.locals.SOCIAL_MEDIA_ICONS = SOCIAL_MEDIA_ICONS;

diff --git a/public/css/general/dark.css b/public/css/general/dark.css
@@ -0,0 +1,17 @@
+:root {
+  --main-color: rgba(120, 169, 255, 1);
+  --warning-color: rgba(192, 3, 3, 1);
+  --box-color: rgba(6, 6, 9, 1);
+  --background-color: rgba(13, 13, 15, 1);
+  --background-color-two: rgba(8, 8, 10, 1);
+  --border-color: rgba(248, 248, 248, 0.2);
+  --hover-color: rgba(148, 148, 148, 0.2);
+  --hover-color-light: rgba(254, 254, 254, 0.8);
+  --button-text-color: rgba(250, 250, 250, 1);
+  --text-color: rgba(254, 254, 254, 1);
+  --text-color-two: rgba(236, 236, 236, 1);
+  --placeholder-color: rgba(248, 248, 248, 0.6);
+
+  --footer-bottom-color: rgba(1, 1, 2, 1);
+  --navbar-each-empty-line-background-color: rgba(30, 30, 30, 1)
+}
diff --git a/public/css/general/general.css b/public/css/general/general.css
@@ -55,19 +55,6 @@ input[type=number] {
   --content-horizontal-padding: 170px;
   --box-padding: 30px;
   --space-character-width: 6px;
-
-  --main-color: rgba(120, 169, 255, 1);
-  --warning-color: rgba(192, 3, 3, 1);
-  --box-color: rgba(6, 6, 9, 1);
-  --background-color: rgba(13, 13, 15, 1);
-  --background-color-two: rgba(8, 8, 10, 1);
-  --border-color: rgba(248, 248, 248, 0.2);
-  --hover-color: rgba(148, 148, 148, 0.2);
-  --hover-color-light: rgba(254, 254, 254, 0.8);
-  --button-text-color: rgba(250, 250, 250, 1);
-  --text-color: rgba(254, 254, 254, 1);
-  --text-color-two: rgba(236, 236, 236, 1);
-  --placeholder-color: rgba(248, 248, 248, 0.6);
 }
 
 .display-none {

diff --git a/public/css/general/header.css b/public/css/general/header.css
@@ -6,8 +6,7 @@
   --all-header-search-wrapper-width: 350px;
   --all-header-search-results-height: 150px;
   --all-header-search-result-image-size: 20px;
-  --all-header-language-button-height: 42px;
-  --all-header-language-button-width: 140px;
+  --all-header-system-button-height: 32px;
   --all-footer-left-width: 350px;
   --all-footer-each-column-width: 200px;
 }
@@ -188,70 +187,60 @@
   white-space: nowrap;
 }
 
-.all-header-language-button {
+.all-header-change-theme-button {
   margin-left: auto;
-  height: fit-content;
-  min-height: fit-content;
+  height: var(--all-header-system-button-height);
+  min-height: var(--all-header-system-button-height);
   width: fit-content;
   min-width: fit-content;
   display: flex;
   align-items: center;
   cursor: pointer;
   text-decoration: none;
-  padding: 4px 8px;
+  padding: 0 8px;
   border-radius: 3px;
 }
-.all-header-language-button:hover {
-  background-color: var(--border-color);
-}
-.all-header-language-button-flag {
-  height: 18px;
-  min-height: 18px;
-  width: auto;
-  margin-right: 6px;
+.all-header-change-theme-button:hover {
+  background-color: var(--hover-color);
 }
-.all-header-language-button-text {
+.all-header-change-theme-button-text {
   font-weight: 700;
-  font-size: 18px;
+  font-size: 16px;
   color: var(--text-color);
 }
-
-.all-header-language-menu {
-  position: absolute;
-  top: var(--all-header-language-button-height);
-  height: fit-content;
-  min-height: fit-content;
-  width: var(--all-header-language-button-width);
-  min-width: var(--all-header-language-button-width);
-  display: flex;
-  flex-direction: column;
+.all-header-change-theme-button-icon {
+  fill: var(--text-color);
+  height: 18px;
+  min-height: 18px;
+  width: auto;
+  margin-left: 8px;
 }
 
-.all-header-each-language-button {
-  height: var(--all-header-language-button-height);
-  min-height: var(--all-header-language-button-height);
-  width: var(--all-header-language-button-width);
-  min-width: var(--all-header-language-button-width);
+.all-header-language-button {
+  height: var(--all-header-system-button-height);
+  min-height: var(--all-header-system-button-height);
+  width: fit-content;
+  min-width: fit-content;
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  padding: 0 10px;
-  background-color: var(--background-color-two);
-  margin-bottom: 5px;
   cursor: pointer;
+  text-decoration: none;
+  padding: 0 8px;
+  border-radius: 3px;
 }
-.all-header-each-language-button:hover {
-  background-color: rgba(21, 21, 21, 1);
+.all-header-language-button:hover {
+  background-color: var(--hover-color);
 }
-.all-header-each-language-button-text {
-  font-weight: 600;
-  font-size: 16px;
-  color: var(--text-color);
+.all-header-language-button-flag {
+  height: 18px;
+  min-height: 18px;
+  width: auto;
+  margin-right: 6px;
 }
-.all-header-each-language-button-flag {
-  width: 20px;
-  min-width: 20px;
-  height: auto;
+.all-header-language-button-text {
+  font-weight: 700;
+  font-size: 18px;
+  color: var(--text-color);
 }
 
 .all-content-wrapper {
@@ -372,7 +361,7 @@
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  background-color: rgba(1, 1, 2);
+  background-color: var(--footer-bottom-color);
 }
 .all-footer-bottom-text {
   color: var(--text-color);

diff --git a/public/css/general/light.css b/public/css/general/light.css
@@ -0,0 +1,17 @@
+:root {
+  --main-color: rgba(120, 169, 255, 1);
+  --warning-color: rgba(192, 3, 3, 1);
+  --box-color: rgba(212, 212, 212, 1);
+  --background-color: rgba(256, 256, 256, 1);
+  --background-color-two: rgba(248, 248, 248, 1);
+  --border-color: rgba(136, 136, 136, 0.2);
+  --hover-color: rgba(196, 196, 196, 0.2);
+  --hover-color-light: rgba(188, 188, 188, 0.8);
+  --button-text-color: rgba(12, 12, 16, 1);
+  --text-color: rgba(4, 4, 15, 1);
+  --text-color-two: rgba(6, 6, 12, 1);
+  --placeholder-color: rgba(6, 6, 8, 0.6);
+
+  --footer-bottom-color: rgba(224, 224, 224, 1);
+  --navbar-each-empty-line-background-color: rgba(248, 248, 248, 1)
+}
diff --git a/public/css/general/navbar.css b/public/css/general/navbar.css
@@ -1,7 +1,6 @@
 :root {
   --general-navbar-width: 350px;
   --general-navbar-each-empty-line-height: 50px;
-  --general-navbar-each-empty-line-background-color: rgba(30, 30, 30, 1);
   --general-navbar-short-writing-height: 70px;
   --general-navbar-writing-height: 110px;
 }
@@ -64,7 +63,7 @@
   min-height: var(--general-navbar-each-empty-line-height);
   width: 100%;
   min-width: 100%;
-  background-color: var(--general-navbar-each-empty-line-background-color);
+  background-color: var(--navbar-each-empty-line-background-color);
   margin-bottom: calc(var(--box-padding) / 3);
 }
 

diff --git a/public/css/general/writing.css b/public/css/general/writing.css
@@ -98,8 +98,8 @@
   margin-bottom: -1px;
 }
 .general-each-writing-subtitle {
-  font-weight: 300;
-  font-size: 15px;
+  font-weight: 400;
+  font-size: 16px;
   color: var(--text-color);
   margin-top: calc(var(--box-padding) / 2);
   display: -webkit-box;

diff --git a/public/css/projects/index.css b/public/css/projects/index.css
@@ -88,4 +88,10 @@
   min-height: calc(var(--each-project-height) - var(--box-padding) / 2);
   width: calc(var(--each-project-height) - var(--box-padding) / 2);
   min-width: calc(var(--each-project-height) - var(--box-padding) / 2);
+}
+
+@media only screen and (max-width: 650px) {
+  .projects-wrapper {
+    grid-template-columns: 1fr;
+  }
 }
diff --git a/public/js/functions/header.js b/public/js/functions/header.js
@@ -50,6 +50,8 @@ function loadSearchResults(search) {
 };
 
 window.addEventListener('load', () => {
+  const theme = JSON.parse(document.getElementById('theme').value);
+
   SOCIAL_MEDIA_ICONS = JSON.parse(document.getElementById('social-media-account-json').value);
   QUERY = new Proxy(new URLSearchParams(window.location.search), {
     get: (searchParams, prop) => searchParams.get(prop)
@@ -82,6 +84,17 @@ window.addEventListener('load', () => {
 
       window.location.href = url;
     }
+
+    if (event.target.closest('.all-header-change-theme-button')) {
+      serverRequest('/theme', 'POST', {
+        theme: theme == 'dark' ? 'light' : 'dark'
+      }, res => {
+        if (!res.success)
+          return throwError(res.error);
+
+        window.location.reload();
+      });
+    }
   });
 
   const allHeaderAnimationMaxHeight = 100;

diff --git a/public/js/functions/navbar.js b/public/js/functions/navbar.js
@@ -136,6 +136,7 @@ function loadNavbarContent() {
 
 window.addEventListener('load', () => {
   if (
+    window.innerWidth > NAVBAR_DISPLAY_NONE_WIDTH &&
     !document.getElementById('navbar-loaded') ||
     !JSON.parse(document.getElementById('navbar-loaded').value)
   )

diff --git a/public/js/projects/index.js b/public/js/projects/index.js
@@ -11,7 +11,7 @@ function createProject(project) {
   newProject.href = project.link;
 
   const newProjectContentWrapper = document.createElement('div');
-  newProjectContentWrapper.classList.add('general-each-item-content-wrapper');
+  newProjectContentWrapper.classList.add('each-project-content-wrapper');
 
   const newProjectTitle = document.createElement('h1');
   newProjectTitle.classList.add('each-project-title');
@@ -49,11 +49,10 @@ function createProject(project) {
   newProject.appendChild(newProjectContentWrapper);
 
   const newProjectImage = document.createElement('img');
-  newProjectImage.classList.add('general-each-item-image');
+  newProjectImage.classList.add('each-project-image');
   newProjectImage.src = project.image;
   newProjectImage.alt = project.title;
   newProjectImage.loading = 'lazy';
-
   newProject.appendChild(newProjectImage);
 
   document.querySelector('.projects-wrapper').appendChild(newProject);

diff --git a/routes/indexRoute.js b/routes/indexRoute.js
@@ -13,6 +13,7 @@ const searchGetController = require('../controllers/index/search/get');
 const stableGetController = require('../controllers/index/stable/get');
 
 const filterPostController = require('../controllers/index/filter/post');
+const themePostController = require('../controllers/index/theme/post');
 
 router.get(
   '/',
@@ -53,5 +54,10 @@ router.post(
     generateConstantData,
     filterPostController
 );
+router.post(
+  '/theme',
+    generateConstantData,
+    themePostController
+);
 
 module.exports = router;
diff --git a/translations/en.json b/translations/en.json
@@ -54,5 +54,7 @@
 	"See more": "See more",
 	"Community": "Community",
 	"Editor's Pick": "Editor's Pick",
-	"Read, Listen & Watch": "Read, Listen & Watch"
+	"Read, Listen & Watch": "Read, Listen & Watch",
+	"Light": "Light",
+	"Dark": "Dark"
 }
diff --git a/translations/tr.json b/translations/tr.json
@@ -39,5 +39,7 @@
 	"search": "sonuç bulundu",
 	"Exclusive": "Size Özel",
 	"writing": "writing",
-	"s": "s"
+	"s": "s",
+	"Light": "Aydınlat",
+	"Dark": "Karart"
 }
diff --git a/views/partials/head.pug b/views/partials/head.pug
@@ -8,6 +8,10 @@ html(lang='tr')
     else
       title library.node101
     link(href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600,700,800' rel='stylesheet')
+    if theme && theme == 'light'
+      link(rel='stylesheet' href=`${URL}/css/general/light.css`)
+    else
+      link(rel='stylesheet' href=`${URL}/css/general/dark.css`)
     if includes
       if includes.meta
         meta(property='og:type' content='website')

diff --git a/views/partials/header.pug b/views/partials/header.pug
@@ -1,5 +1,6 @@
 extends ./head
 block content
+  input.display-none#theme(value=JSON.stringify(theme))
   input.display-none#social-media-account-json(value=JSON.stringify(SOCIAL_MEDIA_ICONS))
   .all-wrapper
     .all-header-wrapper
@@ -24,6 +25,13 @@ block content
             path(d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z')
           input.all-header-search-input(type='search' name='new-password' placeholder=__('Search') autocomplete='off' value=(search ? search : ''))
         .all-header-search-input-results-wrapper
+      .all-header-change-theme-button
+        if theme && theme == 'light'
+          span.all-header-change-theme-button-text= __('Dark')
+        else
+          span.all-header-change-theme-button-text= __('Light')
+        svg.all-header-change-theme-button-icon(xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512')
+          path(d='M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z')
       if lang == 'tr'
         a.all-header-language-button(href=`${url}${url.includes('?') ? '&' : '?'}lang=en`)
           img.all-header-language-button-flag(src=`${URL}/img/flags/en.png` alt='node101 language english')
@@ -49,6 +57,13 @@ block content
               path(d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z')
             input.all-header-search-input(type='search' name='search' placeholder=__('Search') autocomplete='off' value=(search ? search : ''))
           .all-header-search-input-results-wrapper
+        .all-header-change-theme-button
+          if theme && theme == 'light'
+            span.all-header-change-theme-button-text= __('Dark')
+          else
+            span.all-header-change-theme-button-text= __('Light')
+          svg.all-header-change-theme-button-icon(xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512')
+            path(d='M448 256c0-106-86-192-192-192V448c106 0 192-86 192-192zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256z')
         if lang == 'tr'
           a.all-header-language-button(href=`${url}${url.includes('?') ? '&' : '?'}lang=en`)
             img.all-header-language-button-flag(src=`${URL}/img/flags/en.png` alt='node101 language english')