颤动激活或停用深色主题

简介

在大多数操作系统中，深色主题越来越受欢迎，具有更好的视觉效果和更低的眼睛疲劳率。然而，在某些情况下，用户可能需要在不同的深色和浅色主题之间切换，并且还可能需要在主题之间添加颤动动画效果以增强用户体验。

本文将介绍如何使用以下几种编程语言实现颤动激活或停用深色主题所需的代码：

• HTML/CSS
• JavaScript (JQuery)
• Android
• iOS

HTML/CSS实现

<!-- HTML代码 -->
<div class="theme-switcher">
    <label class="switch">
        <input type="checkbox" class="switch-input" />
        <span class="slider"></span>
    </label>
    <span class="theme-switcher-text">激活深色主题</span>
</div>

<!-- CSS代码 -->
.theme-switcher {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
}
.switch-input {
    height: 0;
    width: 0;
    opacity: 0;
}
.switch {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 20px;
    transform: scale(0.75);
    margin-right: 5px;
}
.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border-radius: 34px;
    transition: .4s;
}
.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    border-radius: 50%;
    transition: .4s;
}
.switch-input:checked + .slider {
    background-color: #2196F3;
}
.switch-input:focus + .slider {
    box-shadow: 0 0 1px #2196F3;
}
.switch-input:checked + .slider:before {
    transform: translateX(20px);
}
.theme-switcher-text {
    font-size: 0.9em;
}

JavaScript (JQuery)实现

<!-- HTML代码 -->
<div class="theme-switcher">
    <label class="switch">
        <input type="checkbox" class="switch-input" />
        <span class="slider"></span>
    </label>
    <span class="theme-switcher-text">激活深色主题</span>
</div>

<!-- JavaScript代码 -->
$(document).ready(function() {
    $(".switch-input").change(function() {
        if(this.checked) {
            $("body").addClass("dark-theme");
            $(".theme-switcher-text").text("停用深色主题");
        } else {
            $("body").removeClass("dark-theme");
            $(".theme-switcher-text").text("激活深色主题");
        }
    });
});

Android实现

<!-- XML代码 -->
<Switch
    android:id="@+id/theme_switch"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="激活深色主题"
    android:textOff="激活深色主题"
    android:textOn="停用深色主题"
    android:checked="false" />

<!-- Java代码 -->
themeSwitch = findViewById(R.id.theme_switch);
themeSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
    @Override
    public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
        if(isChecked) {
            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES);
        } else {
            AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_NO);
        }
    }
});

iOS实现

// Swift代码
override func viewDidLoad() {
    super.viewDidLoad()
    setupThemeSwitch()
}

func setupThemeSwitch() {
    let themeSwitch = UISwitch()
    themeSwitch.translatesAutoresizingMaskIntoConstraints = false
    themeSwitch.isOn = false
    themeSwitch.addTarget(self, action: #selector(self.themeSwitched(_:)), for: .valueChanged)

    let themeSwitchText = UILabel()
    themeSwitchText.translatesAutoresizingMaskIntoConstraints = false
    themeSwitchText.text = "激活深色主题"
    themeSwitchText.font = .systemFont(ofSize: 18)

    let stackView = UIStackView(arrangedSubviews: [themeSwitch, themeSwitchText])
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.axis = .horizontal
    stackView.spacing = 10
    
    view.addSubview(stackView)
    NSLayoutConstraint.activate([
        stackView.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        stackView.centerXAnchor.constraint(equalTo: view.centerXAnchor)
    ])
}

@objc func themeSwitched(_ sender: UISwitch) {
    if(sender.isOn) {
        overrideUserInterfaceStyle = .dark
    } else {
        overrideUserInterfaceStyle = .light
    }
}

结论

本文介绍了如何使用HTML/CSS、JavaScript、Android和iOS实现颤动激活或停用深色主题功能。无论您是在网站、移动应用还是桌面应用中，都可以根据所需功能选择适当的语言和代码，让用户更好地控制系统主题模式。