Skip to content

OSM Catppuccin Frappe by coteyka1209

Screenshot of OSM Catppuccin Frappe

Details

Authorcoteyka1209

Licenseuse it if you want, ig

Categoryhttps://openstreetmap.org

Created

Updated

Size16 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Simple yet cool lookin' dark theme for openstreetmap.org

Notes

catppuccin frappe for openstreetmap.org (+ iD editor)
for those who dont know what catppuccin is, basically dark theme but better
it works, but css is fucked up hard

and iD quite not ready yet
upd 30.11.2024 id is fully ready

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         OSM Catppuccin Frappe
@version      20241202.12.25
@namespace    https://userstyles.world/user/coteyka1209
@description  Simple yet cool lookin' dark theme for openstreetmap.org
@author       coteyka1209
@license      use it if you want, ig
==/UserStyle== */

@-moz-document domain("openstreetmap.org") {
body {
	background-color: #303446
}

#sidebar_content {
	background-color: #414559 !important
}

li,
h1,
h2,
h3,
h4,
h5,
h6,
h7,
h8,
h9, /* :p */
p,
bdi, legend, label, dd, dt, code, li::marker, .form-text.text-muted, .text-body-secondary, .localized-text, .entity-name, .col-md {
	color: #c6d0f5 !important
}

.btn-close {
	background-color: #c6d0f5;
}

a,
summary, .entity-type, .changeset_id.link-body-emphasis {
	color: #babbf0 !important
}

input {
	background-color: #63687c !important;
	color: #bdd0f5 !important
}

.btn.btn-outline-primary.geolink {
	color: #a5adce;
}

.form-control.z-0.py-1.px-2 {
	background-color: #737994;
}

.d-flex.bg-body.closed.z-3, .content-inner, .content-heading.bg-body-secondary.border-bottom.border-secondary-subtle, .content-body {
	background-color: #303446 !important
}

.icon-link.gap-1.text-body-emphasis.text-decoration-none.geolink {
	/* osm logo */
	color: #c6d0f5 !important
}

.leaflet-control-attribution.leaflet-control {
	background-color: rgba(90, 92, 122, .8) !important
}

.donate-attr {
	color: #a6d189 !important
}

.describe_location.position-absolute.end-0.top-0.bottom-0.m-1.btn.btn-outline-primary.border-0.p-1.bg-transparent.text-primary.link-body-emphasis.link-opacity-100-hover {
	color: #babbf0 !important
}

.btn.btn-primary.p-1,
.btn.btn-outline-primary.dropdown-toggle.dropdown-toggle-split {
	background-color: #303446;
	--bs-btn-border-color: #303446;
	color: #a4bbe9
}

.py-1.border-secondary-subtle.border-start {
	background-color: #626880 !important;
	--bs-secondary-border-subtle: #4b5063;
	color: #a5adce
}

.py-1.border-secondary-subtle.table-secondary.fw-normal {
	background-color: #51576d !important;
	--bs-secondary-border-subtle: #434755
}

.leaflet-control-scale-line {
	background-color: rgba(100, 102, 138, .7)!important;
	color: #b5bfe2 !important
}

.search_form.bg-body-secondary.px-1.py-2 {
	background-color: #414559 !important;
}

.form-control,
.mb-3.border.border-secondary-subtle.rounded.overflow-hidden,
.btn.btn-primary,
.d-flex.gap-1.align-items-center.justify-content-center.dropdown-toggle.btn.btn-outline-secondary.border-secondary-subtle.bg-body.text-secondary.px-2.py-1.flex-grow-1, .footer, .inspector-body, .header.fillL, .preset-icon.area-geom.framed, .ideditor ::-webkit-scrollbar, .key.combobox-input, .value.combobox-input, .form-field-button.remove, .label-text, .localized-add.form-field-button, .localized-main, .field-label, .sidebar, input, .no-results-item, .remove-icon, .form-field-button.decrement, .form-field-button.increment, .chiplist, .chip.draggable, .combobox-option, .form-field-input-wrap.form-field-input-check, .modified-icon, .form-field-button.colour-preview, .rows, .preset-input-access.preset-input-access-horse.combobox-input, .label.preset-label-access, .form-field-input-wrap.form-field-input-radio label, .table.table-sm.align-middle.messages-table td, .nav-link.active, .card-body, .alert.alert-success.row.mx-0.mb-0.p-3.rounded-0.align-items-center, .page-link.icon-link.text-center.text-nowrap, .form-field-button.foreign-id-permalink, .form-field-button.wiki-link.disabled, .form-field-button.wiki-link, .form-field-button.date-calendar, .form-field-button.date-set-today, .form-field-input-wrap.form-field-input-textarea textarea, .form-field-input-wrap.form-field-input-address, .page-link, .page-item.disabled, .chip, .members-download, .member-download, .remove.member-delete, .member-zoom, .field-help-button, .modal-section.save-section.fillL, .modal-section.changeset-editor, .reset, .restore, .modal-section, .change-item button, bdi, .ti_content.taginfo-content, .ti_named_link.taginfo-tag, .remove-icon-multilingual, .pane-content li, .tag-reference-button, .note-header, .note-header-label, .note-header-icon.open, .comment-main, .error-details.qa-details-container, .qa-header, .qa-header-label, .qa-header-icon {
	/*exclude borders :) */
	border: 0px solid #bebebe !important
}

.control-button {
	background-color: #232634 !important
}

.field-label {
	background-color: #737994 !important
}

.btn.btn-outline-primary.geolink,
.btn.btn-outline-primary.dropdown-toggle.dropdown-toggle-split,
.dropdown-divider {
	border-color: #595f75 !important;
	--bs-btn-hover-bg: #5a5c7a !important;
}

#sidebar {
	background-color: #414559 !important
}

.btn.btn-primary {
	background-color: #63687c;
	--bs-btn-active-bg: #575b6a
}

.spinner-border {
	color: #707691 !important;
}

.dropdown-menu.show {
	background-color: #292c3c
}

.badge.count-number, .badge.bg-success.text-white {
	background-color: #a6d189 !important
}

.dropdown-toggle.nav-link.btn.btn-outline-secondary.border-0.bg-body.text-secondary,
.d-flex.gap-1.align-items-center.justify-content-center.dropdown-toggle.btn.btn-outline-secondary.border-secondary-subtle.bg-body.text-secondary.px-2.py-1.flex-grow-1 {
	background-color: #51576d !important;
	color: #b5bfe2 !important
}

.list-group {
	--bs-list-group-bg: #0000;
	--bs-list-group-border-color: #222534
}

.btn.btn-primary.p-1 {
	background-color: #292c3c
}

.search_forms {
	border-radius: 25px
}

.leaflet-contextmenu, .leaflet-contextmenu-item, .form-field-button.remove, .form-field-button.decrement, .form-field-button.increment, .chiplist, .modified-icon, .form-field-button.foreign-id-permalink, .form-field-button.wiki-link.disabled, .form-field-button.wiki-link, .form-field-button.date-calendar, .form-field-button.date-set-today, .field-help-button {
	background-color: #737994 !important;
	color: #c0caee !important;
}

.leaflet-contextmenu-item.over {
	background-color: #646a82 !important;
}

#map-ui, td, .preset-choose {
	background-color: #414559 !important;
	color: #c6d0f5 !important;
}

.form-control.form-control-sm.font-monospace {
	color: #a5adce !important;
}

.alert.alert-info {
	background-color: #85c1dc;
	color: #626880 !important
}

.form-control {
	background-color: #737994;
	color: #a5adce !important;
}

.dropdown-item:hover {
	background-color: #242735 !important
}

.inspector-body, .header.fillL, .close, .preset-reset.preset-choose, .footer, .value.combobox-input, .form-fields-container.grouped-items-area {
	background-color: #414559 !important;
	color: #c6d0f5 !important
}

.preset-icon.area-geom.framed, .preset-icon.point-geom, .reverser, .card-body, .page-link.icon-link.text-center.text-nowrap, .px-2.py-1.bg-body, .form-field-input-wrap.form-field-input-textarea textarea, .preset-icon.vertex-geom.framed, .preset-icon.line-geom.preset-icon-iD, .preset-icon.area-geom.preset-icon-iD, .preset-icon.point-geom.preset-icon-iD, .icon.iD-route-master.tag-type.tag-type-route_master, .remove-icon-multilingual, .preset-icon-fill.preset-icon-fill-vertex, .open-data-options, .layer-browse {
	background-color: #838ba7 !important
}

.preset-icon.line-geom.framed svg {
	top: 30% !important
}

.popover-inner {
	background-color: #737994 !important
}

.disclosure-wrap.disclosure-wrap-entity_issues.grouped-items-area {
	background-color: #838ba7
}

.issue-text, .issue-info-button {
	background-color: #626880 !important;
	border-radius: 0;
	border-width: 0;
}

.section.section-issues-status .box {
	background-color: #a6d189;
	border-color: #a6d189
}

.box span {
	color: white !important
}

.issue-info-button {
	border-radius: 0
}

.pane-heading, .pane-heading button {
	background-color: #303446
}

/* right menu header */
.header.fillL {
	background-color: #303446 !important
}

/* left menu header */
.pane-heading .icon {
	fill: red !important
}

.pane-content {
	background-color: #414559
}

.pane-content li {
	background-color: #737994 !important
}

.issue.severity-error button, .issue-fix-list button {
	background-color: #737994 !important;
	border-radius: 0;
	border-width: 0;
}

.modal-section.fillL {
	background-color: #838ba7 !important
}

.close {
	background-color: #303446 !important
}

.keyhint-wrap {
	background-color: #626880 !important
}

.label, .label-text, .remove-icon, .form-field-button.colour-preview, .members-download, .member-download, .remove.member-delete, .member-zoom, .restriction-controls-container, .tag-reference-button {
	background-color: #737994 !important
}

.add-button.bar-button, .undo-button.bar-button, .redo-button.bar-button, .item-content button {
	background-color: #949cbb;
}

.localized-main, .localized-add.form-field-button, .combobox-input, .form-field-input-wrap.form-field-input-check, .form-field-input-wrap, .ideditor .form-field-input-radio, .label, .geocode-item.secondary-action, .no-results-item, .form-field-input-wrap.form-field-input-radio, .chip.draggable, .chip, .form-field-input-wrap.form-field-input-radio label, .structure-extras-wrap, .form-field-input-wrap.form-field-input-number input, .addr-row input, .form-field-input-wrap.form-field-input-text input, .form-field-input-wrap.form-field-input-colour input, .form-field-input-wrap.form-field-input-url input, .form-field-input-wrap.form-field-input-date input, .chiplist.active, .form-field-input-wrap.form-field-input-identifier input, .form-field-input-wrap.form-field-input-tel input, .form-field-input-wrap.form-field-input-email input, .localized-value {
	background-color: #838ba7 !important;
	color: #c6d0f5 !important;
}

input::placeholder {
	color: #a5adce !important
}

.key.combobox-input, .combobox-option {
	background-color: #51576d !important
}

.value.combobox-input {
	background-color: #626880 !important
}

.ideditor .preset-list-button-wrap {
	border: 1px solid #737994;
}

.map-footer {
	background-color: rgba(90, 92, 122, .7);
}

.remove-icon svg, .remove-icon-multilingual svg, .tag-reference-button svg {
	fill: #a4adce !important
}


.zoom-to.notice.fillD .label {
	background-color: #f000 !im...

Reviews

No reviews yet.