feat: Added color palette switch

Also fixed critical bug of main menu overlapping
bulhakovolexii · Dec 25, 2024 · b4b9de9 · b4b9de9
1 parent e6beb91
commit b4b9de9
Show file tree

Hide file tree

Showing 3 changed files with 141 additions and 5 deletions.
diff --git a/functions.php b/functions.php
@@ -129,6 +129,46 @@ function child_theme_setup_editor_features()
 }
 add_action('after_setup_theme', 'child_theme_setup_editor_features', 20);
 
+/**
+ * Adding a color palette switcher
+ */
+function register_theme_customizer($wp_customize)
+{
+    $wp_customize->add_setting('theme_palette', [
+        'default' => 'Dark',
+        'transport' => 'refresh',
+    ]);
+
+    $wp_customize->add_section('theme_options', [
+        'title' => 'Кольорова палітра',
+        'priority' => 30,
+    ]);
+
+    $wp_customize->add_control('theme_palette_control', [
+        'label' => 'Оберіть кольорову палітру',
+        'section' => 'theme_options',
+        'settings' => 'theme_palette',
+        'type' => 'radio',
+        'choices' => [
+            'dark' => 'Dark',
+            'light' => 'Light',
+        ],
+    ]);
+}
+add_action('customize_register', 'register_theme_customizer');
+
+function add_theme_body_class($classes)
+{
+    $theme_palette = get_theme_mod('theme_palette', 'default');
+
+    if ($theme_palette !== 'default') {
+        $classes[] = 'theme-' . $theme_palette;
+    }
+
+    return $classes;
+}
+add_filter('body_class', 'add_theme_body_class');
+
 /**
  * Enables theme color inheritance for qubely
  */

diff --git a/scss/_fixes.scss b/scss/_fixes.scss
@@ -554,10 +554,6 @@ a.custom-logo-link {
 }
 
 @media only screen and (min-width: 1000px) {
-    #main-nav {
-        overflow-x: hidden;
-    }
-
     .header-search-box .search-box-wrap {
         position: absolute;
         z-index: 100;
@@ -589,6 +585,11 @@ a.custom-logo-link {
             box-shadow: none;
         }
 
+        .search-form input.search-field {
+            height: 15px;
+            padding: 10px 0px;
+        }
+
         .header-search-box .search-box-wrap {
             position: absolute;
             width: 0;
@@ -600,3 +601,98 @@ a.custom-logo-link {
         }
     }
 }
+
+body {
+    &.theme-light {
+        .top-news-title {
+            color: $khpi-black-50;
+            background-color: $khpi-red-900;
+            &::after {
+                border-color: $khpi-red-900;
+            }
+        }
+
+        #masthead {
+            background-color: $khpi-black-50;
+        }
+
+        .site-title > a {
+            color: $khpi-black-900;
+        }
+
+        .site-description {
+            // same as $khpi-black-900 but with opacity
+            color: rgba(42, 42, 42, 0.64);
+        }
+
+        #quick-contact {
+            a,
+            span {
+                color: $khpi-black-900;
+            }
+
+            li::before {
+                color: $khpi-black-900;
+            }
+        }
+
+        @media only screen and (min-width: 1000px) {
+            #main-nav {
+                border-top: 1px solid $khpi-black-200;
+                border-right: 1px solid $khpi-black-200;
+                border-left: 1px solid $khpi-black-200;
+            }
+        }
+
+        #footer-widgets {
+            background-color: $khpi-black-300;
+            // same as $khpi-black-900 but with opacity
+            color: rgba(42, 42, 42, 0.75);
+
+            .widget-title {
+                color: $khpi-black-900;
+            }
+
+            @media only screen and (max-width: 479px) {
+                .footer-widget-area:first-child {
+                    border-top: none;
+                }
+                .footer-widget-area {
+                    border-top: 1px solid $khpi-black-500;
+                }
+            }
+
+            p {
+                // same as $khpi-black-900 but with opacity
+                color: rgba(42, 42, 42, 0.75);
+            }
+
+            a {
+                color: $khpi-red-900;
+            }
+
+            a:visited {
+                color: $khpi-red-900;
+            }
+
+            a:hover,
+            a:focus,
+            a:active {
+                text-decoration: underline;
+            }
+
+            ul li::before {
+                color: $khpi-red-900;
+            }
+        }
+
+        .widget .wp-block-tag-cloud a {
+            border: 1px solid $khpi-black-500;
+        }
+
+        .widget .wp-block-tag-cloud a:hover {
+            border: 1px solid $khpi-red-900;
+            color: $khpi-red-900;
+        }
+    }
+}
diff --git a/scss/_main.scss b/scss/_main.scss
@@ -3,7 +3,7 @@
  * Theme URI:         https://github.com/bulhakovolexii/KhPI-University-Hub
  * Template:          university-hub
  * Description:       Дочірня тема для wordpress, що базується на темі University Hub від WEN Themes і є її редизайном з дотриманням корпоративного стилю Національного технічного університету Харківський політехнічний інститут.
- * Version:           1.0.7
+ * Version:           1.0.8
  * Author:            Olexii Bulhakov
  * Author URI:        https://github.com/bulhakovolexii/
  * Tags:              one-column, two-columns, three-columns, left-sidebar, right-sidebar, custom-background, custom-menu, featured-images, full-width-template, translation-ready, theme-options, threaded-comments, footer-widgets, custom-logo, education, rtl-language-support