Skip to content

Commit

Permalink
[feature] Added dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@pandafy
pandafy committed Nov 11, 2024
1 parent 85e944f commit cf469cd
Show file tree
Hide file tree
Showing 9 changed files with 366 additions and 28 deletions.
2 changes: 1 addition & 1 deletion content/pages/commercial-support.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ <h2 class="title is-spaced is-size-3 is-size-4-mobile">
</a>

<a
class="button with-text"
class="button is-white with-text"
target="_blank"
href="https://wa.me/37259361689"
>
Expand Down
176 changes: 153 additions & 23 deletions css/theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ $grey-light: #475467;
$grey-light-button: #344054;
$grey-light-border: #d0d5dd;
$alternative-bg: #f5f5f5;
$alternative-bg-invert: #0f1629;
$weight-medium: 500;
$weight-semibold: 600;

Expand All @@ -30,6 +31,10 @@ $weight-semibold: 600;
"white": (
$white,
$grey-light-button,
),
"alternative-bg": (
$alternative-bg,
$alternative-bg-invert,
)
),
$primary: $orange,
Expand Down Expand Up @@ -71,17 +76,111 @@ $fa-font-path: "../webfonts";
@import "@fortawesome/fontawesome-free/scss/regular";
@import url("../webfonts/Inter.css");

html[data-theme="light"] {
--bulma-hover-l-delta: 20%;
--bulma-accent-foreground: hsl(212deg, 47%, 11%);
--bulma-accent-background: hsl(210deg, 40%, 96%);
.logo-dark {
display: none;
}

button.toggle-theme {
svg.light {
transform: scale(1) rotate(0deg);
}
svg.dark {
transform: scale(0) rotate(-90deg);
}
}
}

/*! purgecss start ignore */
html[data-theme="dark"]:root {
--bulma-accent-foreground: hsl(210deg, 40%, 98%);
--bulma-accent-background: hsl(216deg, 34%, 17%);
--bulma-scheme-main: hsl(227, 82%, 4%);
--bulma-scheme-h: 227;
--bulma-scheme-s: 82%;
--bulma-scheme-main-l: 4%;
--bulma-scheme-main-bis-l: 4%;

--bulma-text: hsl(0, 0%, 88%);
--bulma-primary: hsl(24, 100%, 68%);
--bulma-primary-h: 24;
--bulma-primary-s: 100%;
--bulma-primary-l: 68%;

--bulma-orange: #ee7f2f;
--bulma-orange-h: 24;
--bulma-orange-s: 100%;
--bulma-orange-l: 68%;

--bulma-link: hsl(24, 100%, 68%);
--bulma-link-text: hsl(24, 100%, 68%);
--bulma-link-text-hover: hsl(25, 85%, 56%);
--bulma-link-text-active: hsl(25, 85%, 56%);

--bulma-grey-dark: hsl(213, 31%, 91%);
--bulma-grey-light: #b0b0b0;

--bulma-navbar-h: 227;
--bulma-navbar-s: 84%;
--bulma-navbar-l: 4%;

--bulma-alternative-bg: hsl(223, 47%, 11%);

.title {
--bulma-title-color: #e1e7ef;
}
.is-orange {
--bulma-button-h: 25deg;
--bulma-button-s: 86%;
--bulma-button-l: 56%;
--bulma-button-background-l: 56%;
color: var(--bulma-scheme-main);
}
.button.is-orange:hover,
.button.is-orange.is-hovered {
--bulma-button-h: var(--bulma-orange-h);
--bulma-button-s: var(--bulma-orange-s);
--bulma-button-l: var(--bulma-orange-l);
--bulma-button-background-l-delta: 0%;
--bulma-button-background-l: var(--bulma-orange-l);
}
.menu a {
--bulma-menu-item-h: 0;
--bulma-menu-item-s: 0%;
--bulma-menu-item-backround-l: 88%;
--bulma-menu-item-color-l: 88%;
}
.footer {
--bulma-footer-background-color: var(--bulma-scheme-main);
}
.logo-light {
display: none;
}
button.toggle-theme {
svg.dark {
transform: scale(1) rotate(0deg);
}
svg.light {
transform: scale(0) rotate(90deg);
}
}
}
/*! purgecss end ignore */

// general
.text a:not(.button, .rounded)[href] {
text-decoration: underline;
}
.text a:not(.button, .rounded)[href]:hover,
.text a:not(.button, .rounded)[href]:focus,
.text a:not(.button, .rounded)[href]:active {
filter: brightness(135%);
color: var(--bulma-link-text-hover);
}
.text a:not(.button, .rounded)[href]:visited {
filter: brightness(80%);
color: var(--bulma-link-text-hover);
}
body {
min-width: 370px;
Expand Down Expand Up @@ -117,29 +216,29 @@ body {
#main-menu .navbar-center span.navbar-link {
font-size: 15px;
font-weight: $weight-semibold;
color: $grey-light;
color: var(--bulma-grey-light);
}
#main-menu .navbar-center a:hover,
#main-menu .navbar-center a:focus,
#main-menu .navbar-center a:active,
#main-menu .navbar-center span.navbar-link:hover,
#main-menu .navbar-center span.navbar-link:focus,
#main-menu .navbar-center span.navbar-link:active {
color: $orange;
color: var(--bulma-orange);
background: transparent;
}
#main-menu .has-dropdown .navbar-link:hover::after,
#main-menu .has-dropdown .navbar-link:focus::after,
#main-menu .has-dropdown .navbar-link:active::after,
#main-menu .has-dropdown .navbar-link.is-active::after {
border-color: $orange;
border-color: var(--bulma-orange);
}
#main-menu .has-dropdown .navbar-link {
cursor: default;
}
#main-menu .navbar-center a.is-active {
background: transparent;
color: $orange;
color: var(--bulma-orange);
cursor: default;
}
.navbar-dropdown {
Expand All @@ -148,15 +247,46 @@ body {
.has-dropdown .navbar-link::after {
border-width: 2px;
}
.toggle-theme-container {
display: flex;
width: 100%;
justify-content: flex-end;
align-items: center;
}
.toggle-theme {
margin-right: 5px;
color: var(--bulma-text);
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 0.375rem; /* rounded-md */
height: 2.3rem;
width: 2.3rem;
transition-duration: 0.15s;
transition-property: color, background-color, border-color,
text-decoration-color, fill, stroke;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

svg {
position: absolute;
transition-duration: 0.15s;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
}
.toggle-theme:hover {
background-color: var(--bulma-accent-background);
color: var(--bulma-accent-foreground);
}
// buttons
.button.with-text .fas {
margin-right: 0.5em;
}
.button.is-white {
outline: 1px solid $grey-light-border;
outline: 1px solid var(--bulma-grey-light-border);
}
.button.is-orange.is-inverted {
outline: 1px solid rgba($orange, 0.4);
outline: 1px solid rgba(var(--bulma-orange), 0.4);
}
p.button-container .button {
margin: 5px;
Expand All @@ -170,8 +300,8 @@ p.button-container .button {
border: 1px solid $orange-border;
font-size: 0.75em;
font-weight: $weight-medium;
color: $orange-dark;
background-color: $orange-light;
color: var(--bulma-orange-dark);
background-color: var(--bulma-orange-light);
}
a.rounded:hover {
background-color: darken($orange-light, 5%);
Expand Down Expand Up @@ -203,12 +333,12 @@ h4,
.features h2 > span,
.features h2 a > span:not(.icon, .button) {
font-weight: $weight-semibold;
color: $grey-dark;
color: var(--bulma-grey-dark);
}
.features.grid h2 a:hover span,
.features.grid h2 a:focus span,
.features.grid h2 a:active span {
color: $orange;
color: var(--bulma-orange);
text-decoration: none;
}
.features.grid p {
Expand Down Expand Up @@ -282,16 +412,16 @@ img.screenshot.main {
max-width: 322px;
}
.alternative-bg {
background-color: $alternative-bg;
background-color: var(--bulma-alternative-bg);
}
.circle {
display: inline-block;
width: 34px;
height: 34px;
line-height: 34px;
border-radius: 100%;
color: $orange;
background-color: $orange-light;
color: var(--bulma-orange);
background-color: var(--bulma-orange-light);
text-align: center;
}
.bullet {
Expand Down Expand Up @@ -327,10 +457,10 @@ body main {
}
.social a {
margin-right: 0.56em;
color: $grey-light;
color: var(--bulma-grey-light);
}
.social a:hover {
color: $orange;
color: var(--bulma-orange);
}
.social a:last-child {
margin: 0;
Expand Down Expand Up @@ -390,13 +520,13 @@ body main {
.faq a.is-active,
.faq a.is-active:hover,
.faq a.is-active:focus {
background: $alternative-bg;
background: var(--bulma-alternative-bg);
font-weight: $weight-semibold;
border-bottom: 0 none;
}

.stats span {
color: $orange;
color: var(--bulma-orange);
font-size: 1.3em;
font-weight: $weight-semibold;
}
Expand All @@ -415,7 +545,7 @@ body main {
a.rounded:hover,
a.rounded:focus,
a.rounded:active {
color: $orange;
color: var(--bulma-orange);
}
}

Expand Down Expand Up @@ -478,7 +608,7 @@ body main {
margin-bottom: 0.4em;
font-weight: $weight-medium;
letter-spacing: -0.3px;
color: $orange;
color: var(--bulma-orange);
}
.points .subtitle {
margin: 1.2em 0;
Expand All @@ -488,7 +618,7 @@ body main {
display: inline-block;
padding: 0.25em 1em;
background: transparent;
color: $grey-dark;
color: var(--bulma-grey-dark);
font-weight: 400;
font-size: 1.4em;
border-radius: 30px;
Expand Down Expand Up @@ -518,7 +648,7 @@ body main {
.points .column .circle::after {
content: "";
display: inline-block;
background: $orange;
background: var(--bulma-orange);
width: 10px;
height: 10px;
border-radius: 100%;
Expand Down
14 changes: 14 additions & 0 deletions js/theme.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,18 @@
document.addEventListener("DOMContentLoaded", () => {
// Add event listener to toggle theme buttons
const toggleTheme = document.querySelectorAll(".toggle-theme");
toggleTheme.forEach((el) => {
el.addEventListener("click", () => {
if (document.documentElement.getAttribute("data-theme") === "light") {
document.documentElement.setAttribute("data-theme", "dark");
localStorage.setItem("theme", "dark");
} else {
document.documentElement.setAttribute("data-theme", "light");
localStorage.setItem("theme", "light");
}
});
});

// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(
document.querySelectorAll(".navbar-burger"),
Expand Down
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@
"build": "npm run build:css && npm run build:js && npm run minify",
"serve": "http-server -a 0.0.0.0 -p 8080 ./output/",
"start": "concurrently \"npm run serve\" \"npm run build:sass\" \"npm run build:postcss\"",
"prettify": "prettier -w *.json *.js css/* js/* content/**/*.html content/**/*.inc theme/templates/*.html",
"prettier:check": "prettier -c *.json *.js css/* js/* content/**/*.html content/**/*.inc theme/templates/*.html"
"prettify": "prettier -w *.json *.js css/* js/* content/**/*.html content/**/*.inc theme/templates/**/*.html",
"prettier:check": "prettier -c *.json *.js css/* js/* content/**/*.html content/**/*.inc theme/templates/**/*.html"
},
"dependencies": {
"@babel/cli": "^7.24.8",
Expand Down
0 theme/static/images/logo.svg → theme/static/images/logo-black.svg
View file
File renamed without changes
Loading

0 comments on commit cf469cd

Please sign in to comment.