How to change inner toggle background color - css

Question

I am trying to change the inner toggle color, green then checked else dark grey. I do not want to change the color of the indicator itself. How can I do that?
So far I tried to add the toggle:checked color but it seems its the wrong position as nothing changed.
.toggle-view {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset,
-4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow:
-8px -4px 8px 0px #ffffff,
8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
<label class="toggle-view" id="toggle-darkmode">
<div class="toggle">
<input class="toggle-state" type="checkbox" checked/>
<div class="indicator"></div>
</div>
</label>

Answer 1

Add a div inside the label (toggle-container element in my case) and position the div to fit the width and height of the label by using position: absolute;. Add CSS for the adjecent element of the input. For checked input give the background: green, and for normal input background: gray
.toggle-view {
display: inline-flex;
align-items: center;
cursor: pointer;
color: #394a56;
}
.toggle {
position: absolute;
height: 30px;
width: 60px;
border-radius: 15px;
overflow: hidden;
box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6,
4px 4px 4px 0px #d1d9e6 inset, -4px -4px 4px 0px #ffffff inset;
}
.toggle-state {
display: none;
}
.indicator {
height: 100%;
width: 200%;
background: #ecf0f3;
border-radius: 15px;
transform: translate3d(-75%, 0, 0);
transition: transform 0.4s cubic-bezier(0.85, 0.05, 0.18, 1.35);
box-shadow: -8px -4px 8px 0px #ffffff, 8px 4px 12px 0px #d1d9e6;
}
.toggle-state:checked ~ .indicator {
transform: translate3d(25%, 0, 0);
}
.toggle-container {
position: absolute;
width: 100%;
height: 100%;
}
.toggle-state + .toggle-container {
background: grey;
}
.toggle-state:checked + .toggle-container {
background: green;
}
<label class="toggle-view" id="toggle-darkmode">
<div class="toggle">
<input class="toggle-state" type="checkbox" checked />
<!-- Custom container -->
<div class="toggle-container"></div>
<div class="indicator"></div>
</div>
</label>