Question

我正在构建主要是文字内容的网站模板。

我想有两个用户可切换的配色方案。

一个深色背景/浅色文字和一个浅色背景/深色文字，以适应不同的观看条件。

如何规划和设计它，以便用户只需点击一下按钮即可切换配色方案并让cookie记住用户的偏好？

在不破坏设计的情况下，我还想让用户能够增加某些内容块的字体大小和行高，例如。 $low_0 = 0; $low_1 = 1; $low_2 = 2; $nr = 9; for ($i = 0; $i < $nr; $i++) { $sql = 'INSERT INTO prognoza_curenta (ora, prognoza, min, max, reg_date) VALUES (' . "${'low_' . $i}, " . "11," . "22," . "33," . "'$timp')"; echo "$sql" . "<br>"; } if (mysqli_query($db, $sql)) { echo 'Data send' . "<br>"; } else { echo 'Error send.' . mysqli_error($sql) . "<br>"; }

这可行吗？

Answer 1

@GamerNebulae @EliTownsend在研究答案并做出一些修改之后，我想出了一个适合我情况的解决方案。

在执行时不确定它是否很重。任何有关进一步改进的建议都表示赞赏。

<强> CSS

body.dark {
    background: #222;
    color: #777;
}

<强> HTML

<a href="#" onclick="changeTheme()">Switch</a>

<强> Javscript

function createCookie(name,value,days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime()+(days*24*60*60*1000));
        var expires = "; expires="+date.toGMTString();
    }
    else var expires = "";
    document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i=0;i < ca.length;i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1,c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
    }
    return null;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

function changeTheme() {
    if (jQuery("body").hasClass("dark")) {
        jQuery("body").removeClass("dark");
        createCookie('theme', 'regular', 7);
    }
    else {
        jQuery("body").addClass("dark");
        createCookie('theme', 'dark', 7);
    }
}

// initialize page, apply theme color by checking cookie variable 'theme'
var theme = readCookie('theme');
if(theme == "dark") jQuery("body").addClass("dark");
else if (theme == "regular") jQuery("body").removeClass("dark");
else if (jQuery("body").hasClass("dark")) createCookie('theme', 'dark', 7);

Answer 2

<强>样式表

<link rel="stylesheet" type="text/css" title="blue" href="http://example.com/css/blue.css">
<link rel="alternate stylesheet" type="text/css" title="pink" href="http://example.com/css/pink.css">

<强> HTML

<form>
<input type="submit" onclick="switch_style('blue');return false;" name="theme" value="Blue Theme" id="blue">
<input type="submit" onclick="switch_style('pink');return false;" name="theme" value="Pink Theme" id="pink">
</form>

<强>的Javascript

//TO BE CUSTOMISED

var style_cookie_name = "style" ;
var style_cookie_duration = 30 ;
var style_domain = "thesitewizard.com" ;

// END OF CUSTOMISABLE SECTION
// You do not need to customise anything below this line

function switch_style ( css_title )
{
// You may use this script on your site free of charge provided
// you do not remove this notice or the URL below. Script from
// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
  var i, link_tag ;
  for (i = 0, link_tag = document.getElementsByTagName("link") ;
    i < link_tag.length ; i++ ) {
    if ((link_tag[i].rel.indexOf( "stylesheet" ) != -1) &&
      link_tag[i].title) {
      link_tag[i].disabled = true ;
      if (link_tag[i].title == css_title) {
        link_tag[i].disabled = false ;
      }
    }
    set_cookie( style_cookie_name, css_title,
      style_cookie_duration, style_domain );
  }
}
function set_style_from_cookie()
{
  var css_title = get_cookie( style_cookie_name );
  if (css_title.length) {
    switch_style( css_title );
  }
}
function set_cookie ( cookie_name, cookie_value,
    lifespan_in_days, valid_domain )
{
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    var domain_string = valid_domain ?
                       ("; domain=" + valid_domain) : '' ;
    document.cookie = cookie_name +
                       "=" + encodeURIComponent( cookie_value ) +
                       "; max-age=" + 60 * 60 *
                       24 * lifespan_in_days +
                       "; path=/" + domain_string ;
}
function get_cookie ( cookie_name )
{
    // http://www.thesitewizard.com/javascripts/cookies.shtml
    var cookie_string = document.cookie ;
    if (cookie_string.length != 0) {
        var cookie_value = cookie_string.match (
                        '(^|;)[\s]*' +
                        cookie_name +
                        '=([^;]*)' );
        return decodeURIComponent ( cookie_value[2] ) ;
    }
    return '' ;
}

我发现这位于How to Use Javascript to Change a CSS

用户可选择的CSS配色方案，支持cookie

2 个答案: