multiple nested views with their own router - angularjs

Question

I am building an angular app with nested views using ui-router. The app has a list of posts, each with its own Nav menu to change the post's view.
To simplify the context, lets just say that each nav menu can change the theme of the post it is attached to.
POST 1 CONTENT
[Light theme button] [Dark theme button]
--------------------------------------------
POST 2 CONTENT
[Light theme button] [Dark theme button]
--------------------------------------------
*
*
*
The problem I am facing is when I press a button on one post's nav menu, all the posts change.
I want the nav menu for each post only to effect its respective post.
I am a total beginner to angular and my questions are:
Is this a problem i would want to solve with ui-router? (do i want to
have a router for each post?)
If it is, how do i solve it?
If not, can you point me in the right direction?
any help is appreciated, whether it is a link, explanation, code or just a comment.
PS. in reality i am not just changing the theme, i am changing the content on the post completely. In the future i want to implement more than just 2 options menu options.
here is the code that i am using now (modified a bit to remove redundancy):
Main.js:
angular.module('app',['ui.router'])
.config(function($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/postlist');
$stateProvider
.state('postlist', {
url: '/postlist',
templateUrl: 'ListView.html',
controller: ListCtrl
})
.state('postlist.light', {
templateUrl: 'pollViewLight.html',
controller: PollLightCtrl
})
.state('postlist.dark', {
templateUrl: 'pollViewDark.html',
controller: PollDarkCtrl
})
});
simplified part of index.html:
<nav>
<ul>
<li><a ui-sref="postlist">Post List</a></li>
</ul>
</nav>
<div class="container">
<div ui-view></div>
</div>
ListView.html:
<div class="row" ng-repeat="post in posts">
<div class="col">
<div ui-view></div>
<ul class="nav nav-pills">
<li><a ui-sref=".light">Light Theme</a></li>
<li><a ui-sref=".dark">Dark Theme</a></li>
</ul>
</div>
</div>