diff --git a/dark.css b/dark.css
index 3fec2ed..c320e6c 100644
--- a/dark.css
+++ b/dark.css
@@ -293,5 +293,5 @@ body:where(.dark) .nav-menu.mobile > div > ul { border-top: 1px solid rgba(255,2
body:where(.dark) .toggle-search:focus #svg-close { fill: rgba(255,255,255,0.6); }
}
-body:where(.dark) .site-title a img,
-body:where(.dark) .site-title a svg { filter: invert(1); }
\ No newline at end of file
+body:where(.dark.invert-dark-logo) .site-title a img,
+body:where(.dark.invert-dark-logo) .site-title a svg { filter: invert(1); }
\ No newline at end of file
diff --git a/functions.php b/functions.php
index 79bf4e4..b956005 100644
--- a/functions.php
+++ b/functions.php
@@ -541,6 +541,7 @@ if ( ! function_exists( 'shapebox_body_class' ) ) {
if ( has_nav_menu( 'mobile' ) ) { $classes[] = 'mobile-menu'; }
if ( get_theme_mod( 'mobile-sidebar-hide','on' ) != 'on' ) { $classes[] = 'mobile-sidebar-hide'; }
if ( get_theme_mod( 'dark-theme' ,'off' ) == 'on' ) { $classes[] = 'dark'; }
+ if ( get_theme_mod( 'invert-logo' ,'on' ) == 'on' ) { $classes[] = 'invert-dark-logo'; }
if (! ( is_user_logged_in() ) ) { $classes[] = 'logged-out'; }
return $classes;
}
diff --git a/functions/dynamic-styles.php b/functions/dynamic-styles.php
index 6f36c00..1ee12d4 100644
--- a/functions/dynamic-styles.php
+++ b/functions/dynamic-styles.php
@@ -148,7 +148,8 @@ if ( ! function_exists( 'shapebox_dynamic_css' ) ) {
.blog-card-author a,
.blog-single-author a,
.widget_calendar caption,
-.alx-tabs-nav li.active a { background: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%); }
+.alx-tabs-nav li.active a,
+#theme-toggle-btn:before { background: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%); }
#theme-toggle i { background-image: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%); }
@@ -174,7 +175,8 @@ if ( ! function_exists( 'shapebox_dynamic_css' ) ) {
.blog-card-author a,
.blog-single-author a,
.widget_calendar caption,
-.alx-tabs-nav li.active a { background: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%); }
+.alx-tabs-nav li.active a,
+#theme-toggle-btn:before { background: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%); }
#theme-toggle i { background-image: linear-gradient(90deg, '.esc_attr( get_theme_mod('gradient-left') ).' 0%, '.esc_attr( get_theme_mod('gradient-right') ).' 100%); }
diff --git a/functions/theme-options.php b/functions/theme-options.php
index 4a5263e..c325725 100644
--- a/functions/theme-options.php
+++ b/functions/theme-options.php
@@ -720,6 +720,15 @@ Kirki::add_field( 'shapebox_theme', array(
'section' => 'styling',
'default' => 'off',
) );
+// Styling: Invert Dark Logo
+Kirki::add_field( 'shapebox_theme', array(
+ 'type' => 'switch',
+ 'settings' => 'invert-logo',
+ 'label' => esc_html__( 'Invert Dark Logo Color', 'shapebox' ),
+ 'description' => esc_html__( 'Change color for the logo in dark mode', 'shapebox' ),
+ 'section' => 'styling',
+ 'default' => 'on',
+) );
// Styling: Primary Color
Kirki::add_field( 'shapebox_theme', array(
'type' => 'color',
diff --git a/header.php b/header.php
index d9eb338..7c18159 100644
--- a/header.php
+++ b/header.php
@@ -16,8 +16,7 @@
@@ -69,11 +68,11 @@
-
+
diff --git a/js/theme-toggle.js b/js/theme-toggle.js
index 6090ce1..1c1bc29 100644
--- a/js/theme-toggle.js
+++ b/js/theme-toggle.js
@@ -1,18 +1,22 @@
-// DOM Elements
-const darkButton = document.getElementById('dark');
-const lightButton = document.getElementById('light');
-const body = document.body;
+// Get current theme
+var theme = localStorage.getItem( 'theme' );
+// Set defaults if theme is not defined.
+if ( ! theme ) {
+ localStorage.setItem( 'theme', 'light' );
+ theme = 'light';
+}
+// Add theme to the body.
+document.body.classList.add( theme );
-// Apply the cached theme on reload
-body.classList.add(theme);
-
-// Button Event Handlers
-darkButton.onclick = () => {
- body.classList.replace('light', 'dark');
- localStorage.setItem('theme', 'dark');
-};
-
-lightButton.onclick = () => {
- body.classList.replace('dark', 'light');
- localStorage.setItem('theme', 'light');
-};
\ No newline at end of file
+// Handle onClick events
+document.getElementById( 'theme-toggle' ).addEventListener( 'click', () => {
+ // Cleanup classes from body.
+ document.body.classList.remove( 'light' );
+ document.body.classList.remove( 'dark' );
+ // Change the theme.
+ theme = ( theme === 'light' ) ? 'dark' : 'light';
+ // Save the theme.
+ localStorage.setItem( 'theme', theme );
+ // Apply the theme.
+ document.body.classList.add( theme );
+});
\ No newline at end of file
diff --git a/languages/shapebox.pot b/languages/shapebox.pot
index 11c2b63..eac1cc8 100644
--- a/languages/shapebox.pot
+++ b/languages/shapebox.pot
@@ -2,7 +2,7 @@
msgid ""
msgstr ""
"Project-Id-Version: Shapebox\n"
-"POT-Creation-Date: 2022-04-05 14:20+0200\n"
+"POT-Creation-Date: 2022-08-29 11:35+0200\n"
"PO-Revision-Date: 2018-09-21 21:27+0100\n"
"Last-Translator: \n"
"Language-Team: \n"
@@ -127,19 +127,19 @@ msgstr ""
msgid "Footer 4"
msgstr ""
-#: functions.php:687
+#: functions.php:688
msgid "Alx Extensions"
msgstr ""
-#: functions.php:691
+#: functions.php:692
msgid "Meta Box"
msgstr ""
-#: functions.php:695
+#: functions.php:696
msgid "Regenerate Thumbnails"
msgstr ""
-#: functions.php:699
+#: functions.php:700
msgid "WP-PageNavi"
msgstr ""
@@ -784,22 +784,30 @@ msgid "Do not use with dark theme enabled"
msgstr ""
#: functions/theme-options.php:727
+msgid "Invert Dark Logo Color"
+msgstr ""
+
+#: functions/theme-options.php:728
+msgid "Change color for the logo in dark mode"
+msgstr ""
+
+#: functions/theme-options.php:736
msgid "Primary Color"
msgstr ""
-#: functions/theme-options.php:735
+#: functions/theme-options.php:744
msgid "Gradient Left"
msgstr ""
-#: functions/theme-options.php:743
+#: functions/theme-options.php:752
msgid "Gradient Right"
msgstr ""
-#: functions/theme-options.php:751
+#: functions/theme-options.php:760
msgid "Background Color"
msgstr ""
-#: header.php:26
+#: header.php:25
msgid "Skip to content"
msgstr ""
diff --git a/readme.txt b/readme.txt
index 3653a28..9a747af 100644
--- a/readme.txt
+++ b/readme.txt
@@ -87,6 +87,11 @@ Sidebar images
== Changelog ==
+= 1.1.0 - 2022-08-29 =
+* Improved the dark mode toggle
+* Added option to disable inverted color for dark mode logo
+* Updated language files
+
= 1.0.9 - 2022-08-18 =
* Fixed so that thumbnails are clickable
diff --git a/responsive.css b/responsive.css
index 2391d2a..1354840 100644
--- a/responsive.css
+++ b/responsive.css
@@ -104,12 +104,10 @@
#nav-header.nav-container { margin-top: 0; }
- #theme-toggle { padding: 7px; width: 50px; height: 20px; position: absolute; left: 60px; top: -40px; bottom: auto; z-index: 9; margin: 0; }
- #theme-toggle i { font-size: 20px; float: left; }
- #theme-toggle i.fa-moon { margin-top: 0; margin-left: 10px; }
- #theme-toggle-ball { }
- body.light #theme-toggle-ball { top: 2px; left: 2px; }
- body.dark #theme-toggle-ball { top: 2px; right: 2px; left: auto; bottom: auto; }
+ #theme-toggle { position: absolute; top: -39px; left: 70px; margin: 0; }
+ #theme-toggle i { float: left; margin: 4px 0 0; }
+ #theme-toggle-btn { width: 64px; height: 32px; margin-left: 32px; }
+ body.dark #theme-toggle-btn:before { top: 2px; left: 34px; margin: 0; }
.s2 { box-shadow: none; position: relative; width: 100%; text-align: center; top: 0!important; }
.s2 .social-links li:before { display: none; }
diff --git a/style.css b/style.css
index eeed31b..5a7c3a0 100644
--- a/style.css
+++ b/style.css
@@ -1,7 +1,7 @@
/*
Theme Name: Shapebox
Theme URI: http://alx.media/themes/shapebox/
-Version: 1.0.9
+Version: 1.1.0
Requires at least: 5.0
Requires PHP: 5.6
Tested up to: 6.0
@@ -674,21 +674,20 @@ box-shadow: 0 0 2px rgba(255,255,255,0.4);
.s2 .social-links .social-tooltip:hover:after { background: #333; color: #fff; padding: 7px 10px; top: 14px; left: 50px; right: auto; }
.s2 .social-links .social-tooltip:hover:before { top: 24px; left: 45px; right: auto; border-color: transparent #333; border-width: 5px 5px 5px 0; }
-#theme-toggle { border-radius: 30px; margin: 20px 20px 0; padding: 10px 8px; position: relative; }
-#theme-toggle-ball { width: 30px; height: 30px; border-radius: 100%; position: absolute; left: 5px; }
-#theme-toggle a { display: block; }
-#theme-toggle i { color: #fff; font-size: 24px; display: block; margin: 0 auto; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(90deg, #c14bff 0%, #6c5dd3 100%); -webkit-box-decoration-break: clone; box-decoration-break: clone; color: transparent; }
-#theme-toggle i.fa-moon { margin-top: 10px; }
-body.light #theme-toggle { background: #333; }
-body.light #theme-toggle-ball { background: #fff; top: 5px; }
-body.dark #theme-toggle { background: #fff; }
-body.dark #theme-toggle-ball { background: #141416; bottom: 5px; }
+#theme-toggle { background: none; border: 0; padding: 0; display: block; margin: 30px auto 0; cursor: pointer; }
+#theme-toggle i { display: block; font-size: 24px; margin: 0 auto 10px; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(90deg, #c14bff 0%, #6c5dd3 100%); -webkit-box-decoration-break: clone; box-decoration-break: clone; color: transparent; }
+#theme-toggle .fa-sun { display: block; }
+#theme-toggle .fa-moon { display: none; }
+#theme-toggle-btn { background: #f1f1f1; box-shadow: inset 0 1px 0 rgba(0,0,0,0.05); position: relative; display: block; width: 32px; height: 64px; border-radius: 16px; margin: 0 auto; }
+#theme-toggle-btn:before { background: linear-gradient(90deg, #c14bff 0%, #6c5dd3 100%); transition: all .25s; border: 4px solid #ffffff; box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.16); content: ""; position: absolute; top: 50%; left: 2px; top: 2px; width: 20px; height: 20px; border-radius: 50%; }
+body.dark #theme-toggle .fa-sun { display: none; }
+body.dark #theme-toggle .fa-moon { display: block; }
+body.dark #theme-toggle-btn { background: #212226; box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); }
+body.dark #theme-toggle-btn:before { border-color: #141416; top: 100%; margin-top: -30px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 1px 0 rgba(255,255,255,0.1); }
.site-title { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; float: left; line-height: 60px; padding: 10px 0 10px 0; position: relative; z-index: 2; }
.site-title a { display: block; color: #333; max-width: 100%; }
.site-title a img { display: block; max-width: 100%; max-height: 60px; height: auto; padding: 0; margin: 0 auto; -webkit-border-radius: 0; border-radius: 0; }
-.site-title a img,
-.site-title a svg { filter: invert(0); }
.site-description { font-size: 15px; font-weight: 300; color: #aaa; float: left; margin: 30px 0 0 20px; position: relative; z-index: 2; }
.site-header { background: #eee; }
.site-image { display: block; margin: 0 auto; max-height: 400px; }