ep_is_edit_mode()) { return ['ep-styles']; } else { return ['ep-dark-mode']; } } public function get_script_depends() { if ($this->ep_is_edit_mode()) { return ['darkmode', 'ep-scripts']; } else { return ['darkmode', 'ep-dark-mode']; } } public function get_custom_help_url() { return 'https://youtu.be/nuYa-0sWFxU'; } protected function is_dynamic_content(): bool { return false; } protected function register_controls() { $this->start_controls_section( 'section_layout', [ 'label' => esc_html__('Dark Mode', 'bdthemes-dark-mode'), ] ); $this->add_control( 'default_mode', [ 'label' => esc_html__('Default Mode', 'bdthemes-element-pack') . BDTEP_NC, 'type' => Controls_Manager::SELECT, 'default' => 'light', 'options' => [ 'light' => esc_html__('Light', 'bdthemes-element-pack'), 'dark' => esc_html__('Dark', 'bdthemes-element-pack'), ], 'frontend_available' => true, 'render_type' => 'none' ] ); $this->add_control( 'toggle_position', [ 'label' => esc_html__('Toggle Position', 'bdthemes-element-pack') . BDTEP_NC, 'type' => Controls_Manager::SELECT, 'default' => 'bottom-right', 'options' => [ 'top-left' => esc_html__('Top Left', 'bdthemes-element-pack'), 'top-right' => esc_html__('Top Right', 'bdthemes-element-pack'), 'bottom-left' => esc_html__('Bottom Left', 'bdthemes-element-pack'), 'bottom-right' => esc_html__('Bottom Right', 'bdthemes-element-pack'), ], // 'selectors_dictionary' => [ // 'top-left' => 'top:var(--bdt-vertical-offset, 32px); left:var(--bdt-horizontal-offset) !important; bottom:unset; right:unset !important;', // 'top-right' => 'top:var(--bdt-vertical-offset, 32px); right:var(--bdt-horizontal-offset) !important; bottom:unset; left:unset !important;', // 'bottom-left' => 'bottom:var(--bdt-vertical-offset, 32px); left:var(--bdt-horizontal-offset, 32px); top:unset; right:unset;', // 'bottom-right' => 'bottom:var(--bdt-vertical-offset, 32px); right:var(--bdt-horizontal-offset, 32px); top:unset; left:unset;', // ], // 'selectors' => [ // '.darkmode-toggle, .darkmode-layer' => '{{VALUE}}', // ], 'frontend_available' => true, 'render_type' => 'none' ] ); $this->add_responsive_control( 'icon_horizontal_offset', [ 'label' => esc_html__('Horizontal Offset', 'bdthemes-element-pack'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => -100, 'max' => 100, ], ], 'selectors' => [ '.darkmode-toggle, .darkmode-layer' => '--bdt-horizontal-offset: {{SIZE}}{{UNIT}};', ], // 'render_type' => 'none', ] ); $this->add_responsive_control( 'icon_vertical_offset', [ 'label' => esc_html__('Vertical Offset', 'bdthemes-element-pack'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => -100, 'max' => 100, ], ], 'selectors' => [ '.darkmode-toggle, .darkmode-layer' => '--bdt-vertical-offset: {{SIZE}}{{UNIT}};', ], // 'render_type' => 'none' ] ); $this->add_control( 'time', [ 'label' => esc_html__('Animation Time (ms)', 'bdthemes-element-pack'), 'type' => Controls_Manager::SLIDER, //'size_units' => 's', 'range' => [ 'px' => [ 'min' => 100, 'max' => 1500, ], ], 'default' => [ 'unit' => 'px', 'size' => 500, ], 'frontend_available' => true, 'render_type' => 'none' ] ); $this->add_control( 'ignore_element', [ 'label' => esc_html__('Ignore Elements', 'bdthemes-element-pack') . BDTEP_NC, 'type' => Controls_Manager::TEXTAREA, 'placeholder' => '.my-image, .my-widget', 'dynamic' => [ 'active' => true, ], 'frontend_available' => true, 'render_type' => 'none' ] ); $this->add_control( 'ignore_element_notes', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => esc_html__('Note: add Class ID of elements to exempt them from dark mode effect, i.e. images, special background, etc.', 'bdthemes-element-pack'), 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info', ] ); $this->add_control( 'saveInCookies', [ 'label' => esc_html__('Save User Action', 'bdthemes-element-pack') . BDTEP_NC, 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'frontend_available' => true, ] ); $this->add_control( 'save_cookies_notes', [ 'type' => Controls_Manager::RAW_HTML, 'raw' => esc_html__('Note: saves the last user action on the browser, i.e. loads the last browser condition whether dark mode was on/off. Cookie is exempted on Elementor Editor.', 'bdthemes-element-pack'), 'content_classes' => 'elementor-panel-alert elementor-panel-alert-info', ] ); $this->add_control( 'autoMatchOsTheme', [ 'label' => esc_html__('Auto Match On Theme', 'bdthemes-element-pack'), 'type' => Controls_Manager::SWITCHER, 'return_value' => 'yes', 'frontend_available' => true, ] ); $this->end_controls_section(); $this->start_controls_section( 'section_style', [ 'label' => esc_html__('Dark Mode', 'bdthemes-element-pack'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->start_controls_tabs('tabs_dark_mode_style'); $this->start_controls_tab( 'tab_day_mode_normal', [ 'label' => esc_html__('Day Mode', 'bdthemes-element-pack'), ] ); $this->add_control( 'default_background', [ 'label' => esc_html__('Background', 'bdthemes-element-pack'), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'frontend_available' => true, ] ); // $this->add_control( // 'icon_color_day', // [ // 'label' => esc_html__('Icon Color', 'bdthemes-element-pack'), // 'type' => Controls_Manager::COLOR, // 'default' => '#fff', // 'selectors' => [ // '.darkmode-toggle i' => 'color: {{VALUE}}', // ], // ] // ); $this->end_controls_tab(); $this->start_controls_tab( 'tab_dark_mode_normal', [ 'label' => esc_html__('Dark Mode', 'bdthemes-element-pack'), ] ); $this->add_control( 'mix_color', [ 'label' => esc_html__('Content Mix Color', 'bdthemes-element-pack'), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'frontend_available' => true, ] ); // $this->add_control( // 'icon_color_dark', // [ // 'label' => esc_html__('Icon Color', 'bdthemes-element-pack'), // 'type' => Controls_Manager::COLOR, // 'default' => '#000', // 'selectors' => [ // '.darkmode-toggle.darkmode-toggle--white i' => 'color: {{VALUE}}', // ], // ] // ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); $this->start_controls_section( 'toggle_button_style', [ 'label' => esc_html__('Toggle Button', 'bdthemes-element-pack'), 'tab' => Controls_Manager::TAB_STYLE, ] ); $this->add_control( 'icon_size', [ 'label' => esc_html__('Icon Size', 'bdthemes-element-pack'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 1, 'max' => 50, ], ], 'default' => [ 'unit' => 'px', 'size' => 18, ], 'selectors' => [ '.darkmode-toggle' => 'font-size: {{SIZE}}{{UNIT}};', ], 'separator' => 'before', ] ); $this->add_control( 'icon_button_width', [ 'label' => esc_html__('Toggle Size', 'bdthemes-element-pack'), 'type' => Controls_Manager::SLIDER, 'range' => [ 'px' => [ 'min' => 20, 'max' => 100, ], ], 'default' => [ 'unit' => 'px', 'size' => 54, ], 'selectors' => [ '.darkmode-toggle, .darkmode-layer:not(.darkmode-layer--expanded)' => 'height: {{SIZE}}{{UNIT}} !important; width: {{SIZE}}{{UNIT}} !important;', ], ] ); $this->add_group_control( Group_Control_Border::get_type(), [ 'name' => 'icon_border', 'label' => esc_html__('Border', 'bdthemes-element-pack'), 'selector' => '.darkmode-toggle', ] ); $this->add_control( 'icon_border_radius', [ 'label' => esc_html__('Border Radius', 'bdthemes-element-pack'), 'type' => Controls_Manager::DIMENSIONS, 'size_units' => ['px', '%'], 'selectors' => [ '.darkmode-toggle' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};', ], ] ); $this->start_controls_tabs('tabs_toggle_button'); $this->start_controls_tab( 'toggle_button_day_mode', [ 'label' => esc_html__('Day Mode', 'bdthemes-element-pack'), ] ); // $this->add_control( // 'icon_color_day', // [ // 'label' => esc_html__('Icon Color', 'bdthemes-element-pack'), // 'type' => Controls_Manager::COLOR, // 'default' => '#fff', // 'selectors' => [ // '.darkmode-toggle i' => 'color: {{VALUE}}', // ], // ] // ); $this->add_control( 'day_mode_icon_background', [ 'label' => esc_html__('Icon Background', 'bdthemes-element-pack'), 'type' => Controls_Manager::COLOR, 'default' => '#100f2c', 'selectors' => [ '.darkmode-toggle' => 'background: {{VALUE}}', ], ] ); $this->end_controls_tab(); $this->start_controls_tab( 'toggle_button_dark_mode', [ 'label' => esc_html__('Dark Mode', 'bdthemes-element-pack'), ] ); // $this->add_control( // 'icon_color_dark', // [ // 'label' => esc_html__('Icon Color', 'bdthemes-element-pack'), // 'type' => Controls_Manager::COLOR, // 'default' => '#000', // 'selectors' => [ // '.darkmode-toggle.darkmode-toggle--white i' => 'color: {{VALUE}}', // ], // ] // ); $this->add_control( 'dark_mode_icon_background', [ 'label' => esc_html__('Icon Background', 'bdthemes-element-pack'), 'type' => Controls_Manager::COLOR, 'default' => '#fff', 'selectors' => [ '.darkmode-toggle.darkmode-toggle--white' => 'background: {{VALUE}}', ], ] ); $this->end_controls_tab(); $this->end_controls_tabs(); $this->end_controls_section(); } public function render() { $settings = $this->get_settings_for_display(); ?>