Cookieをサポートするユーザーが選択可能なCSSカラースキーム

Question

主にテキストコンテンツ用のウェブサイトテンプレートを作成しています。

2つのユーザーが切り替え可能なカラースキームを使用したいと考えています。

さまざまな観察条件に合わせて、1つの暗い背景/明るいテキストと1つの明るい背景/暗いテキスト。

ボタンをクリックして配色を切り替えることができ、クッキーにユーザーの嗜好を記憶させるように計画するにはどうすればよいですか？

デザインを壊さずに、ユーザーが特定のコンテンツブロックのフォントサイズや行の高さを上げることもできます。 <div id="article"></font>

これは実現可能ですか？私はこのlocatを見つけた

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