start_controls_section( 'darkify__settings', array( 'label' => esc_html__('Darkify', 'darkify'), 'tab' => \Elementor\Controls_Manager::TAB_CONTENT, ) ); // Switch style. $this->add_control( 'darkify_switch_heading', [ 'label' => __('Switch Style', 'darkify'), 'type' => \Elementor\Controls_Manager::HEADING, ] ); $this->add_control( 'style', [ 'type' => 'darkify_switch', 'options' => array_merge(['classic', 'expand', 'inner-moon', 'within', 'orbit', 'around', 'dark-side', 'horizon', 'eclipse', 'lightbulb', 'dark-inner', 'half-sun', 'simple', 'duality', 'dual', 'shift']), 'description' => __('Select the Dark Mode Switch Style', 'darkify'), 'default' => 1, 'id' => 'darkify-switch', 'classes' => 'darkify-switch-style-elementor', 'assets_url' => DARKIFY_DIR_URL . '/src/Admin/Framework/assets/images/', ] ); $this->add_control( 'size', [ 'label' => __('Switch Size', 'darkify'), 'type' => \Elementor\Controls_Manager::SELECT, 'options' => [ '0.6' => __('XS', 'darkify'), '0.8' => __('S', 'darkify'), '1.0' => __('M', 'darkify'), '1.2' => __('L', 'darkify'), '1.4' => __('XL', 'darkify'), '1.6' => __('XXL', 'darkify'), 'custom' => __('Custom', 'darkify'), ], 'default' => '1.0', ] ); $this->add_control( 'custom_size', [ 'label' => __('Custom Switch Size', 'darkify'), 'type' => \Elementor\Controls_Manager::NUMBER, 'min' => 40, 'max' => 5000, 'step' => 10, 'default' => 100, 'condition' => array( 'size' => 'custom', ), ] ); // ---------------------- // 1. SWITCH BACKGROUND // ---------------------- $this->add_control( 'switch_bg_heading', [ 'label' => __('Switch Background', 'darkify'), 'type' => \Elementor\Controls_Manager::HEADING, ] ); $this->add_control( 'switch_bg_light', [ 'label' => __('Light Mode', 'darkify'), 'type' => \Elementor\Controls_Manager::COLOR, 'default' => '#121116', 'selectors' => [ '{{WRAPPER}} .darkify_switch_style, {{WRAPPER}} .switch-shift .theme-toggle .toggle-thumb' => 'background-color: {{VALUE}};', ] ] ); $this->add_control( 'switch_bg_dark', [ 'label' => __('Dark Mode', 'darkify'), 'type' => \Elementor\Controls_Manager::COLOR, 'default' => '#ffffff', 'selectors' => [ '.darkify_dark_mode_enabled {{WRAPPER}} .darkify_switch_style, .darkify_dark_mode_enabled {{WRAPPER}} .switch-shift .theme-toggle .toggle-thumb' => 'background-color: {{VALUE}};', ], ] ); // ---------------------- // 2. SWITCH ICON COLOR // ---------------------- $this->add_control( 'switch_icon_heading', [ 'label' => __('Switch Icon Color', 'darkify'), 'type' => \Elementor\Controls_Manager::HEADING, 'condition' => array( 'style!' => ['duality', 'shift'], ), ] ); $this->add_control( 'switch_icon_light', [ 'label' => __('Light Mode', 'darkify'), 'type' => \Elementor\Controls_Manager::COLOR, 'default' => '#ffffff', 'condition' => array( 'style!' => ['duality', 'shift', 'dual'], ), 'selectors' => [ '{{WRAPPER}} .darkify_switch_style svg' => 'color: {{VALUE}}; stroke: {{VALUE}};', '{{WRAPPER}} .darkify_switch_style.switch-orbit .theme-toggle svg' => 'fill: {{VALUE}};', ], ] ); $this->add_control( 'switch_icon_dark', [ 'label' => __('Dark Mode', 'darkify'), 'type' => \Elementor\Controls_Manager::COLOR, 'default' => '#121116', 'condition' => array( 'style!' => ['duality', 'shift', 'dual'], ), 'selectors' => [ '.darkify_dark_mode_enabled {{WRAPPER}} .darkify_switch_style svg' => 'color: {{VALUE}}; stroke: {{VALUE}};', '{{WRAPPER}} .darkify_switch_style.switch-orbit .theme-toggle .toggle-sun svg' => 'fill: {{VALUE}};', ], ] ); // ---------------------- // 4. SWITCH BORDER // ---------------------- $this->add_control( 'switch_border_heading', [ 'label' => __('Switch Border', 'darkify'), 'type' => \Elementor\Controls_Manager::HEADING, ] ); // Border Width $this->add_control( 'switch_border_width', [ 'label' => __('Width', 'darkify'), 'type' => \Elementor\Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 10, ], ], 'default' => [ 'size' => 0, ], 'selectors' => [ '{{WRAPPER}} .darkify_switch_style' => 'border-width: {{SIZE}}{{UNIT}};', ], ] ); $this->add_control( 'switch_border_light', [ 'label' => __('Light Color', 'darkify'), 'type' => \Elementor\Controls_Manager::COLOR, 'default' => '#121116', 'selectors' => [ '{{WRAPPER}} .darkify_switch_style' => 'border-color: {{VALUE}};', ], ] ); $this->add_control( 'switch_border_dark', [ 'label' => __('Dark Color', 'darkify'), 'type' => \Elementor\Controls_Manager::COLOR, 'default' => '#ffffff', 'selectors' => [ '.darkify_dark_mode_enabled {{WRAPPER}} .darkify_switch_style' => 'border-color: {{VALUE}};', ], ] ); // Border Radius $this->add_control( 'switch_border_radius', [ 'label' => __('Radius', 'darkify'), 'type' => \Elementor\Controls_Manager::SLIDER, 'size_units' => ['px'], 'range' => [ 'px' => [ 'min' => 0, 'max' => 100, ], ], 'default' => [ 'size' => 7, ], 'selectors' => [ '{{WRAPPER}} .darkify_switch_style' => 'border-radius: {{SIZE}}{{UNIT}};', ], ] ); $this->add_responsive_control( 'align', [ 'label' => __('Alignment', 'darkify'), 'type' => \Elementor\Controls_Manager::CHOOSE, 'options' => [ 'left' => [ 'title' => __('Left', 'darkify'), 'icon' => 'dashicons dashicons-editor-alignleft', ], 'center' => [ 'title' => __('Center', 'darkify'), 'icon' => 'dashicons dashicons-editor-aligncenter', ], 'right' => [ 'title' => __('Right', 'darkify'), 'icon' => 'dashicons dashicons-editor-alignright', ], ], 'toggle' => true, 'default' => 'left', 'selectors' => [ '{{WRAPPER}}' => 'display: flex; justify-content: {{VALUE}};', ], ] ); // End section $this->end_controls_section(); } protected function render() { $settings = $this->get_settings_for_display(); $style = isset($settings['style']) ? $settings['style'] : 1; $size = isset($settings['size']) ? $settings['size'] : 1; $custom_size = isset($settings['custom_size']) ? $settings['custom_size'] : 100; if ('custom' === $size) { $switcher_size = $custom_size; } else { $switcher_size = $size * 100; } echo do_shortcode(wp_sprintf('[darkify switch="%s" icon_size="40px" light_mode_bg="#121116" dark_mode_bg="#ffffff" light_mode_color="#ffffff" dark_mode_color="#121116" border="0px" border_light_color="#121119" border_dark_color="#ffffff" border_radius="7px" switch_size="%s"]', esc_attr($style), esc_attr($switcher_size))); } }