2

I'm developing a single page web application using HTML, CSS, and JavaScript (without iframes).

I have a slide out menu on the left, which I want to contain elements styled according to a dark Bootstrap theme (from Bootswatch).

On the main area of the app, however, I want to place elements styled using another, light, Bootstrap theme.

Is there a way I can do that?

amphetamachine
  • 27,620
  • 12
  • 60
  • 72
akuz
  • 607
  • 7
  • 14

1 Answers1

5

I would suggest manually adding both themes into a CSS Scope using the > operator which is explained very well in this post.

For example, for bootstrap button class:

.light > // This is the Scope
    .btn {
        ...
    }
}

This way, you can use the following syntaxes:

<div class="light">
    <a href="#" class="btn btn-primary">Light Themed Link</a>
</div>
<div class="dark">
    <a href="#" class="btn btn-primary">Dark Themed Link</a>
</div>

Since > means Direct Child, it only affects the childs inside the marked Scope Element. This means that you don't have to repeat class"light" or class="dark" in every element you want to stylize. Instead you select a Scope, it may be body, or a div, or even a span, and then you use bootstrap classes as usual.

You can do this manually but I'd suggest you using LESS which already comes integrated with latest bootstrap source code or SASS which you can find here.

Maybe there is a better option, but this is the only I can think about right now.

Community
  • 1
  • 1
Aitor Martin
  • 724
  • 1
  • 11
  • 26
  • This is what I'd do too. +1 – AndrewL64 Apr 12 '15 at 20:20
  • Thanks for your answer! Sorry, perhaps it not clear from my question... I don't actually want to write my own styles, which colours etc. I just want to mix two pre-made Bootstrap themes on one page. I would get one light and one dark theme. As I understand in your answer, I would still have to specify the colours for the light and dark themes? Sorry, if you already answered it, but I didn't get it... – akuz Apr 12 '15 at 20:27
  • You don't have to create a custom Theme. What you need to do is add both themes into different scopes, so they don't mix each other and they are only applied when first selecting the scope of style which to be applied. I mentioned LESS or SASS because you need to modify CSS files to add the themes into a scope. – Aitor Martin Apr 12 '15 at 20:29
  • Ah I see, I could then just open a edit the two theme files and wrap them with .light > {} and .dark > {} respectively? The only drawback I see is that I'd have to specify light or dark with each element. Maybe I could instead use something like: div.light-theme {} and don't use the > operator? – akuz Apr 12 '15 at 20:45
  • Yes, you can also use div .light-theme {} But this is going to require you to write all the times
    while the way I'm telling you can just use
    and inside just write the normal bootstrap classes. I updated the main response so you can see it better how to use it with Direct Child operator.
     – Aitor Martin Apr 12 '15 at 20:49
  • @AitorMartinGonzalez Thanks, now I get it more. I'm not convinced this will work then:
    ... Since the element is not a direct descendant of light div. I'll check, and if it works I will accept your answer, thank you!
     – akuz Apr 12 '15 at 21:07
  • No, it wont work. Its only the direct descendant. The reason why I suggest this is because this way, you can stack scopes and alternate the styles by multi-scoping. – Aitor Martin Apr 12 '15 at 21:12
  • Although I haven't tested, I accept this answer. Thanks for your help! – akuz Apr 13 '15 at 18:00