cheddar/ncounter
1
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Add support for dark mode

Browse source
This commit is contained in:
CheddarCrisp 2020-03-03 22:02:09 -05:00
parent b5d590df18
commit af8eda9855
7 changed files with 87 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/ncounter/About.svelte
View file

@ -17,7 +17,9 @@ const dispatch = createEventDispatcher();
</script>
<style>
.about {
background-color: white;
background-color: var(--background-primary);
color: var(--text-primary);
position: fixed;
top: 0;
right: 0;

12
src/ncounter/App.svelte
View file

@ -83,7 +83,7 @@ function add(){
overflow: auto;
flex: 1 0 0;
background-color: #8baec6;
background-color: var(--background-color);
}
.tool-bar {
@ -91,16 +91,18 @@ function add(){
display: flex;
border-top: 2px solid #3A86B7;
border-top: 2px solid var(--button-color);
background-color: var(--background-primary);
color: var(--text-primary);
}
.tool-bar > button {
background-color: #3A86B7;
color: white;
background-color: var(--button-color);
color: var(--text-inverse);
}
.tool-bar > button:focus, .tool-bar > button:hover {
border: 2px solid #303030;
border: 2px solid var(--highlight-color);
}
.about {

3
src/ncounter/Counter.svelte
View file

@ -123,7 +123,8 @@ function remove(){
.counter{
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
background-color: #FCFCFC;
background-color: var(--background-primary);
color: var(--text-primary);
margin-bottom: 4px;

42
src/ncounter/History.svelte
View file

@ -52,6 +52,7 @@ $: dataset = counter.history.reduce((acc, x) => {
labels: [...acc.labels, x.time],
datasets: [
{
...acc.datasets[0],
data: [...acc.datasets[0].data, x.value]
}
]
@ -60,6 +61,9 @@ $: dataset = counter.history.reduce((acc, x) => {
labels: [],
datasets: [
{
borderColor: darkMode ? 'rgba(255, 255, 255, 0.25)' : undefined,
backgroundColor: darkMode ? 'rgba(255, 255, 255, 0.25)' : undefined,
lineTension: 0.1,
data: []
}
]
@ -69,8 +73,26 @@ export let counterId;
let chartEl;
const themeMatch = window.matchMedia('(prefers-color-scheme: dark)');
let darkMode = themeMatch.matches;
themeMatch.addListener((e) => {
darkMode = e.matches;
});
$: {
if(chartEl){
const theme = darkMode ?
{
gridLines: {
color: 'rgba(255, 255, 255, 0.1)',
zeroLineColor: 'rgba(255, 255, 255, 0.25)'
},
ticks: {
fontColor: '#FFFFFF'
}
} :
{} //Use defaults for light mode;
new Chart(chartEl, {
type: 'line',
data: dataset,
@ -78,8 +100,14 @@ $: {
scales: {
xAxes: [
{
...theme,
type: 'time'
}
],
yAxes: [
{
...theme
}
]
},
legend: {
@ -96,7 +124,9 @@ function close(){
</script>
<style>
.history-container{
background-color: white;
background-color: var(--background-primary);
color: var(--text-primary);
position: fixed;
top: 0;
right: 0;
@ -137,13 +167,17 @@ function close(){
.history th {
font-weight: 600;
position: sticky;
background-color: #CDCDCD;
background-color: var(--background-alternate);
top: 0;
text-align: left;
}
.history tr:nth-child(even){
background-color: #F0F0F0;
.history tbody tr:nth-child(odd){
background-color: rgba(255, 255, 255, 0.1);
}
.history tbody tr:nth-child(even){
background-color: rgba(0, 0, 0, 0.1);
}
.history td, .history th {

3
src/ncounter/Licenses.svelte
View file

@ -34,7 +34,8 @@ pre {
margin: 5px;
padding: 5px;
white-space: pre-wrap;
background-color: #F0F0F0;
background-color: var(--background-alternate);
color: var(--text-primary);
overflow-wrap: break-word;
}
</style>

8
src/ncounter/MyProgress.svelte
View file

@ -14,8 +14,10 @@ $: style = `width: ${(Math.min(1, value / max) * 100)}%`;
margin: 3px 0;
background-color: #F0F0F0;
border: 1px solid black;
background-color: var(--background-primary);
color: var(--text-primary);
border: 1px solid var(--text-primary);
height: 20px;
position: relative;
@ -23,7 +25,7 @@ $: style = `width: ${(Math.min(1, value / max) * 100)}%`;
.progress-bar > .progress {
display: block;
background-color: #C0CFC0;
background-color: var(--background-color);
height: 100%;
}

33
src/ncounter/site.css
View file

@ -22,10 +22,36 @@ body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
:root {
--background-color: #8baec6;
--button-color: #3A86B7;
--highlight-color: #303030;
--background-primary: #FCFCFC;
--background-alternate: #CDCDCD;
--text-primary: rgba(0, 0, 0, 0.87);
--text-inverse: #FFFFFF;
}
@media (prefers-color-scheme: dark) {
:root {
--background-color: #1A577F;
--button-color: #609EC7;
--highlight-color: #CFCFCF;
--background-primary: #0C0C0C;
--background-alternate: #404040;
--text-primary: #FFFFFF;
--text-inverse: rgba(0, 0, 0, 0.87);
}
}
button {
background: 0;
border: 0;
color: var(--text-primary);
width: 36px;
height: 36px;
@ -39,7 +65,7 @@ button {
}
button:focus, button:hover {
border: 2px solid #3A86B7;
border: 2px solid var(--button-color);
}
.dialog {
@ -61,7 +87,8 @@ button:focus, button:hover {
}
.dialog-content {
background-color: #FCFCFC;
background-color: var(--background-primary);
color: var(--text-primary);
pointer-events: all;
width: 315px;
@ -100,7 +127,7 @@ button:focus, button:hover {
.dialog-content button:focus, .dialog-content button:hover {
border: 0;
outline: 2px solid #3A86B7;
outline: 2px solid var(--button-color);
}
.dialog-content h1 {