Merge pull request #470 from SamR1/dark-theme-update

Dark theme update
This commit is contained in:
Sam
2023-12-20 13:44:05 +01:00
committed by GitHub
10 changed files with 34 additions and 21 deletions

View File

@@ -7,11 +7,11 @@
<link rel="stylesheet" href="/static/css/fork-awesome.min.css"/> <link rel="stylesheet" href="/static/css/fork-awesome.min.css"/>
<link rel="stylesheet" href="/static/css/leaflet.css"/> <link rel="stylesheet" href="/static/css/leaflet.css"/>
<title>FitTrackee</title> <title>FitTrackee</title>
<script type="module" crossorigin src="/static/index-SJb1QCEI.js"></script> <script type="module" crossorigin src="/static/index-uYw8Gs-g.js"></script>
<link rel="modulepreload" crossorigin href="/static/charts-_RwsDDkL.js"> <link rel="modulepreload" crossorigin href="/static/charts-_RwsDDkL.js">
<link rel="modulepreload" crossorigin href="/static/maps-ZyuCPqes.js"> <link rel="modulepreload" crossorigin href="/static/maps-ZyuCPqes.js">
<link rel="stylesheet" crossorigin href="/static/css/maps-B7qTrBCW.css"> <link rel="stylesheet" crossorigin href="/static/css/maps-B7qTrBCW.css">
<link rel="stylesheet" crossorigin href="/static/css/index-86bdJKFy.css"> <link rel="stylesheet" crossorigin href="/static/css/index-RG-OKDmw.css">
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -42,14 +42,16 @@
() => store.getters[ROOT_STORE.GETTERS.DARK_MODE] () => store.getters[ROOT_STORE.GETTERS.DARK_MODE]
) )
const lineColors = computed(() => ({ const lineColors = computed(() => ({
color: darkMode.value color:
? chartsColors.darkMode.line darkMode.value !== false
: chartsColors.ligthMode.line, ? chartsColors.darkMode.line
: chartsColors.ligthMode.line,
})) }))
const textColors = computed(() => ({ const textColors = computed(() => ({
color: darkMode.value color:
? chartsColors.darkMode.text darkMode.value !== false
: chartsColors.ligthMode.text, ? chartsColors.darkMode.text
: chartsColors.ligthMode.text,
})) }))
const chartData = computed(() => ({ const chartData = computed(() => ({
@@ -117,7 +119,7 @@
? // eslint-disable-next-line @typescript-eslint/ban-ts-comment ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore // @ts-ignore
context.dataset.backgroundColor[0] context.dataset.backgroundColor[0]
: '#666666' : textColors.value.color
}, },
rotation: function (context) { rotation: function (context) {
return fullStats.value && context.chart.chartArea.width < 580 return fullStats.value && context.chart.chartArea.width < 580

View File

@@ -2,7 +2,7 @@
<div class="privacy-policy-message"> <div class="privacy-policy-message">
<span> <span>
<i18n-t keypath="user.LAST_PRIVACY_POLICY_TO_VALIDATE"> <i18n-t keypath="user.LAST_PRIVACY_POLICY_TO_VALIDATE">
<router-link to="/profile/edit/privacy-policy"> <router-link to="/profile/edit/privacy-policy" class="policy-link">
{{ $t('user.REVIEW') }} {{ $t('user.REVIEW') }}
</router-link> </router-link>
</i18n-t> </i18n-t>
@@ -18,5 +18,10 @@
color: var(--alert-color); color: var(--alert-color);
border-radius: $border-radius; border-radius: $border-radius;
padding: $default-padding $default-padding * 2; padding: $default-padding $default-padding * 2;
.policy-link {
color: var(--policy-link-color);
text-decoration: underline;
}
} }
</style> </style>

View File

@@ -234,7 +234,7 @@
} }
.workout-map { .workout-map {
background-color: var(--workout-no-map-bg-color); background-color: var(--workout-static-map-bg-color);
height: 150px; height: 150px;
.no-map { .no-map {
line-height: 150px; line-height: 150px;

View File

@@ -118,14 +118,16 @@
() => datasets.value.coordinates () => datasets.value.coordinates
) )
const lineColors = computed(() => ({ const lineColors = computed(() => ({
color: darkMode.value color:
? chartsColors.darkMode.line darkMode.value !== false
: chartsColors.ligthMode.line, ? chartsColors.darkMode.line
: chartsColors.ligthMode.line,
})) }))
const textColors = computed(() => ({ const textColors = computed(() => ({
color: darkMode.value color:
? chartsColors.darkMode.text darkMode.value !== false
: chartsColors.ligthMode.text, ? chartsColors.darkMode.text
: chartsColors.ligthMode.text,
})) }))
const options = computed<ChartOptions<'line'>>(() => ({ const options = computed<ChartOptions<'line'>>(() => ({

View File

@@ -30,6 +30,7 @@
--dropdown-background-color: var(--dark-blue); --dropdown-background-color: var(--dark-blue);
--dropdown-border-color: var(--input-border-color); --dropdown-border-color: var(--input-border-color);
--policy-border-color: #ccc; --policy-border-color: #ccc;
--policy-link-color: var(--alert-color);
--box-shadow-color: lightgrey; --box-shadow-color: lightgrey;
--admin-disabled-input-color: var(--dark-blue); --admin-disabled-input-color: var(--dark-blue);
@@ -87,13 +88,14 @@
--map-attribution-text: #e8e8e8; --map-attribution-text: #e8e8e8;
--map-display-hover-attribution-text: #444444; --map-display-hover-attribution-text: #444444;
--map-attribution-bg-color: none; --map-attribution-bg-color: none;
--map-filter: invert(1) hue-rotate(180deg) brightness(0.8) contrast(0.8); --map-filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(0.85);
--map-display-hover-filter: invert(1) hue-rotate(180deg) brightness(1.5) --map-display-hover-filter: invert(1) hue-rotate(180deg) brightness(1.5)
contrast(0.6); contrast(0.6);
--map-layers-overlays: var(--app-color); --map-layers-overlays: var(--app-color);
--map-control-bar: var(--app-color); --map-control-bar: var(--app-color);
--no-map-filter: invert(1) brightness(1.5) contrast(0.9); --no-map-filter: invert(1) brightness(1.5) contrast(0.9);
--workout-static-map-shadow-color: #d2d2d2; --workout-static-map-shadow-color: #d2d2d2;
--workout-static-map-bg-color: #818181;
--mountains-filter: invert(90%) sepia(19%) saturate(0%) hue-rotate(39deg) --mountains-filter: invert(90%) sepia(19%) saturate(0%) hue-rotate(39deg)
brightness(86%) contrast(102%); brightness(86%) contrast(102%);

View File

@@ -27,6 +27,7 @@
--dropdown-background-color: #ffffff; --dropdown-background-color: #ffffff;
--dropdown-border-color: lightgrey; --dropdown-border-color: lightgrey;
--policy-border-color: #ccc; --policy-border-color: #ccc;
--policy-link-color: var(--app-a-color);
--box-shadow-color: lightgrey; --box-shadow-color: lightgrey;
--admin-disabled-input-color: #ffffff; --admin-disabled-input-color: #ffffff;
@@ -90,6 +91,7 @@
--map-control-bar: #bfc0ab; --map-control-bar: #bfc0ab;
--no-map-filter: initial; --no-map-filter: initial;
--workout-static-map-shadow-color: var(--app-shadow-color); --workout-static-map-shadow-color: var(--app-shadow-color);
--workout-static-map-bg-color: var(--workout-no-map-bg-color);
--mountains-filter: invert(19%) sepia(9%) saturate(2921%) hue-rotate(169deg) --mountains-filter: invert(19%) sepia(9%) saturate(2921%) hue-rotate(169deg)
brightness(85%) contrast(80%); brightness(85%) contrast(80%);