Skip to content

Fonts #692

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

Merged
AdmiralGT merged 5 commits into from
Aug 3, 2026
Merged

Fonts #692

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b3c4205
feat: Dark mode
AdmiralGT Aug 3, 2026
45e0c78
fix: Dark mode improvements
AdmiralGT Aug 3, 2026
b8f173f
feat: Dark Mode
AdmiralGT Aug 3, 2026
d5ad324
fix: Add a toggle
AdmiralGT Aug 3, 2026
87fc04b
fix: Remove unused font
AdmiralGT Aug 3, 2026
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
122 changes: 122 additions & 0 deletions scripts/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,89 @@

<!doctype html>
<html class="h-100">
<script>
// Set data-theme before first paint to avoid a flash of the wrong theme.
(function () {
var storedTheme = localStorage.getItem('theme');
var theme = storedTheme || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
document.documentElement.setAttribute('data-theme', theme);
})();
</script>

<style>
:root {
--bg-color: #ffffff;
--text-color: #212529;
--card-bg: #ffffff;
--border-color: #dee2e6;
--link-color: #007bff;
--muted-color: #6c757d;
color-scheme: light;
}
html[data-theme="dark"] {
--bg-color: #121212;
--text-color: #e0e0e0;
--card-bg: #1e1e1e;
--border-color: #444444;
--link-color: #8ab4f8;
--muted-color: #aaaaaa;
color-scheme: dark;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
}
html[data-theme="dark"] a {
color: var(--link-color);
}
html[data-theme="dark"] .text-dark {
color: var(--text-color) !important;
}
html[data-theme="dark"] .text-muted {
color: var(--muted-color) !important;
}
html[data-theme="dark"] .table {
color: var(--text-color);
}
html[data-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(255, 255, 255, 0.05);
}
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .custom-select,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .modal-content {
background-color: var(--card-bg);
color: var(--text-color);
border-color: var(--border-color);
}
html[data-theme="dark"] .dropdown-item {
color: var(--text-color);
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
background-color: #333333;
color: #ffffff;
}
html[data-theme="dark"] .list-group-item {
background-color: var(--card-bg);
color: var(--text-color);
border-color: var(--border-color);
}
html[data-theme="dark"] .page-link {
background-color: var(--card-bg);
color: var(--link-color);
border-color: var(--border-color);
}
html[data-theme="dark"] .page-item.disabled .page-link {
background-color: var(--bg-color);
color: var(--muted-color);
border-color: var(--border-color);
}
html[data-theme="dark"] .page-item.active .page-link {
background-color: var(--link-color);
border-color: var(--link-color);
color: #121212;
}
.badge-purple {
color: #ffffff;
background-color: #694c8f;
Expand Down Expand Up @@ -37,6 +118,47 @@
<body class="d-flex flex-column h-100">
{% include 'navbar.html' %}

<script>
function setTheme(theme, persist) {
document.documentElement.setAttribute('data-theme', theme);
if (persist) {
localStorage.setItem('theme', theme);
}
var toggle = document.getElementById('themeToggle');
var moonIcon = document.getElementById('themeToggleMoon');
var sunIcon = document.getElementById('themeToggleSun');
if (toggle) {
var nextThemeLabel = theme === 'dark' ? 'Switch to light mode' : 'Switch to dark mode';
toggle.setAttribute('aria-label', nextThemeLabel);
toggle.setAttribute('title', nextThemeLabel);
}
if (moonIcon && sunIcon) {
moonIcon.classList.toggle('d-none', theme === 'dark');
sunIcon.classList.toggle('d-none', theme !== 'dark');
}
}

(function () {
var toggle = document.getElementById('themeToggle');
var currentTheme = document.documentElement.getAttribute('data-theme') || 'light';
setTheme(currentTheme, false);

if (toggle) {
toggle.addEventListener('click', function () {
var activeTheme = document.documentElement.getAttribute('data-theme') || 'light';
setTheme(activeTheme === 'dark' ? 'light' : 'dark', true);
});
}

// Follow OS changes only when the user has not manually chosen a theme.
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (event) {
if (!localStorage.getItem('theme')) {
setTheme(event.matches ? 'dark' : 'light', false);
}
});
})();
</script>

{% if BANNER %}
<div class="alert alert-danger">
{{ BANNER }}
Expand Down
8 changes: 7 additions & 1 deletion scripts/templates/navbar.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
{% load i18n %}
{% load i18n bootstrap_icons %}

<nav class="navbar sticky-top navbar-expand-sm navbar-dark bg-dark">
<a class="navbar-brand">BotC Scripts</a>
Expand Down Expand Up @@ -50,6 +50,12 @@
</li>
</ul>
<ul class="navbar-nav ml-auto">
<li class="nav-item align-self-center mr-2">
<button id="themeToggle" class="btn btn-outline-light btn-sm px-2 py-1" type="button" aria-label="Toggle theme" title="Toggle theme">
<span id="themeToggleMoon" aria-hidden="true">{% bs_icon 'moon-stars-fill' %}</span>
<span id="themeToggleSun" class="d-none" aria-hidden="true">{% bs_icon 'sun-fill' %}</span>
</button>
</li>
{% if not user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'account_login' %}">Log In/Sign Up</a>
Expand Down
30 changes: 16 additions & 14 deletions scripts/templates/script.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,10 @@
.bg-loric {
background-color: rgba(141, 199, 0, 0.6);
}

html[data-theme="dark"] #characters span[style="color:#0000ff"] {
color: #66b3ff !important;
}
</style>

<script>
Expand Down Expand Up @@ -139,21 +143,19 @@ <h4><span class="badge badge-pill badge-dark">You</span></h4>
<a class="btn btn-primary" href="{{ script_tool_link }}" target="_blank">Open in Script Tool</a>
</div>
<div class="col-md-auto pl-1 p-0">
<form class="form-inline mb-0" method="get" action="{% url 'download_json' script.pk script_version.version %}">
<div class="col-md-auto p-1 pt-0">
<div class="btn-group">
<button type="submit" class="btn btn-primary">Download JSON</button>
<button type="submit" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="downloadJsonButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu" aria-labelledby="downloadJsonButton">
{% for language in languages %}
<button type="submit" class="dropdown-item" name="language_select" value={{ language }}>{% get_language_name language %}</a>
{% endfor %}
</div>
<div class="col-md-auto p-1 pt-0">
<div class="btn-group">
<a class="btn btn-primary" href="{% url 'download_json' script.pk script_version.version %}">Download JSON</a>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" id="downloadJsonButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu" aria-labelledby="downloadJsonButton">
{% for language in languages %}
<a class="dropdown-item" href="{% url 'download_json' script.pk script_version.version %}?language_select={{ language }}">{% get_language_name language %}</a>
{% endfor %}
</div>
</div>
</form>
</div>
</div>
{% if script_version.pdf %}
<div class="col-md-auto p-1">
Expand All @@ -166,7 +168,7 @@ <h4><span class="badge badge-pill badge-dark">You</span></h4>
</div>
{% endif %}
<div class="col-md-auto p-1">
<button class="btn btn-primary" onclick="CopyLink()">JSON</button>
<a class="btn btn-primary" href="#" role="button" onclick="CopyLink(); return false;">JSON</a>
</div>
{% if script_version.edition > 2 %}
{% if perms.scripts.download_unsupported_json %}
Expand Down
4 changes: 2 additions & 2 deletions scripts/templates/scriptlist.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,8 @@
<div class="form-group row mb-0">
<div class="container">
<div class="row p-1">
{% bootstrap_button 'Filter' extra_classes="mr-1" %}
{% bootstrap_button 'Clear' href="/" %}
<a class="btn btn-primary mr-1" href="#" role="button" onclick="this.closest('form').submit(); return false;">Filter</a>
{% bootstrap_button 'Clear' button_class='btn-primary' href="/" %}
<div class="col">
<p class="font-weight-bold text-right">
Results: {{ table.rows|length }}
Expand Down
12 changes: 12 additions & 0 deletions scripts/templates/statistics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,18 @@
.table-striped-loric>tbody>tr:nth-child(even)>td {
background-color: rgba(189, 205, 81, 0.4);
}

/* These tables keep fixed pastel backgrounds, so text should stay black regardless of theme. */
html[data-theme="dark"] .table-striped-good td,
html[data-theme="dark"] .table-striped-evil td,
html[data-theme="dark"] .table-striped-traveller td,
html[data-theme="dark"] .table-striped-fabled td,
html[data-theme="dark"] .table-striped-good .text-dark,
html[data-theme="dark"] .table-striped-evil .text-dark,
html[data-theme="dark"] .table-striped-traveller .text-dark,
html[data-theme="dark"] .table-striped-fabled .text-dark {
color: #212529 !important;
}
</style>

<div class="container">
Expand Down
6 changes: 6 additions & 0 deletions scripts/templates/worldcup/fixturetable.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
<div class="container w-100 p-0">
<style>
.table-success {
background-color: #1e5631;
color: #ffffff !important;
}
</style>
<div class="row p-0">
<div class="table-striped w-100 p-0">
<table class="table">
Expand Down
9 changes: 9 additions & 0 deletions scripts/templates/worldcup/statistics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,15 @@
background-color: #fff0cc;
}

/* These tables keep fixed pastel backgrounds, so text should stay black regardless of theme. */
html[data-theme="dark"] .table-striped-good td,
html[data-theme="dark"] .table-striped-evil td,
html[data-theme="dark"] .table-striped-fabled td,
html[data-theme="dark"] .table-striped-good .text-dark,
html[data-theme="dark"] .table-striped-evil .text-dark,
html[data-theme="dark"] .table-striped-fabled .text-dark {
color: #212529 !important;
}
</style>

<div class="container">
Expand Down
Loading