Laravel - 선택시 CSS 페이지 스타일 변경

내 프로젝트 및 해당 페이지 내부에 대한 설정 페이지를 만들고 있습니다. 웹 사이트에서 여러 CSS 테마 중 하나를 선택할 수있는 옵션을 제공하고 싶습니다. 드롭 다운 메뉴. Dark, Light 및 Regular의 3 가지 옵션이 있습니다. 이것을 어떻게 할 수 있습니까?Laravel - 선택시 CSS 페이지 스타일 변경

나는 jQuery와 비슷한 것을 사용할 수 있지만, 각 태그에 개별 클래스를 추가해야하기 때문에 파일이 이렇게 보일 것이라고 생각한다.

$("#Red").click(function() { 
    $(".txt-bubble-response").css('background-color', '#FA3C4C'); 
    $(".noti-badge").css('background-color', '#FA3C4C'); 
    $(".btn-send-msg").css('border-color', '#FA3C4C'); 
    $(".btn-send-msg").css('color', '#FA3C4C'); 
    saveColor('#FA3C4C'); 
});

전체 페이지를 변경하고 싶습니다. navbar의 색상부터 전체 페이지의 배경색까지 훨씬 더 많습니다. 물론 사용자를 위해 저장해야합니다. 이것을 달성하기위한 최선의 효율적인 방법은 무엇입니까? 나는 인터넷에서보고 있었지만 그것을 찾을 수 없었다. 미리 감사드립니다.

출처

2017-12-07 Rainier laan

하나의 클래스를 html 또는 body 요소에 추가하십시오. 자바 스크립트의 끝. 나머지는 스타일 시트에서 발생합니다. 'html.red .txt-bubble-response, html.red .noti-badge, ... {background-color : # FA3C4C; }' – CBroe

CSS 변수는 이것을 처리하는보다 효율적이고 쉬운 방법이지만, IE는 아직 지원하지 않습니다. https://caniuse.com/#feat=css-variables (하지만 거기에는 아마도 polyfill이 있습니다. .) – CBroe

@CBroe가 말한 것. – VilleKoo

개인적으로 데이터베이스 필드 (아마도 사용자)에 저장 한 다음 다른 CSS 페이지 나 클래스를 만드는 것이 가장 좋습니다. 마스터에서 CSS를 포함하면 다음과 같이 할 수 있습니다.

<link href="css/{{$user->theme}}.css>

정말 JQuery가 필요하지 않습니다. 희망이 도움이됩니다.

출처

2017-12-07 08:41:44

Laravel - 선택시 CSS 페이지 스타일 변경

답변

관련 문제