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
commit e46d7f4960
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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,12 +42,14 @@
() => store.getters[ROOT_STORE.GETTERS.DARK_MODE] () => store.getters[ROOT_STORE.GETTERS.DARK_MODE]
) )
const lineColors = computed(() => ({ const lineColors = computed(() => ({
color: darkMode.value color:
darkMode.value !== false
? chartsColors.darkMode.line ? chartsColors.darkMode.line
: chartsColors.ligthMode.line, : chartsColors.ligthMode.line,
})) }))
const textColors = computed(() => ({ const textColors = computed(() => ({
color: darkMode.value color:
darkMode.value !== false
? chartsColors.darkMode.text ? chartsColors.darkMode.text
: chartsColors.ligthMode.text, : chartsColors.ligthMode.text,
})) }))
@ -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,12 +118,14 @@
() => datasets.value.coordinates () => datasets.value.coordinates
) )
const lineColors = computed(() => ({ const lineColors = computed(() => ({
color: darkMode.value color:
darkMode.value !== false
? chartsColors.darkMode.line ? chartsColors.darkMode.line
: chartsColors.ligthMode.line, : chartsColors.ligthMode.line,
})) }))
const textColors = computed(() => ({ const textColors = computed(() => ({
color: darkMode.value color:
darkMode.value !== false
? chartsColors.darkMode.text ? chartsColors.darkMode.text
: chartsColors.ligthMode.text, : chartsColors.ligthMode.text,
})) }))

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%);