Commit 14e36c5e authored by Vasily Belolapotkov's avatar Vasily Belolapotkov

add switcher for the night theme

parent 1fcd81e3
$bodyBgLight: #fff;
$bodyBgDark: rgb(36, 47, 61);
$grey: rgb(165, 175, 182);
$lightgrey: rgb(221, 234, 242);
$fontMain: rgb(67, 72, 75);
$darkgrey: rgb(51, 64, 79);
body {
$fontMainLight: rgb(67, 72, 75);
$fontMainDark: #fff;
$linkColor: rgb(41, 145, 225);
$darkLinkColor: rgb(62, 171, 241);
body,
h1 {
font-family: Helvetica, sans-serif;
color: $fontMain;
margin: 0;
}
.chart-container {
margin-top: 2rem;
&:first-child {
margin-top: 0;
body {
color: $fontMainLight;
background-color: $bodyBgLight;
}
body.dark {
color: $fontMainDark;
background-color: $bodyBgDark;
}
@mixin linkColor($color) {
color: $color;
&:hover,
&:active,
&:focus {
color: darken($color, 15);
}
}
a {
text-decoration: none;
@include linkColor($linkColor);
}
body.dark a {
@include linkColor($darkLinkColor);
}
#root {
width: 600px;
padding: 20px;
position: relative;
}
.theme-switcher {
position: absolute;
top: 20px;
right: 0;
padding: 15px 10px;
}
.chart-container {
margin-top: 1rem;
}
.preview-container,
.legend-container {
margin-top: 1rem;
......@@ -63,6 +110,10 @@ body {
}
}
body.dark .axis-labels .label {
stroke: $darkgrey;
}
.preview-container {
position: relative;
}
......@@ -133,6 +184,16 @@ body {
}
}
body.dark .preview-window {
.shadow {
background-color: rgba(darken($bodyBgDark, 5), 0.5);
}
.window {
border-color: rgba($grey, 0.5);
}
}
.legend-container {
.controls-list .control {
$controlHeight: 40px;
......@@ -151,7 +212,7 @@ body {
border-radius: $controlBorderR;
margin-right: $controlHPadding;
border: $controlBorderW solid lightgrey;
border: $controlBorderW solid $lightgrey;
cursor: pointer;
user-select: none;
......@@ -163,11 +224,20 @@ body {
border-radius: 50%;
position: relative;
left: $controlVPadding - $controlBorderR;
border: 1px solid $grey;
border: 2px solid;
color: $bodyBgLight;
background-color: $bodyBgLight;
transition: background-color 0.3s ease;
.icon {
transition: opacity 0.3s ease;
opacity: 0;
}
&.checked .icon {
opacity: 1;
}
}
.label {
......@@ -180,6 +250,16 @@ body {
}
}
body.dark .legend-container {
.controls-list .control {
border-color: $darkgrey;
.checkbox {
background-color: $bodyBgDark;
}
}
}
.icon {
display: inline-block;
width: 1rem;
......@@ -200,6 +280,16 @@ body {
}
}
body.dark .plots-inspector {
.inspector-line {
stroke: $darkgrey;
}
.inspector-point {
fill: $bodyBgDark;
}
}
.inspector-tooltip {
box-sizing: border-box;
white-space: nowrap;
......@@ -233,3 +323,8 @@ body {
}
}
}
body.dark .inspector-tooltip {
background-color: saturate($bodyBgDark, 5);
box-shadow: 0 0 1px 0 #000;
}
......@@ -2,12 +2,14 @@ import chartsData from './data/chart_data.json';
import { makeChart } from './chart';
import { IChartData, ChartType } from './chart/chart-state';
import { ISrcData, SrcTypes } from './data/srcData';
import { renderThemeSwitcher } from './theme-switcher';
renderApp();
function renderApp(): void {
const rootElement = createRootElement();
document.body.appendChild(rootElement);
renderThemeSwitcher(rootElement);
renderCharts(chartsData, rootElement);
}
......
import { makeHtmlElement } from './chart/ui-utils';
import { DOMContainerElement, IRenderable } from './chart/chart-component';
export function renderThemeSwitcher(container: HTMLElement): void {
const switcher = makeThemeSwitcher();
switcher.render(container);
}
function makeThemeSwitcher(): IRenderable<null> {
let currentTheme = 'light';
let control: HTMLElement;
return Object.freeze({
render,
});
function render(container: DOMContainerElement) {
const switcher = makeHtmlElement('div', {
classList: ['theme-switcher'],
});
control = makeHtmlElement('a', { attributes: { href: '#' } });
updateControl();
control.addEventListener('click', handleClick);
switcher.appendChild(control);
container.appendChild(switcher);
}
function handleClick(evt: MouseEvent) {
evt.preventDefault();
toggleTheme();
updateControl();
}
function toggleTheme() {
if (currentTheme === 'dark') {
document.body.classList.remove('dark');
currentTheme = 'light';
} else {
document.body.classList.add('dark');
currentTheme = 'dark';
}
}
function updateControl() {
control.innerText =
currentTheme === 'dark' ? 'Switch to day mode' : 'Switch to night mode';
}
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment