.darkify_dark_mode_enabled .darkify_style_all:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { background: var(--darkify_dark_mode_bg) !important; background-color: var(--darkify_dark_mode_bg) !important; color: var(--darkify_dark_mode_text_color) !important; border-color: var(--darkify_dark_mode_border_color) !important; } .darkify_dark_mode_enabled .darkify_style_bg_txt:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { background: var(--darkify_dark_mode_bg) !important; background-color: var(--darkify_dark_mode_bg) !important; color: var(--darkify_dark_mode_text_color) !important; } .darkify_dark_mode_enabled .darkify_style_bg_border:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { background: var(--darkify_dark_mode_bg) !important; background-color: var(--darkify_dark_mode_bg) !important; border-color: var(--darkify_dark_mode_border_color) !important; } .darkify_dark_mode_enabled .darkify_style_txt_border:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { color: var(--darkify_dark_mode_text_color) !important; border-color: var(--darkify_dark_mode_border_color) !important; } .darkify_dark_mode_enabled .darkify_style_bg:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { background: var(--darkify_dark_mode_bg) !important; background-color: var(--darkify_dark_mode_bg) !important; } .darkify_dark_mode_enabled .darkify_style_txt:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { color: var(--darkify_dark_mode_text_color) !important; } .darkify_dark_mode_enabled .darkify_style_border:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { border-color: var(--darkify_dark_mode_border_color) !important; } .darkify_dark_mode_enabled .darkify_style_secondary_bg:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { background: var(--darkify_dark_mode_secondary_bg) !important; background-color: var(--darkify_dark_mode_secondary_bg) !important; } /*Handle Link Style*/ .darkify_dark_mode_enabled .darkify_style_link:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore *, .darkify-nav ul li a ) { color: var(--darkify_dark_mode_link_color) !important; } .darkify_dark_mode_enabled .darkify_style_link:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ):hover { color: var(--darkify_dark_mode_link_hover_color) !important; } /*Handle Form Element Style*/ .darkify_dark_mode_enabled .darkify_style_form_element:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { background: var(--darkify_dark_mode_input_bg) !important; background-color: var(--darkify_dark_mode_input_bg) !important; color: var(--darkify_dark_mode_input_text_color) !important; } .darkify_dark_mode_enabled .darkify_style_form_element:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * )::placeholder { color: var(--darkify_dark_mode_input_placeholder_color) !important; } /*Handle Button Style*/ .darkify_dark_mode_enabled .darkify_style_button:not( .darkify_switch, .darkify_switch *, .darkify_ignore, .darkify_ignore * ) { background: var(--darkify_dark_mode_btn_bg) !important; background-color: var(--darkify_dark_mode_btn_bg) !important; color: var(--darkify_dark_mode_btn_text_color) !important; } /* ======================== Admin Bar Menu Design ===========================*/ .darkify_admin_bar_switch_container { cursor: pointer !important; display: flex; align-items: center; justify-content: center; width: 40px !important; height: 32px !important; } .darkify_admin_bar_switch_container .ab-item { height: 18px !important; cursor: pointer !important; background-color: #ffffff !important; -webkit-mask: url(../img/switch_icons/switch_apple_light.svg) no-repeat center; mask: url(../img/switch_icons/switch_apple_light.svg) no-repeat center; } .darkify_dark_mode_enabled .darkify_admin_bar_switch_container .ab-item { -webkit-mask: url(../img/switch_icons/switch_apple_dark.svg) no-repeat center; mask: url(../img/switch_icons/switch_apple_dark.svg) no-repeat center; } /* ======================== Block Editor Menu Design ===========================*/ .darkify_block_editor_switch { height: 33px; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; outline: 0; border: 0; background: #121116; border-radius: 3px; padding: 0 12px; } .darkify_dark_mode_enabled .darkify_block_editor_switch { background: #ffffff; } .darkify_block_editor_switch .icon { width: 20px; height: 20px; background-color: #ffffff !important; } /* ======================== Switch Design ===========================*/ .darkify_switch { --darkify_switch_position_from_top_right_top: 40px; --darkify_switch_position_from_top_right_right: 40px; --darkify_switch_position_from_bottom_right_bottom: 40px; --darkify_switch_position_from_bottom_right_right: 40px; --darkify_switch_position_from_top_left_top: 40px; --darkify_switch_position_from_top_left_left: 40px; --darkify_switch_position_from_bottom_left_bottom: 40px; --darkify_switch_position_from_bottom_left_left: 40px; --darkify_switch_position_from_top_right_top_in_mobile: 40px; --darkify_switch_position_from_top_right_right_in_mobile: 40px; --darkify_switch_position_from_bottom_right_bottom_in_mobile: 40px; --darkify_switch_position_from_bottom_right_right_in_mobile: 40px; --darkify_switch_position_from_top_left_top_in_mobile: 40px; --darkify_switch_position_from_top_left_left_in_mobile: 40px; --darkify_switch_position_from_bottom_left_bottom_in_mobile: 40px; --darkify_switch_position_from_bottom_left_left_in_mobile: 40px; --darkify_switch_tooltip_bg_color: #142434; --darkify_switch_tooltip_text_color: #b0cbe7; } .darkify_switch, .darkify_switch * { box-sizing: border-box; } .darkify_switch.darkify_top_left, .darkify_switch.darkify_top_right, .darkify_switch.darkify_bottom_left, .darkify_switch.darkify_bottom_right { position: fixed; z-index: 99999; } .darkify_switch.darkify_top_left { top: var(--darkify_switch_position_from_top_left_left_in_mobile); left: var(--darkify_switch_position_from_top_left_left_in_mobile); } .darkify_switch.darkify_top_right { top: var(--darkify_switch_position_from_top_right_top_in_mobile); right: var(--darkify_switch_position_from_top_right_right_in_mobile); } .darkify_switch.darkify_bottom_left { bottom: var(--darkify_switch_position_from_bottom_left_bottom); left: var(--darkify_switch_position_from_bottom_left_left); } .darkify_switch.darkify_bottom_right { bottom: var(--darkify_switch_position_from_bottom_right_bottom); right: var(--darkify_switch_position_from_bottom_right_right); } .darkify_switch.darkify_absolute_position { position: absolute; z-index: unset; } @media only screen and (max-width: 600px) { .darkify_switch.darkify_hide_on_mobile { display: none; } } @media only screen and (max-width: 600px) { .darkify_switch.darkify_top_left_in_mobile, .darkify_switch.darkify_top_right_in_mobile, .darkify_switch.darkify_bottom_left_in_mobile, .darkify_switch.darkify_bottom_right_in_mobile { position: fixed; } .darkify_switch.darkify_top_left_in_mobile { top: var(--darkify_switch_position_from_top_left_top_in_mobile); left: var(--darkify_switch_position_from_top_left_left_in_mobile); bottom: unset; right: unset; } .darkify_switch.darkify_top_right_in_mobile { top: var(--darkify_switch_position_from_top_right_top_in_mobile); right: var(--darkify_switch_position_from_top_right_right_in_mobile); bottom: unset; left: unset; } .darkify_switch.darkify_bottom_left_in_mobile { bottom: var(--darkify_switch_position_from_bottom_left_bottom_in_mobile); left: var(--darkify_switch_position_from_bottom_left_left_in_mobile); top: unset; right: unset; } .darkify_switch.darkify_bottom_right_in_mobile { bottom: var(--darkify_switch_position_from_bottom_right_bottom_in_mobile); right: var(--darkify_switch_position_from_bottom_right_right_in_mobile); top: unset; left: unset; } } .darkify_tooltip .darkify_tooltiptext { visibility: hidden; width: 120px; background-color: var(--darkify_switch_tooltip_bg_color); color: var(--darkify_switch_tooltip_text_color); font-size: 12px; text-align: center; border-radius: 0; padding: 5px 0; position: absolute; z-index: 1; } .darkify_tooltip .darkify_tooltiptext::after { content: ""; position: absolute; border-width: 5px; border-style: solid; } .darkify_tooltip:hover .darkify_tooltiptext { visibility: visible; } .darkify_tooltip.darkify_tooltip_top .darkify_tooltiptext { bottom: calc(100% + 10px); left: 50%; margin-left: -60px; } .darkify_tooltip.darkify_tooltip_top .darkify_tooltiptext::after { left: 50%; margin-left: -5px; top: 100%; border-color: var(--darkify_switch_tooltip_bg_color) transparent transparent transparent; } .darkify_tooltip.darkify_tooltip_bottom .darkify_tooltiptext { top: calc(100% + 10px); left: 50%; margin-left: -60px; } .darkify_tooltip.darkify_tooltip_bottom .darkify_tooltiptext::after { left: 50%; margin-left: -5px; bottom: 100%; border-color: transparent transparent var(--darkify_switch_tooltip_bg_color) transparent; } .darkify_tooltip.darkify_tooltip_left .darkify_tooltiptext { right: calc(100% + 10px); top: calc(50% - 15px); } .darkify_tooltip.darkify_tooltip_left .darkify_tooltiptext::after { top: 50%; left: 100%; margin-top: -5px; border-color: transparent transparent transparent var(--darkify_switch_tooltip_bg_color); } .darkify_tooltip.darkify_tooltip_right .darkify_tooltiptext { left: calc(100% + 10px); top: calc(50% - 15px); } .darkify_tooltip.darkify_tooltip_right .darkify_tooltiptext::after { top: 50%; right: 100%; margin-top: -5px; border-color: transparent var(--darkify_switch_tooltip_bg_color) transparent transparent; } /* ============== Switch Style ============== */ .darkify_switch_style { --darkify_switch_width_height: 60px; --darkify_switch_icon_size: 50px; --darkify_switch_border_radius: 7px; --darkify_switch_light_mode_bg: #121116; --darkify_switch_dark_mode_bg: #ffffff; --darkify_switch_light_mode_color: #ffffff; --darkify_switch_dark_mode_color: #121116; } .darkify_switch_style{ cursor: pointer; z-index: 9999; width: var(--darkify_switch_width_height); height: var(--darkify_switch_width_height); border-radius: var(--darkify_switch_border_radius); background: var(--darkify_switch_light_mode_bg); display: flex; align-items: center; justify-content: center; fill: var(--darkify_switch_light_mode_icon_color); stroke: var(--darkify_switch_light_mode_icon_color); } .darkify_switch_style .theme-toggle{ display: flex; align-items: center; justify-content: center; } .darkify_switch_style svg { width: var(--darkify_switch_icon_size); height: var(--darkify_switch_icon_size); color: var(--darkify_switch_light_mode_color); stroke: var(--darkify_switch_light_mode_color); } .darkify_dark_mode_enabled .darkify_switch_style{ background: var(--darkify_switch_dark_mode_bg); } .darkify_dark_mode_enabled .darkify_switch_style svg { color: var(--darkify_switch_dark_mode_color); stroke: var(--darkify_switch_dark_mode_color); }