Skip to content

✨ Feature: Implementation du Dark Mode #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
HyperBeats wants to merge 3 commits into
base: main
Choose a base branch
from
Open

✨ Feature: Implementation du Dark Mode #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
96cf3f2
✨ Feature: Implementation du Dark Mode
HyperBeats Mar 13, 2025
237f0c3
small color fix
HyperBeats Mar 13, 2025
e6ddbe2
fix readme
HyperBeats Mar 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,4 @@ Made by <a href="https://github.com/pkhemae" target="_blank">Khémara Parc</a> a
<img src="https://market.azuriom.com/storage/resources/attachments/JvctkN0xG4QxTOlRp9MXGi22TPVxuN8VMQ1LLQEV.png" width="1000">
<img src="https://market.azuriom.com/storage/resources/attachments/cyUTmXaLPMRwfB8EVNwBFBb7O8rYgZTMbuACOQZm.png" width="1000">
<img src="https://market.azuriom.com/storage/resources/attachments/5KNMWkAI5mdSrr8hT73SANz4GqeoURJcQprFjDsR.png" width="1000">
<img src="https://market.azuriom.com/storage/resources/attachments/MBVZYSWGHsYWTfwqd3mF3Yy8dfIbbWkAjkWlmKQv.png" width="1000">


<img src="https://market.azuriom.com/storage/resources/attachments/MBVZYSWGHsYWTfwqd3mF3Yy8dfIbbWkAjkWlmKQv.png" width="1000">
Binary file added assets/.DS_Store
View file
Open in desktop
Binary file not shown.
247 changes: 247 additions & 0 deletions assets/css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1270,3 +1270,250 @@
height: 28px;
}
}


/* Mode sombre START */
body.dark-mode {
background-color: #121212;
color: #e0e0e0;
}
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
color: #ffffff;
}

body.dark-mode .navbar {
background: rgba(26, 26, 26, 0.9);
backdrop-filter: blur(10px);
}

body.dark-mode .nav-link,
body.dark-mode .player-btn,
body.dark-mode .player-name {
color: #e0e0e0 !important;
}

body.dark-mode .nav-link:hover,
body.dark-mode .player-btn:hover {
color: var(--primary-color);
}

body.dark-mode .auth-button {
background-color: var(--primary-color);
color: #ffffff;
}

body.dark-mode .auth-button:hover {
background-color: var(--primary-color);
color: #ffffff;
}

body.dark-mode .dropdown-menu {
background-color: rgba(26, 26, 26, 0.95);
}

body.dark-mode .dropdown-item {
color: #e0e0e0;
}

body.dark-mode .dropdown-item:hover {
color: var(--primary-color);
background-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .hero-section {
background: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.9));
}

body.dark-mode .hero-curve {
background: #121212;
}

body.dark-mode .blog-section {
background-color: #121212;
}

body.dark-mode .blog-card {
background: #1e1e1e;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .blog-title {
color: #e0e0e0;
}

body.dark-mode .blog-date {
background: #2a2a2a;
color: #b0b0b0;
}

body.dark-mode .blog-meta {
color: #b0b0b0;
}

body.dark-mode .about-section {
background-color: #121212;
}

body.dark-mode .section-title {
color: #ffffff;
}

body.dark-mode .description {
color: #d0d0d0;
}

body.dark-mode .stats-section {
background-color: #121212;
}

body.dark-mode .stats-card {
background: #1e1e1e;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

body.dark-mode .stats-value {
color: #ffffff;
}

body.dark-mode .stats-label {
color: #b0b0b0;
}

body.dark-mode .cta-wrapper {
background-color: #1e1e1e;
box-shadow: 0 0 50px rgba(255, 167, 38, 0.2);
}

body.dark-mode .cta-title,
body.dark-mode .cta-description {
color: #ffffff;
}

body.dark-mode .cta-button {
background-color: var(--primary-color);
color: #ffffff;
}

body.dark-mode .cta-button:hover {
background-color: var(--primary-color);
}

body.dark-mode .vote-section {
background-color: #121212;
}

body.dark-mode .card {
background-color: #1e1e1e;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

body.dark-mode .card-title,
body.dark-mode .player-name,
body.dark-mode .reward-name {
color: #ffffff;
}

body.dark-mode .section-title {
color: #ffffff;
}

body.dark-mode .subtitle,
body.dark-mode .vote-count,
body.dark-mode .reward-chance,
body.dark-mode .text-muted {
color: #b0b0b0 !important;
}

body.dark-mode .leaderboard-item:hover,
body.dark-mode .reward-item:hover {
background-color: #2a2a2a;
}

body.dark-mode .form-control {
background-color: #2a2a2a;
color: #e0e0e0;
border-color: #444444;
}

body.dark-mode .form-control::placeholder {
color: #888888;
}

body.dark-mode .form-control:focus {
background-color: #333333;
border-color: var(--primary-color);
box-shadow: 0 0 0 0.2rem rgba(240, 177, 0, 0.25);
}

body.dark-mode .btn-primary {
background-color: var(--primary-color);
color: #ffffff;
}

body.dark-mode .btn-primary:hover {
background-color: var(--primary-color);
}

body.dark-mode .footer {
background-color: #1a1a1a;
color: #e0e0e0;
}

body.dark-mode .footer-description,
body.dark-mode .footer-links a,
body.dark-mode .copyright-main,
body.dark-mode .copyright-sub {
color: #b0b0b0;
}

body.dark-mode .footer-links a:hover {
color: var(--primary-color);
}

body.dark-mode .footer-title {
color: #ffffff;
}

body.dark-mode .social-links a {
color: #b0b0b0;
}

body.dark-mode .social-links a:hover {
color: var(--primary-color);
}

body.dark-mode .footer-bottom {
border-top-color: rgba(255, 255, 255, 0.15);
}

body.dark-mode .footer-bottom-link {
color: #b0b0b0;
}

body.dark-mode .footer-bottom-link:hover {
color: var(--primary-color);
}

body.dark-mode a {
color: var(--primary-color);
}

body.dark-mode a:hover {
color: #694f02;
}
body.dark-mode .card-body {
color: white;
}
body.dark-mode #vote-card {
color: black;
background-color: #1e1e1e;
}

/* Mode sombre END */


7 changes: 4 additions & 3 deletions config.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@
"record_players": "276",
"cta_title": "Pr\u00eat \u00e0 commencer l'aventure ?",
"cta_description": "Rejoignez des milliers de joueurs et cr\u00e9ez votre propre histoire dans notre univers Minecraft unique.",
"cta_button_type": "server",
"cta_button_type": "custom",
"cta_button_text": "Jouer",
"cta_button_link": "https://azuriom.com/en",
"about_image": null,
Expand All @@ -36,5 +36,6 @@
"stats_icon_3": "bi bi-trophy-fill",
"unique_players_label": "Joueurs uniques",
"record_players_label": "Record de joueurs",
"online_players_label": "Joueurs en ligne"
}
"online_players_label": "Joueurs en ligne",
"dark_mode": "1"
}
12 changes: 10 additions & 2 deletions config/config.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,14 +111,22 @@ function addLinkListener(el) {
<div class="mb-3">
<label class="form-label" for="colorInput">{{ trans('messages.fields.color') }}</label>
<input type="color" class="form-control form-control-color color-picker @error('color') is-invalid @enderror" id="colorInput" name="color" value="{{ old('color', theme_config('color', '#c0392b')) }}" required>

@error('color')
<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
@enderror
</div>
<div class="mb-3">
<label class="form-label" for="darkModeInput">Activer le mode sombre</label>
<div>
<input type="checkbox" class="form-check-input" id="darkModeInput" name="dark_mode" value="1" {{ old('dark_mode', theme_config('dark_mode')) ? 'checked' : '' }}>
</div>
<small class="form-text text-muted">Activez cette option pour appliquer le mode sombre à tout le site.</small>
@error('dark_mode')
<span class="invalid-feedback" role="alert"><strong>{{ $message }}</strong></span>
@enderror
</div>
</div>
</div>

<h4 class="mb-3">{{ trans('theme::nomad.config.about_section') }}</h4>
<div class="card bg-light mb-4">
<div class="card-body">
Expand Down
1 change: 1 addition & 0 deletions config/rules.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,5 +21,6 @@
'unique_players_label' => 'required|string',
'record_players_label' => 'required|string',
'online_players_label' => 'required|string',
'dark_mode' => 'boolean',
];

Binary file added lang/.DS_Store
View file
Open in desktop
Binary file not shown.
5 changes: 3 additions & 2 deletions theme.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,5 +6,6 @@
"authors": [
"pkhemae & akira_fr"
],
"azuriom_api": "1.1.0"
}
"azuriom_api": "1.1.0",
"apiId": 162
}
Binary file added views/.DS_Store
View file
Open in desktop
Binary file not shown.
3 changes: 2 additions & 1 deletion views/layouts/base.blade.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
<script src="{{ asset('vendor/axios/axios.min.js') }}" defer></script>
<script src="{{ asset('js/script.js') }}" defer></script>
<script src="{{ theme_asset('js/app.js') }}" defer></script>


<!-- Page level scripts -->
@stack('scripts')
Expand All @@ -64,7 +65,7 @@
@include('elements.theme-color', ['color' => $themeColor])

</head>
<body>
<body class="{{ theme_config('dark_mode') ? 'dark-mode' : '' }}">
<div id="app">
<header>
@include('elements.navbar')
Expand Down