From c3c65f1dd5078d046cf30e29274c4c65556bb5fa Mon Sep 17 00:00:00 2001 From: Rod Date: Sun, 30 Aug 2020 01:08:03 -0500 Subject: [PATCH] Dark / Light mode initial files --- css/style.css | 93 ++++++++++++++++++++++++------------------- index.html | 28 ++++++------- js/theme.js | 29 ++++---------- js/weather.js | 2 +- sass/main.scss | 104 +++++++++++++++++++++++++++---------------------- 5 files changed, 134 insertions(+), 122 deletions(-) diff --git a/css/style.css b/css/style.css index e96ce5e..74602a6 100644 --- a/css/style.css +++ b/css/style.css @@ -4,53 +4,56 @@ --fsm: 85px; --fss: 30px; --fses: 18px; - --accent: #20a4f3; - --darkbg: #1e1f21; - --darksbg: #2c2d31; - --darkfg: #d8dee9; - --lightbg: #ffffff; - --lightsbg: #f9fafa; - --lightfg: #000000; } + --accent: #186efd60; + --bg: #1e1f21; + --sbg: #2c2d31; + --fg: #d8dee9; } @media only screen and (max-width: 68.75em) { :root { --fsg: 100px; --fsm: 65px; --fss: 20px; } } +.lightmode { + --accent: #186efdaa; + --bg: #f5f5f5; + --sbg: #e4e6e6; + --fg: #3a3a3a; } + * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Open Sans', sans-serif; - color: var(--darkfg); font-size: 13.5px; transition: 0.2s ease-in-out; } -.darkbg { - background-color: var(--darkbg); } - -.darksbg { - background-color: var(--darksbg); } - -.darkfg { - color: var(--darkfg); } - -.lightbg { - background-color: var(--lightbg); } - -.lightsbg { - background-color: var(--lightsbg); } - -.lightfg { - color: var(--lightfg); } - body { width: 100vw; height: 100vh; + background-color: var(--bg); display: flex; align-items: center; justify-content: center; } +#themeButton { + position: absolute; + margin: 2em 2em 0 0; + right: 0; + top: 0; + color: var(--fg); + border: none; + border-radius: 5px; + padding: 10px; + cursor: pointer; + background-color: #00000000; + -webkit-appearance: none; + -moz-appearance: none; } + +.bicon { + width: 26px; + height: 26px; } + .container { width: 150vh; height: 85vh; @@ -68,10 +71,11 @@ body { .card { box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35); - border-radius: 5px; } + border-radius: 5px; + background-color: var(--sbg); } .card:hover { - transform: translateY(-0.3rem); - box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); } + transform: translateY(-0.2rem); + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35); } .fblock { grid-row: 1 / span 2; @@ -114,19 +118,21 @@ body { #separator, #minutes { font-size: var(--fsg); - font-weight: bolder; } + font-weight: bolder; + color: var(--fg); } #month, #day { font-size: var(--fsm); - font-weight: bold; } + font-weight: bold; + color: var(--fg); } #day { margin-left: 20px; } #greetings { font-size: var(--fses); - font-weight: lighter; } + color: var(--fg); } @media only screen and (max-width: 68.75em) { #greetings { font-size: var(--fss); } } @@ -138,11 +144,13 @@ body { .temperature-value p { font-size: var(--fss); font-weight: bolder; - margin-left: 15px; } + margin-left: 15px; + color: var(--fg); } .temperature-description p { font-size: var(--fss); - margin-left: 15px; } + margin-left: 15px; + color: var(--fg); } .qlink { grid-row: 3 / span 2; @@ -160,13 +168,14 @@ body { padding: 20px; } } .qlink__icon { width: 26px; - height: 26px; } + height: 26px; + color: var(--fg); } .qlink__link { display: flex; justify-content: center; align-items: center; + background-color: var(--sbg); width: 100%; - background-color: var(--darksbg); box-shadow: 0 5px 7px rgba(0, 0, 0, 0.35); border-radius: 5px; } .qlink__link-1 { @@ -189,10 +198,10 @@ body { grid-column: 3; } .qlink__link:hover { background-color: var(--accent); - transform: translateY(-0.3rem); - box-shadow: 0 20px 30px rgba(0, 0, 0, 0.35); } + transform: translateY(-0.2rem); + box-shadow: 0 10px 10px rgba(0, 0, 0, 0.35); } .qlink__link:hover svg { - stroke: var(--darkbg); } + stroke: var(--fg); } .qlist { display: flex; @@ -211,14 +220,16 @@ body { margin-top: 30px; margin-bottom: 20px; width: 30px; + color: var(--fg); height: 30px; } .qlist__link { text-decoration: none; font-size: var(--fses); + color: var(--fg); margin-top: 1px; - padding: 10px 12px; + padding: 6px 12px; border-radius: 5px; font-weight: bold; } .qlist__link:hover { background-color: var(--accent); - color: var(--darkbg); } + color: var(--fg); } diff --git a/index.html b/index.html index 6b9f6ed..89d7065 100644 --- a/index.html +++ b/index.html @@ -6,30 +6,31 @@ - + +
-
-
-
+
+
+
-
+
-
-
+
+
-

- °c

+

- °c

-

+

@@ -37,9 +38,9 @@ - +
-
+
-
+
LinkedIn + diff --git a/js/theme.js b/js/theme.js index 7ba4d97..50304fd 100644 --- a/js/theme.js +++ b/js/theme.js @@ -1,23 +1,10 @@ -let dark = document.getElementById('dark'); -let light = document.getElementById('light'); -let body = document.body; -let theme = localStorage.getItem('theme'); -let toggleTheme = document.getElementById('toggleTheme'); +let darkTheme = localStorage.getItem('darkTheme'); +const themeToggle = document.querySelector('#themeButton'); -toggleTheme.addEventListener('click', function() { - if (body.classList.contains('light')) { - body.classList.remove('light'); - toggleTheme.textContent = 'Dark'; - localStorage.setItem('theme', 'dark'); - } else { - body.classList.add('light'); - toggleTheme.textContent = 'Light'; - localStorage.setItem('theme', 'light'); - } -}); - -function getTheme() { - body.classList.add(theme) - toggleTheme.textContent = theme; +const enableDark = () => { + } -getTheme(); \ No newline at end of file + +themeToggle.addEventListener('click', () => { + +}); diff --git a/js/weather.js b/js/weather.js index e11a32f..c6d054c 100644 --- a/js/weather.js +++ b/js/weather.js @@ -52,6 +52,6 @@ function getWeather(latitude, longitude) { // Display Weather info function displayWeather() { iconElement.innerHTML = ``; - tempElement.innerHTML = `${weather.temperature.value}°${tempUnit}`; + tempElement.innerHTML = `${weather.temperature.value}°${tempUnit}`; descElement.innerHTML = weather.description; } diff --git a/sass/main.scss b/sass/main.scss index 695ff7c..51fdc6e 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -15,17 +15,11 @@ $bp-smallest: 31.25em; // C O L O R S - --accent: #20a4f3; + --accent: #186efd60; - // Colors Dark theme - --darkbg: #1e1f21; - --darksbg: #2c2d31; - --darkfg: #d8dee9; - - // Colors White theme - --lightbg: #ffffff; - --lightsbg: #f9fafa; - --lightfg: #000000; + --bg: #1e1f21; + --sbg: #2c2d31; + --fg: #d8dee9; @media only screen and (max-width: $bp-large) { --fsg: 100px; @@ -33,49 +27,59 @@ $bp-smallest: 31.25em; --fss: 20px; } } +.lightmode { + + --accent: #186efdaa; + + --bg: #f5f5f5; + --sbg: #e4e6e6; + --fg: #3a3a3a; + +} * { margin: 0; padding: 0; - box-sizing: border-box;font-family: 'Open Sans', sans-serif; - color: var(--darkfg); + box-sizing: border-box; + font-family: 'Open Sans', sans-serif; font-size: 13.5px; transition: 0.2s ease-in-out; } -.darkbg { - background-color: var(--darkbg); -} - -.darksbg { - background-color: var(--darksbg); -} - -.darkfg { - color: var(--darkfg); -} - -.lightbg { - background-color: var(--lightbg); -} - -.lightsbg { - background-color: var(--lightsbg); -} - - -.lightfg { - color: var(--lightfg); -} - body { width: 100vw; height: 100vh; + background-color: var(--bg); display: flex; align-items: center; justify-content: center; } + +#themeButton { + position: absolute; + margin: 2em 2em 0 0; + right: 0; + top: 0; + + color: var(--fg); + + border: none; + border-radius: 5px; + + padding: 10px; + cursor: pointer; + + background-color: #00000000; + + -webkit-appearance: none; + -moz-appearance: none; +} + +.bicon { + width: 26px; + height: 26px; +} .container { width: 150vh; height: 85vh; @@ -99,10 +103,11 @@ body { .card { box-shadow: 0 5px 7px rgba(#000000, 0.35); border-radius: 5px; + background-color: var(--sbg); &:hover { - transform: translateY(-0.3rem); - box-shadow: 0 20px 30px rgba(#000000, 0.35); + transform: translateY(-0.2rem); + box-shadow: 0 10px 10px rgba(#000000, 0.35); } } @@ -158,12 +163,14 @@ body { #minutes { font-size: var(--fsg); font-weight: bolder; + color: var(--fg); } #month, #day { font-size: var(--fsm); font-weight: bold; + color: var(--fg); } #day { margin-left: 20px; @@ -171,7 +178,7 @@ body { #greetings { font-size: var(--fses); - font-weight: lighter; + color: var(--fg); @media only screen and (max-width: $bp-large) { font-size: var(--fss); @@ -188,10 +195,12 @@ body { font-size: var(--fss); font-weight: bolder; margin-left: 15px; + color: var(--fg); } &-description p { font-size: var(--fss); margin-left: 15px; + color: var(--fg); } } @@ -217,14 +226,15 @@ body { &__icon { width: 26px; height: 26px; + color: var(--fg); } &__link { display: flex; justify-content: center; align-items: center; + background-color: var(--sbg); width: 100%; - background-color: var(--darksbg); box-shadow: 0 5px 7px rgba(#000000, 0.35); border-radius: 5px; &-1 { @@ -254,12 +264,12 @@ body { &:hover { background-color: var(--accent); - transform: translateY(-0.3rem); + transform: translateY(-0.2rem); - box-shadow: 0 20px 30px rgba(#000000, 0.35); + box-shadow: 0 10px 10px rgba(#000000, 0.35); & svg { - stroke: var(--darkbg); + stroke: var(--fg);; } } } @@ -286,19 +296,21 @@ body { margin-top: 30px; margin-bottom: 20px; width: 30px; + color: var(--fg); height: 30px; } &__link { text-decoration: none; font-size: var(--fses); + color: var(--fg); margin-top: 1px; - padding: 10px 12px; + padding: 6px 12px; border-radius: 5px; font-weight: bold; &:hover { background-color: var(--accent); - color: var(--darkbg); + color: var(--fg); } } }