Несколько стилей CSS для одного и того же шаблона

Я должен создать пользовательский интерфейс, который можно запускать в темных или солнечных местах. Итак, я хочу создать тему с высоким контрастом и «нормальную тему».Несколько стилей CSS для одного и того же шаблона

Я понял, что Meteor объединяет и минимизирует все файлы CSS в одной большой таблице стилей. Итак ... Интересно, как переключаться между двумя темами, я не могу использовать трюки, например, this site.

Я подумал о решении: наличие суперкласса на теле, содержащее только определения цветов, которые я мог бы переключить с помощью небольшого JavaScript. Но это кажется немного грубым.

Любая мысль о лучшем решении?

источник

2015-04-29 c.censier

может вы не используете 'Javascript' для удаления старого файла css и загружаете новый, и если вы загружаете новый файл css, он должен перезаписать стиль курсора nt css-файл. – Vinc199789

Если вы используете less (официальный пакет метеора), вы можете определить два различных классов, которые будут установлены на корпусе (или основной дел), и дать им все разные стили:

.dark { 
    p { color: #fff; } 
    /* dark styles... */ 
} 

.light { 
    p { color: #000; } 
    /* light styles... */ 
}

Тогда действительно, программно переключать класс на тег <body> или <div>, например, используя Template.registerHelper и класс Session, например, предлагаемый @ adnan-y.

Это будет выглядеть чище (плюс вы можете использовать тонны прохладных less функций, таких как lighten и darken), и все будет скомпилирован в CSS на сервере перспективе.

источник

2015-04-29 14:47:55 SylvainB

Я никогда раньше не использовал 'less', но я посмотрю на этот вариант. Во всяком случае, я могу сделать это без «меньше», не так ли? –

Да, но с большим уродливым кодом. В основном вам нужно будет добавить свой класс тела перед каждым объявлением правила ... или, по крайней мере, цветными. Здесь у вас есть только два удобных пространства имен с css в них. И в основном, вам больше не нужно писать «меньше», чем то, что я написал! Вы можете поместить все обычные css внутри этих классов, он будет работать безупречно. Просто назовите свой файл 'style.less' вместо' style.css' и убедитесь сами. Опять же, я понимаю, что вы все еще видите это как сложность. – SylvainB

Как я вижу, мои объявления css будут намного понятнее, используя 'less', поэтому я полностью буду использовать это! Большое спасибо. –

написать помощника, такие как

Template.registerHelper('theme', function(){ 
    // somehow get timeoftheday and return appropriate theme 
    // alternatively get theme name from user.theme 
    // here we are just getting it from session for now 
    Session.get('theme'); 
});

в шаблоне макета, установите класс корневой элемент реактивно:

<template name="layoutTemplate"> 
    <div class="content {{theme}}"> 
    {{> somenav}} 
    {{> yield}} 
    {{> footer}} 
    </div> 
</template>

CSS может быть что-то вдоль линии:

.dark { 
    background-color: black; 
    color: white; 
    h1, h2, h3, .header, p { 
    // some custom scheme related to dark scheme 
    } 
} 
.light { 
    background-color: white; 
    color: black; 
    p { 
    // some custom scheme related to lightscheme 
    } 
} 
.someotherthemename { 
    background-color: pink; 
    color: purple; 
    p { 
    // some custom scheme related to lightscheme 
    } 
}

источник

2015-04-29 21:10:09

Я думаю, что текущий синтаксис изменился на Template.registerHelper(). –

исправлено. Спасибо за указание –

Черт! Я никогда не знал, что есть «registerHelper», я так новичок ... Большое спасибо, это решение идеально в духе Meteor. –

Несколько стилей CSS для одного и того же шаблона

ответ

Смежные вопросы