Benutzer wählbar CSS-Farbschemas mit Cookie-Unterstützung

Question

Ich baue eine Website-Vorlage für hauptsächlich Textinhalt.

Ich möchte zwei Benutzer schaltbare Farbschemata haben.

Ein dunkler Hintergrund/heller Text und ein heller Hintergrund/dunkler Text für unterschiedliche Betrachtungsbedingungen.

Wie plane und gestalte ich es so, dass der Benutzer das Farbschema mit einem Klick auf die Schaltfläche umschalten kann und sich die Präferenz des Benutzers einprägen kann?

Ohne das Design zu brechen, möchte ich auch den Benutzer in der Lage sein, die Schriftgröße und Zeilenhöhe für bestimmte Inhaltsblock, z. <div id="article"></font>

Ist das machbar?

Answer 1

@GamerNebulae @EliTownsend Nach dem Studium der Antwort und der Durchführung einiger Änderungen, erstelle ich eine Lösung, die für meine Situation funktioniert.

Nicht sicher, ob es schwer ist, wenn es zur Ausführung kommt. Jeder Rat zur weiteren Verbesserung wird geschätzt.

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

Sheets

<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 '' ; 
} 

fand ich diese locat ed hier How to Use Javascript to Change a CSS