드롭 다운 메뉴가있는 킥아웃 테마 변경 중?

Question

내 부트 스트랩 앱을 테마로 Kickstrap을 사용하고 있으며 고객이 사용자가 테마를 즉시 변경할 수 있기를 바랍니다. 테마를 변경하려면 테마가없는 파일의 디렉토리를 변경해야합니다.하지만이 작업을 수행하는 가장 좋은 방법은 모르겠습니다. 또한 사용자의 테마 환경 설정을 기억하고 싶기 때문에 쿠키를 저장해야하므로 쿠키를 변수로 바로 읽을 수 있는지 확실하지 않습니다.

기본적으로 사용자가 목록에서 테마를 선택할 수있는 드롭 다운 메뉴가 필요합니다.

어떤 제안이 좋을까요? 감사!

Answer 1

서버 측 프레임 워크가 아닌 일반 HTML/CSS/JavaScript 만 사용한다고 가정하면 몇 가지 방법이 있습니다. 하나는 실제로 modifying the LESS source code과 관련이 있지만 좀 더 간단한 방법을 제공합니다.

테마 비어 있지 않으므로 기본 부트 스트랩 테마 만 표시됩니다.

당신은 다음과 같은 별도의 줄에 Kickstrap 테마를로드 할 수

<link rel="stylesheet/less" type="text/css" href="kickstrap.less" /> 
<link rel="stylesheet/less" type="text/css" href="mytheme.less" /> 
<script src="less.js"></script> 

두 테마 파일 물론

, 테마가 variable.less 및 bootswatch.less 같은 두 개의 파일을 가질 수있는 수도 별도로 작업하지 않아도됩니다.

<link rel="stylesheet/less" type="text/css" href="kickstrap.less" /> 
<link rel="stylesheet/less" type="text/css" href="variables.less" /> 
<link rel="stylesheet/less" type="text/css" href="bootswatch.less" /> 
<script src="less.js"></script> 

그래서 대신 @importvariables.less 파일을 bootswatch.less에 입력하십시오.

@import "variables.less"; 

그런 다음 위의 원래 예제를 사용하십시오.

<link rel="stylesheet/less" type="text/css" href="kickstrap.less" /> 
<link rel="stylesheet/less" type="text/css" href="bootswatch.less" /> 
<script src="less.js"></script> 

그런데 클라이언트 쪽을 덜 사용하고 있다면 걱정할 필요가 없습니다. 대신 각각에 대해 컴파일 된 CSS 파일을 사용하십시오. 마찬가지로 지금까지 DOM이 변경과 같이 DOM

에 쓰기

<link rel="stylesheet/less" type="text/css" href="css/kickstrap.css" /> 
<link rel="stylesheet/less" type="text/css" href="css/bootswatch.css" /> 

, 나는 kickstrap.js에 이미 cssIfy() 기능을 활용하려고 할 것입니다. 이것은 문자열 (.css 파일명)을 취해 그것을 스타일 시트로 DOM에 씁니다. .less 파일로 작성해야하는 경우이 함수를 쉽게 조작 할 수 있습니다. 이 같은 아마 뭔가 :

function lessIfy(filePath) { 
    var linkElement = document.createElement("link"); 
    linkElement.setAttribute("rel", "stylesheet/less"); 
    linkElement.setAttribute("type", "text/css"); 
    linkElement.setAttribute("href", filePath); 
    document.getElementsByTagName('body')[0].appendChild(linkElement); 
} 

이 방법으로 그것을 할 경우, 당신이 나중에 확인 less.js 부하를 확인해야합니다, 그래서 노력 할게요 그 중 하나 또는 (더 나쁜)로드 less.js 후에 다시 그 전에 추가.

Answer 2

테마를 선택하면 "포함 된 테마"옵션이 테마를 변경하는 방법을 살펴보십시오.